web-dev-qa-db-ja.com

Twitterの日付範囲ピッカーの選択した日付を更新Bootstrap

Dan Grossman によるTwitter Bootstrapに 日付範囲ピッカー を使用しています。

初期化時に、startDateやendDateなどの事前定義された値を設定することが可能です。後で同様の方法で手動で値を更新することは可能ですか？

私がやりたいのは、保存したフィルターを日付範囲ピッカーに「ロード」することです。これには、開始日と終了日が含まれます（事前定義された範囲を定義することではありません）。 jQueryを介して日付範囲ピッカーのフィールドを更新するだけでは、カレンダーの実際の選択は更新されません。

日付範囲ピッカーを初期化するとき、私はこのようなことをするべきだと思います：

var reportrange = $('#reportrange').daterangepicker(),
DateRangePicker = reportrange.data('daterangepicker');

しかし、DateRangePickerを使用して、日付範囲ピッカーとカレンダーを手動で新しく選択した日付で更新する方法はありますか。

javascriptjquerytwitter-bootstrapdaterangepicker
11
Gustav

このコンポーネントの最新バージョンは、開始日/終了日を更新するためのメソッドを提供します：

$("#reportrange").data('daterangepicker').setStartDate(startDate);
$("#reportrange").data('daterangepicker').setEndDate(endDate);

これらはすべてを処理するため、更新メソッドを自分で呼び出す必要はありません。

23
Dan Grossman

私は正しい軌道に乗っていました。 DateRangePickerを次のように使用して日付を更新できます。

DateRangePicker.startDate = moment(startDate.toJSON().slice(0, 10), DateRangePicker.format);
DateRangePicker.endDate = moment(endDate.toJSON().slice(0, 10), DateRangePicker.format);
DateRangePicker.updateView();
DateRangePicker.cb(DateRangePicker.startDate, DateRangePicker.endDate);
DateRangePicker.updateCalendars();
5
Gustav

guillaume Lavoieの回答の追加情報。このコードは私のために働きました：

orders = { order_sdate : "2015-01-01", order_edate : "2015-01-20" };

jQuery( "#order_date" ).val( order.order_sdate + " - " + order.order_edate );
jQuery( "#order_date" ).data('daterangepicker').startDate = moment( order.order_sdate, "YYYY-MM-DD" );
jQuery( "#order_date" ).data('daterangepicker').endDate = moment( order.order_edate, "YYYY-MM-DD" );
jQuery( "#order_date" ).data('daterangepicker').updateView();
jQuery( "#order_date" ).data('daterangepicker').updateCalendars();
3
Özgür Fırat Özpolat

ありがとう。コードの一部は、ページで新しい日付範囲を動的に設定する方法を見つけるのに役立ちます。

ただし、1つあります。あなたの方法は、ページ内のすべてのDateRangePickersを更新するようです（複数ある場合）。

また、DateRangePickerプロトタイプオブジェクトは、ページでアクセスできない場合があります（プラグインが外部JSファイルに配置されている場合）。

JQueryセレクターにリンクされているものだけを更新する方法を次に示します。

// Init DateRangePicker
$('#reportrange').daterangepicker({/* params */}),
...

// Update params dynamically after init.
// In this case, date format has been set to YYYY-MM-DD on init.
$("#reportrange").data().daterangepicker.startDate = moment( '2013-12-24', datepicker.data().daterangepicker.format );
$("#reportrange").data().daterangepicker.endDate = moment( '2013-12-25', datepicker.data().daterangepicker.format );
$("#reportrange").data().daterangepicker.updateCalendars();
3
Guillaume Lavoie