引导日期选择器，beforeShowDay 在第二次点击后工作答案

【问题标题】：bootstrap datepicker, beforeShowDay works after second click引导日期选择器，beforeShowDay 在第二次点击后工作
【发布时间】：2017-01-28 17:03:00
【问题描述】：

我对带有引导日期选择器的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(); 
});

【问题讨论】：

标签： javascript jquery twitter-bootstrap-3 datepicker bootstrap-datepicker

【解决方案1】：

我知道这是一个老问题，但它今天仍然在引导程序的日期选择器中发生。原因是beforeshowday 在changeDate 之前触发。因此，每次单击新的一天后，beforeshowday 首先出现（带有旧日期），然后是 changeDate。不管我怎么看。我觉得这是他们应该修复的错误，因为样式应该适用于新日期。因此changeDate 应该放在其他任何东西之前。

无论如何，解决方案其实很简单。更改日期后，只需在 changeDate 中强制输入 update，它就会使用新日期触发 beforeShowDay。这里以我的代码 sn-p 为例：

    $('#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);
    });

【讨论】：

【解决方案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();
        });

【讨论】：