日期范围选取器如何在输入日期时触发事件

时间:2013-09-01 20:32:11

标签: javascript jquery twitter-bootstrap datepicker

我正在使用Dan Grossman的daterangepicker。

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

这是在我的网页中初始化的,现在我正在尝试编写一旦用户输入日期就会实现的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')on.('enter')这样的事件,但没有任何事情可以解雇我。

2 个答案:

答案 0 :(得分:11)

来自daterangepicker.com:

$.ajax({
    method: 'POST',
    url: url,
    data: formData,
    processData: false,
    contentType: false
  }).then(
    function(data) {
      data = JSON.parse(data);
      var url = data.url;

      obj.set('src', url);
  });

答案 1 :(得分:8)

这部分是回调函数:

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

当用户选择日期时,您可以在此函数中添加所需的任何代码。你甚至可以自己定义一个回调函数并将其传递给daterange选择器方法。

示例:

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');
});