Question

我在使用bootstrap datepicker的beforeShowDay函数时遇到了一些问题。我的意图是当我点击任何一天时，所选日期后的5天必须包含活动类。

页面加载时，该功能完美运行。但是当我尝试选择任何其他日子时，如果我希望该功能起作用，我必须双击。该功能必须单击一下。有什么不对吗？

var selectedDay = new Date().getTime();
$('.datepicker').datepicker({
    beforeShowDay: function (date) {
        var d = date.getTime();
        if (d > selectedDay && d < selectedDay + 1 + 86400000 * 5) {
            return {classes: 'active'};
        }
    },
    startDate: '0'
}).on('changeDate', function(e){
    selectedDay = e.date;
    selectedDay = selectedDay.getTime(); 
});

Answer 1

我知道这是一个古老的问题，但是自启动日期选择器至今仍在发生。原因是beforeshowday在changeDate之前触发。因此，每次单击新的日期后，beforeshowday都会先出现（带有旧的日期），然后changeDate就会发生。不管我怎么看。我觉得这是他们应该修复的错误，因为样式应该与新日期一起使用。因此，changeDate应该先于其他任何地方。

无论如何，解决方案实际上非常简单。更改日期后，只需在update中强行插入changeDate，它将使用新的日期触发beforeShowDay。这是我的代码段作为示例：

    $('#datepicker').datepicker({
        inline: true,
        todayHighlight: true,
        beforeShowDay:function hday(date){
            return (is_pay_day() && day_diff(date)<14 && day_diff(date)>0 ) ?  {classes: 'highlight'} : {} ;
        }
    }).datepicker('setDate', 'today').on("changeDate", function (ev) {
        //set the new date if one is selected
        (!ev.date) ? $(this).datepicker('setDate', selectedDate) : selectedDate = ev.date;
        $('#datepickerInput').val(selectedDate.toDateString());
        //force the update, so the beforeShowDay will be triggered 
        $('#datepicker').datepicker('update',selectedDate);
    });

Answer 2

经过思考和搜索后，我发现了一个可能的解决方案，如果它有效，请告诉我，谢谢

var selectedDay = new Date().getTime();
$('.datepicker').datepicker({

            beforeShowDay: function (date) {
                var d = date.getTime();
                if (d > selectedDay && d < selectedDay + 1 + 86400000 * 5) {
                    return {classes: 'active'};
                }
            },
            startDate: '0'

        }).on('changeDate', function(e){

            selectedDay = e.date;
            selectedDay = selectedDay.getTime();
            $(".datepicker").data("datepicker").fill();
        });

bootstrap datepicker，beforeShowDay在第二次单击后工作

2 个答案: