daterangepicker.js 选择当前日期

Question

有人熟悉 Visual Studio .net中的 daterangepicker.js 插件吗？ 它实际上是一个非常好的插件，但有一个小缺陷我无法解决。 选择当前日期时，它不会识别它并且不会更改日期。 用户必须烦人地切换到其他日期，然后返回当前日期才能注册。

其他人遇到这种情况并有解决方法吗？

我的日期输入：

define(function (require) {
'use strict';
var vue = require('vue');

return vue.component('field-date-input', {
    template: '<input class="form-control" v-model.lazy="displayValue" type="text">',
    mixins: [VueFormGenerator.abstractField],
    mounted: function () {
        var self = this;
        $(this.$el).daterangepicker({ autoUpdateInput: false, singleDatePicker: true }, function (start, end) {
            self.displayValue = formatDate(start);
        });

        var startingValue = formatDate(this.displayValue);
        if (startingValue !== null) {
            this.displayValue = startingValue;
            $(this.$el).data('daterangepicker').setStartDate(startingValue);
        }
    },
    computed: {
        displayValue: {
            get: function () {
                return formatDate(this.value);
            },
            set: function (newValue) {

                $(this.$el).val(newValue);

                if (this.value !== null)
                    $(this.$el).data('daterangepicker').setStartDate(newValue);


                this.value = formatWebApiDate(newValue);
            }
        }
    }
});

Answer 1

这是由"autoUpdateInput": false,并记录在daterangepicker 的 github 中：

来自开发人员（丹格罗斯曼）：

您的回调 function 只会在做出新选择时触发。 由于当前日期是已经选择的日期，因此再次单击它不会触发您的代码。 您可以侦听 apply.daterangepicker 事件，而不是像“输入最初为空”一样

示例解决方案：

$('input[name="start_date"]').daterangepicker({ 
  "singleDatePicker": true,
  "showDropdowns": true,
  "autoUpdateInput": false,
  "autoApply": true
});

// HERE
$('input[name="start_date"]').on('apply.daterangepicker', function(ev, picker) {
  $(this).val(picker.startDate.format('YYYY-MM-DD'));
});