daterangepicker.js在Visual Studio .net中选择当前日期无响应问题求助

我之前也踩过这个daterangepicker的坑！当autoUpdateInput设为false时，选择和当前已选中日期相同的日期（比如当前日期），插件默认不会触发回调函数，也不会更新输入框，这就是你遇到的问题。下面是我验证过的解决办法：

问题根源 #

你的代码依赖daterangepicker初始化时的回调函数来更新值，但这个回调只有当选中的日期和当前值不同时才会触发。当用户选择当前日期（和已选日期一致），回调不会执行，导致你的Vue组件完全没感知到这个操作。

修复方案 #

我们需要改用监听apply.daterangepicker事件，这个事件在用户点击插件的"应用"按钮时一定会触发，不管日期有没有变化。同时调整组件的displayValue setter逻辑，确保即使值相同也能同步更新picker状态。

修改后的完整代码 #

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; 
            const $pickerEl = $(this.$el);
            // 初始化daterangepicker
            $pickerEl.daterangepicker({ 
                autoUpdateInput: false, 
                singleDatePicker: true 
            });

            // 监听apply事件，替代原回调
            $pickerEl.on('apply.daterangepicker', function(ev, picker) {
                const selectedDate = formatDate(picker.startDate);
                self.displayValue = selectedDate;
                // 手动同步输入框值（因为autoUpdateInput为false）
                $(this).val(selectedDate);
            });

            var startingValue = formatDate(this.displayValue); 
            if (startingValue !== null) { 
                this.displayValue = startingValue; 
                $pickerEl.data('daterangepicker').setStartDate(startingValue); 
            } 
        }, 
        computed: { 
            displayValue: { 
                get: function () { 
                    return formatDate(this.value); 
                }, 
                set: function (newValue) { 
                    const picker = $(this.$el).data('daterangepicker');
                    // 强制设置日期，即使新值和当前值一致
                    if (picker) {
                        picker.setStartDate(newValue);
                    }
                    $(this.$el).val(newValue); 
                    this.value = formatWebApiDate(newValue); 
                } 
            } 
        } 
    });

关键修改点说明 #

1. 替换回调为apply事件监听：apply.daterangepicker事件会在用户确认选择时触发，无论日期是否变化，确保选择当前日期的操作能被捕获。
2. 强制同步picker状态：在displayValue的setter中，不管新值和当前值是否相同，都调用setStartDate，避免依赖插件的自动判断。
3. 手动更新输入框：因为autoUpdateInput设为false，需要在事件监听里手动设置输入框的值，保证UI和组件状态一致。

额外注意事项 #

• 确保formatDate函数返回的日期格式和daterangepicker的配置格式一致（比如默认的YYYY-MM-DD），格式不匹配也可能导致插件无法识别日期。
• 如果你的formatWebApiDate函数有特殊处理，也要保证它能正确解析当前日期的格式。

内容的提问来源于stack exchange，提问作者ar12ig