6

Dan Grossman の daterangepicker を使用しています。

http://www.dangrossman.info/2012/08/20/a-date-range-picker-for-twitter-bootstrap/

これは私のWebページで初期化されており、ユーザーが日付を入力すると実装されるjavascriptを記述しようとしています。ただし、daterangepicker でイベントを発生させるのが困難になりました。

私が使用しているコードは

$('#dateRange').on('changeDate', function(ev){
    alert(ev);
});

そして、これがdaterangepickerを初期化するコードです

$('#dateRange').daterangepicker({
    ranges: {
        'Today': [moment(), moment()],
        'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
        'Last 7 Days': [moment().subtract('days', 6), moment()],
        'Last 30 Days': [moment().subtract('days', 29), moment()],
        'This Month': [moment().startOf('month'), moment().endOf('month')],
        'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
    },
    startDate: moment().subtract('days', 29),
    endDate: moment()
},
function(start, end) {
    $('#dateRange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
});

on.('blur')orのようなイベントをリッスンするさまざまな方法を試しましたがon.('enter')、イベントを発生させるものは何もありません。

4

2 に答える 2

12

このセクションはコールバック関数です。

function(start, end) {
    $('#dateRange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}

ユーザーが日付を選択したときに実行するコードをこの関数に追加できます。コールバック関数を自分で定義して、日付範囲ピッカー メソッドに渡すこともできます。

例：

function myCallback(start, end) {
    $('#dateRange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
    alert('hello world'); //etc, your code here
}
// attach daterangepicker plugin
$('#dateRange').daterangepicker(options, myCallback);

また、独自のカスタム イベント ハンドラーを定義して、コールバックでトリガーすることもできます。

例

$(document).on('myCustomEvent', function () {
    // your code here
});

$('#dateRange').daterangepicker({
// .. //
function(start, end) {
    $('#dateRange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
    $(document).trigger('myCustomEvent');
});
于 2013-09-01T20:50:46.487 に答える