jquery setDateDisabled +开始/结束日期中断 Bootstrap -日期选择器

vlju58qv  于 2022-12-12  发布在  jQuery
关注(0)|答案(2)|浏览(151)

我正在使用bootstrap-datepicker from eternicode,我反对一种奇怪的行为。
当我尝试将setDatesDisabled选项与默认的startDate和endDate选项一起使用时,日期选择器似乎冻结了,不允许我再更改月份。
最奇怪的事情是一个简单的alert()就在调用setDatesDisabled之前似乎纠正了bug...
我最后的需求是使用函数作为数据提供者,动态地添加一些disabledDate
简化代码:

// enable the datepicker on fields
    $('.date-picker').datepicker({
            format: 'yyyy-mm-dd',
            startDate: '2016-04-01',
            endDate: '2016-08-15',
            datesDisabled: ['2016-04-21','2016-04-20','2016-04-13']
        })
        .on('show', function(ev){
            // @TODO check why bug here...
        // alert('hi'); // uncomment to patch bug
            $(this).datepicker('setDatesDisabled', ['2016-04-17','2016-04-16']);

        });

选中the JSFiddle以重现。
有没有人面临同样的事情/有一个工作周围禁用一些日期的飞行?
我已经在永恒代码Github上做了a bug report,因为我认为这可能是一个内部bug。

bgtovc5b

bgtovc5b1#

这很可能是因为当您在日期选择器日历打开时导航时,日期选择器'show'事件会多次触发。
在日历已打开时设置禁用日期会导致日历重新计算并重新加载,从而导航回当前选定日期所在的月份-这会导致无法导航离开选定日期所在的页面(未选定日期时会出现半工作场景)。
不确定这是否适用于您的方案,但如果您仅在未打开日历的情况下设置禁用日期,则此方法应该有效。
我变了

.on('show', function(ev){

$('.date-picker').on('click', function(ev){

这看起来工作得很好,请参阅更新的小提琴:
https://jsfiddle.net/zj9sjspf/11/
第二个有点“黑客”的解决方案是,您可以禁用自动showOnFocus,并手动检查日历是否没有打开+设置新的禁用日期+当字段被关注时手动触发show。这不是最好的方法,但可能是您等待bug报告回复时的一种方法;)
可以在此处看到一种实现此目的的方法:https://jsfiddle.net/zj9sjspf/13/

vsdwdz23

vsdwdz232#

我在运行setEndDatesetStartDate时遇到了同样的问题。日期选择器坏了,不能更改月份、年份等,解决方法是这样的:

var setDatesDisabled = false;

$('.datepicker').datepicker({
    // Whatever options
})
.on('show', function(e) {
    if (!setDatesDisabled) {
        $(this).datepicker('setDatesDisabled', ['2016-04-17','2016-04-16']); 
        setDatesDisabled = true;
    }
})
.on('hide', function(e) {
    setDatesDisabled = false;
});

show事件仅在日期选择器打开时运行,而在导航时运行。

相关问题