如何使用日期范围选择器和 ajax答案

【问题标题】：How to use date range picker along with ajax如何使用日期范围选择器和 ajax
【发布时间】：2011-03-15 06:08:13
【问题描述】：

我正在使用日期范围选择器 javascript 库从用户中选择日期范围

                  $('#date_range').daterangepicker({
                    arrows:true,
                    dateFormat: 'd-M-yy',
                    rangeSplitter: 'to',
                    datepickerOptions: {
                         changeMonth: true,
                         changeYear: true,
                         minDate: new Date("01/01/2011") //Account created date
                    },
                    closeOnSelect: true,
                    onChange: function(){
                                    //ajax call goes here

                                    }
                  });

在我的 ajax 调用中，我正在使用日期范围更新屏幕。但是这个 on change 函数运行两次，ajax 返回旧日期值。如果需要使用 ajax 功能和日期范围选择器的 on change 功能。

如果有人找到了一次使用 onchange 函数的解决方案，并且从现在到现在都是正确的，请告诉我。提前致谢

【问题讨论】：

标签： jquery jquery-ui datepicker daterangepicker

【解决方案1】：

阅读你发现的documentation

onChange: 函数，回调那个每当输入日期时执行变化（可以在范围内发生两次选择）。

我已经设置了一个小演示http://jsfiddle.net/ByzYX/16/

所以 onChange 似乎是您解决方案的错误回调。我不太确定你想在屏幕上更新什么以及为什么要执行 ajax 请求，但你可以尝试一个 if 条件来只执行一次 ajax 调用。

所以onOpen 将标志设置为true，并在执行ajax 调用后将其设置为false。在onChange 中检查这个标志。

【讨论】：

【解决方案2】：

我是这样做的：

$('#date_range').daterangepicker({
    "startDate": "01/01/2016",
    "endDate": "07/27/2016"
    }, function(start, end, label) {
        $.ajax({
            url:"/your_url",
            method: "GET", // or POST
            dataType: "json",
            data: {from: start.format('YYYY-MM-DD'), to: end.format('YYYY-MM-DD')},
            success:function(result) {
                console.log("sent back -> do whatever you want now");
            }
        });
    });

这个函数的作用类似于$("#date_range").change(function(){});，但它也有一些参数。

您可能希望将日期字符串更改为您收到它的有效日期，以防您想要进行一些过滤。

我在http://www.daterangepicker.com/ 上发现了这个功能，看看那里有更多的例子！ :)

【讨论】：