Question

我正在使用daterangepicker，请在此处查看我的代码 JSFIDDLE

我已设置默认日期

"endDate": "08/03/2015",
"endDate": "08/03/2015",

我已经设置alert()来检查我的代码是否正常工作。

alert("New date range selected: '" + start.format('YYYY-MM-DD') + "' to '" + end.format('YYYY-MM-DD') + "'");

当我点击book_date文本框范围时，日历正在显示。如果我正在更改任何日期并单击“应用”按钮，则其工作正常。我的alert()框显示完美。但是，当我点击应用按钮而不更改任何日期。那个时间alert()框没有显示。

此外，book_date在点击文本框后点击默认日期，然后点击页面中的任意位置。因此，我不想在没有特定日期的情况下设置任何默认日期。单击日历的外部时，文本框应为空白。

我的编辑代码：

$('#book_date').on('apply.daterangepicker', function(ev, picker) {
    alert("New date range selected: '" + picker.startDate.format('YYYY-MM-DD') + "' to '" + picker.endDate.format('YYYY-MM-DD') + "'");
});

我的文本框日历获取默认值，如果我没有选择任何并点击页面的任何位置。

Answer 1

回调函数仅在选择新日期时执行。作为一种可能的解决方法，您可以使用apply.daterangepicker事件，该事件在单击应用按钮时触发：

$('#book_date').on('apply.daterangepicker', function(ev, picker) {
  var startDate = picker.startDate;
  var endDate = picker.endDate;
  alert("New date range selected: '" + startDate.format('YYYY-MM-DD') + "' to '" + endDate.format('YYYY-MM-DD') + "'");
});

查看示例here。

扩展回答

当你点击日期选择器时，没有内置的方法可以防止设置日期，所以你可以试试这个：

自定义hide功能，以便在日期选择器关闭时清除日期：

$('#book_date').on('hide.daterangepicker', function (ev, picker) {
    $('#book_date').val('');
});

更新apply功能以相应地填充日期字段。因此，仅在单击“应用”按钮时设置日期：

$('#book_date').on('apply.daterangepicker', function (ev, picker) {
    var startDate = picker.startDate;
    var endDate = picker.endDate;  
    //MM/DD/YYYY format
    $('#book_date').val(startDate.format('MM/DD/YYYY') + ' - ' + endDate.format('MM/DD/YYYY'));
});

更新了演示here。

Answer 2

当我们点击应用按钮然后执行回调函数但有条件。如果更改了日期范围，则将执行回调函数，否则将不执行。如果您想在每次单击“应用”按钮时执行此操作，请考虑更改日期范围的更少，然后执行以下步骤。

打开daterangepicker.js
在DateRangePicker.prototype

注释掉以下条件，该条件会比较新选择的日期范围和旧选择的日期范围

hide: function (e) {
this.container.hide();
//Below is the condition that checks for date range changes
//if (!this.startDate.isSame(this.oldStartDate) || !this.endDate.isSame(this.oldEndDate))
    this.notify();

this.oldStartDate = this.startDate.clone();
this.oldEndDate = this.endDate.clone();

$(document).off('mousedown', this.hide);
this.element.trigger('hidden', { picker: this });

}，

或者在hide函数中注释this.notify（）并将其放在clickApply：function

    clickApply: function (e) {
        this.updateInputText();
        this.hide();
        this.notify();
    },

Answer 3

$(function () {
           
            $('#start_date_id').on('apply.daterangepicker', function (ev, picker) {
                var startDate = picker.startDate;
                var endDate = picker.endDate;
                alert("New date range selected: '" + startDate.format('YYYY-MM-DD') + "' to '" + endDate.format('YYYY-MM-DD') + "'");
            });

        });

<html>
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
</head>
<body>
<input type="text" id="start_date_id" name="daterange"  />

<script>
$(function() {
  $('input[name="daterange"]').daterangepicker({
    opens: 'left'
  }, function(start, end, label) {
    console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
  });
});
</script>
</body>
</html>

daterangepicker适用于buttom无法正常工作

3 个答案: