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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18562616/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 21:57:25  来源:igfitidea点击:

Date Range Picker how to fire an event on entering a date

javascriptjquerytwitter-bootstrapdatepicker

提问by Linda Keating

I'm using Dan Grossman's daterangepicker.

我正在使用 Dan Grossman 的 daterangepicker。

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

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.

这是在我的网页中初始化的,现在我正在尝试编写将在用户输入日期后实现的 javascript。但是,我遇到了让 daterangepicker 触发事件的困难。

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.

我已经尝试了很多不同的方法来监听事件,例如on.('blur')oron.('enter')但没有什么是为我触发事件。

回答by Michele

From daterangepicker.com:

来自 daterangepicker.com:

$('#daterange').on('apply.daterangepicker', function(ev, picker) {
    alert ('hello');
});

回答by Neil S

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