2

私はdaterangepickerを使用しています ここで私のコードをチェックしてくださいJSFIDDLE

デフォルトの日付を設定しました

"endDate": "08/03/2015",
"endDate": "08/03/2015",

そしてalert()、コードが機能しているかどうかを確認するために を設定しました。

alert("New date range selected: '" + start.format('YYYY-MM-DD') + "' to '" + end.format('YYYY-MM-DD') + "'");

テキストボックスの範囲をクリックすると、book_dateカレンダーが表示されます。日付を変更して適用ボタンをクリックすると、正常に機能します。私のalert()箱は完璧に見えています。しかし、日付を変更せずに適用ボタンをクリックすると。そのタイムalert()ボックスは表示されていません。

またbook_date、テキストボックスをクリックしてページ内の任意の場所をクリックすると、デフォルトの日付が取得されます。したがって、特定の日付を選択せず​​にデフォルトの日付を設定したくありません。カレンダーの外側をクリックしている間、テキストボックスは空白でなければなりません。

私の編集したコード:

$('#book_date').on('apply.daterangepicker', function(ev, picker) {
    alert("New date range selected: '" + picker.startDate.format('YYYY-MM-DD') + "' to '" + picker.endDate.format('YYYY-MM-DD') + "'");
});

テキストボックスカレンダーは、何も選択せずにページの外側をクリックするとデフォルト値を取得します。

4

3 に答える 3

7

コールバック関数は、新しい日付が選択されたときにのみ実行されます。可能な回避策として、apply.daterangepicker適用ボタンがクリックされたときにトリガーされるイベントを使用できます。

$('#book_date').on('apply.daterangepicker', function(ev, picker) {
  var startDate = picker.startDate;
  var endDate = picker.endDate;
  alert("New date range selected: '" + startDate.format('YYYY-MM-DD') + "' to '" + endDate.format('YYYY-MM-DD') + "'");
});

ここで例を参照してください。

拡張回答

日付ピッカーをクリックしたときに日付が設定されないようにする組み込みの方法はないため、これを試すことができます。

hide日付ピッカーが閉じられるたびに日付がクリアされるように関数をカスタマイズします。

$('#book_date').on('hide.daterangepicker', function (ev, picker) {
    $('#book_date').val('');
});

関数を更新して、applyそれに応じて日付フィールドを入力します。したがって、適用ボタンがクリックされたときにのみ日付が設定されます。

$('#book_date').on('apply.daterangepicker', function (ev, picker) {
    var startDate = picker.startDate;
    var endDate = picker.endDate;  
    //MM/DD/YYYY format
    $('#book_date').val(startDate.format('MM/DD/YYYY') + ' - ' + endDate.format('MM/DD/YYYY'));
});

ここでデモを更新しました。

于 2015-07-28T10:14:50.193 に答える