1

jqueryui datepicker を使用して 2 つの入力フォームがあります: 1. 開始日 2. 終了日

私が欲しいのは、「開始日」から日付を選択し、「終了日」の日付ピッカーが「開始日」の後の日付のみを表示することです。そのため、「開始日」よりも長い/古い日付は表示されません。それを実現する方法は？

ありがとう

<input id="start" type="text">
<input id="end" type="text">
<script>
var myDate = '';
$(function(){
$('#start').datepicker({
onSelect: function(date){
myDate = $(this).val();
}
});
$('#end').datepicker({
minDate: myDate
});
});</script>

それは私のスクリプトですが、機能していません。

4

2 に答える 2

2

jquery ui Web サイトで日付範囲の例を確認してください。この例の下のソースを確認してください。 http://jqueryui.com/demos/datepicker/#date-range

于 2012-08-12T05:56:45.967 に答える
0

これは興味深い、かなり複雑な問題です。開始するには、いくつかのものが必要です。

  1. 日付ピッカーの最小値と最大値の両方を、反対の日付フィールドに基づいてロード時に設定する必要があります。このデフォルトの最小値と最大値は、次のように実行できます。

    A. jQuery を使用して日付フィールドからプレデータを取得する

    var initDateBegin = $('#beginField').val(),
    initDateEnd   = $('#endField').val();
    initDateBegin = new Date(initDateBegin);
    initDateEnd   = new Date(initDateEnd);

    minDateB. 次に、datepickerとmaxDateオプションを使用して、これらを Datepicker コンストラクターに渡すことができます: http://jqueryui.com/demos/datepicker/#option-minDate。ただし、ユーザーが begin と end を同じ日付に設定しないように、オフセットも必要です。大量の日付操作を行うときは、date.js ライブラリを使用します: http://www.datejs.com/ 

     $('#beginField').datePicker({ maxDate : initDateEnd.addDays(-1) });
 $('#endField').datePicker({ minDate : initDateBegin.addDays(1) });

  2. 次に、日付ピッカーが互いの制限を更新する必要があります。そう..

    A. ユーザーが開始日または終了日のいずれかで新しい日付を選択した後、反対のフィールド制限が更新されるように、両方の日付フィールドにリスナーを設定する必要があります。これは実際には datepicker コンストラクターで (onCloseメソッドhttp://jqueryui.com/demos/datepicker/#event-onCloseを使用して) 実行する必要があるため、次のようになります。

     $('#beginField').datePicker({ 
        maxDate : initDateEnd.addDays(-1),
        onClose : setMin
 });
 $('#endField').datePicker({ 
        minDate : initDateBegin.addDays(1),
        onClose : setMax
 });

    B. それでは、各ピッカーの最小値と最大値を実際に変更する関数をセットアップする時が来ました

    function setMin(newMinDate){
      //convert to date object
      newMinDate = new Date(newMinDate); 
      //set new min date on end datepicker
      $('#endField').datepicker('option', 'minDate', newMinDate.addDays(-1));                          
}

function setMax(newMaxDate){
      //convert to date object
      newMaxDate = new Date(newMaxDate); 
      //set new max date on begin datepicker
      $('#beginField').datepicker('option', 'maxDate', newMaxDate.addDays(1));                          
}

  3. これにより、少なくとも正しい方向に進むことができますが、さらに検討する必要がある場合があります。

    A. 考慮すべき絶対的な最大最小値はありますか? たとえば、開始と終了で選択可能な範囲は未来であってはならないため、今日の上限は 1990 年より前、または下限は 1990 であってはなりません。この場合、追加する必要があります。ユーザーが絶対制限を無効にする日付を選択するのを防ぐための、システム内の追加のキャッチ。

    B. モバイルサポートが必要ですか? その場合、モバイルには html5 日付フィールドを使用する必要があり、デスクトップでは html5 日付フィールドを使用しないでください (デスクトップ ブラウザーには日付ピッカーが組み込まれている可能性があるため)。

    C. jquery-ui 日付ピッカーは、ユーザーがキーボードを使用して日付を入力し、日付ピッカーをバイパスすることを妨げません。したがって、次のいずれかを行う必要があります

    • キーボード入力をまとめて禁止し、ユーザーに日付ピッカーの使用を強制します (keydown と preventDefault() で実行する必要があります)。

    • 手動で入力された日付の解析、そこからの制限のポリシング、および setMin 関数と setMax 関数で有効になるように変換するための追加のスクリプトを追加します。これは基本的に、解析後に反対のフィールドを更新するために日付ピッカーを使用しない限り、モバイル (非 jquery-ui) バージョンで作業するために再利用できます。最後に、手書きの日付を解析することも、本当に素晴らしいスクリプトである Date.js を使用する良い理由です。

幸運を！

于 2012-08-12T06:28:05.133 に答える