日期范围选择器如何在输入日期时触发事件 [英] Date Range Picker how to fire an event on entering a date

问题描述

我正在使用Dan Grossman的daterangepicker。

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

哪个是在我的网页中初始化的，现在我正在尝试写一个用户输入日期后才能实现的javascript。但是，我遇到困难，遇到困难。

我使用的代码是

  $（'＃dateRange'）。on（'changeDate'，function（ev）{
 alert（ev）; 
}）; 
  

这里是初始化daterangepicker的代码

  $（'＃dateRange'）。daterangepicker（{
范围：{
'今天'：[moment（），moment（）]，
'Yesterday'：[moment（）。subtract（'days'，1），moment（）。subtract（'days'，1）]，
'最近7天'：[moment（） （'days'，6），moment（）]，
'Last 30 Days'：[moment（）。subtract（'days'，29），moment（）]，
' ：[moment（）。startOf（'month'），moment（）。endOf（'month'）]，
'上个月'：[moment（）。subtract（'month'，1）.startOf 'month'），moment（）。subtract（'month'，1）.endOf（'month'）] 
}，
 startDate：moment（）。subtract（'days'，29） 
 endDate：moment（）
}，
函数（开始，结束）{
 $（'＃dateRange span'）。html（start.format（'MMMM D，YYYY '）+' - '+ end.format（'MMMM D，YYYY'））; 
}）; 
  

我已经尝试了许多不同的方式来收听 （'blur'）或 on。（'enter'），但没有任何事情为我触发。

解决方案

本节是回调函数：

 函数（开始，结束）{
 $（'＃dateRange span'）。html（start.format（'MMMM D，YYYY'）+' - '+ end.format（'MMMM D，YYYY'））; 
} 
  

您可以添加任何您想要的代码在用户选择时执行一个约会。您甚至可以自己定义一个回调函数并将其传递给daterange选择器方法。

示例：

 函数myCallback（start，end）{
 $（'＃dateRange span'）。html（start.format（'MMMM D，YYYY'）+' - '+ end.format （'MMMM D，YYYY'））; 
 alert（'hello world'）; // etc，你的代码在这里
} 
 //附加daterangepicker插件
 $（'＃dateRange'）。daterangepicker（options，myCallback）; 
  

您甚至可以定义自己的自定义事件处理程序，并在回调中触发它。 p>

示例

  $（document）.on（'myCustomEvent' （）{
 //你的代码
}）; 
 
 $（'＃dateRange'）。daterangepicker（{
 // .. // 
 function（start，end）{
 $（'＃dateRange span '）.html（start.format（'MMMM D，YYYY'）+' - '+ end.format（'MMMM D，YYYY'））; 
 $（document）.trigger（'myCustomEvent'）; 
}）; 
  

I'm using Dan Grossman's daterangepicker.

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

Which is initialised in my web page, and now I'm trying to write the javascript that will be implemented once the date is entered by the user. However I have run into difficulty getting the daterangepicker to fire an event.

The code I'm using is

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

And here is the code that initialises the 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'));
});

I've tried lots of different ways to listen for the event like on.('blur') or on.('enter') but nothing is firing the event for me.

解决方案

this section is the callback function:

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

you can add any code you want in this function to execute when a user selects a date. you could even define a callback function yourself and pass it to the daterange picker method.

example:

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

you also could even define your own custom event handler and trigger it in the callback as well.

example

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

这篇关于日期范围选择器如何在输入日期时触发事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！