2

我正在使用 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') + "'");
});

如果我没有选择任何内容并在页面的任何位置之外单击，我的文本框日历将获得默认值。

4

3 回答 3

7

回调函数仅在选择新日期时执行。作为一种可能的解决方法，您可以使用该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') + "'");
});

请参阅此处的示例。

扩展答案

当您单击日期选择器时，没有内置方法可以防止设置日期，因此您可以尝试以下操作：

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

在这里更新了演示。

于 2015-07-28T10:14:50.193 回答
3

当我们单击应用按钮时，回调函数会执行但有条件。如果更改日期范围，则回调函数将执行，否则将不会执行。如果您想在每次单击应用按钮时执行它，不管日期范围是否更改，请执行以下步骤。

  1. 打开 daterangepicker.js

  2. 在 DateRangePicker.prototype 中查找隐藏函数

  3. 注释掉以下比较新选定日期范围和旧选定日期范围的条件

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

    },

或者也可以在隐藏函数中注释 this.notify() 并将其放在 clickApply: 函数中

    clickApply: function (e) {
        this.updateInputText();
        this.hide();
        this.notify();
    },
于 2016-06-22T09:18:09.237 回答
1 

$(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>

于 2018-07-11T14:01:14.263 回答