Boostrap datepicker,每月动态禁用日期 [英] Boostrap datepicker, disabled dates dynamically each month

查看:65
本文介绍了Boostrap datepicker,每月动态禁用日期的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我可以通过以下方式禁用日期:

  $('#datepicker')。datepicker({
todayHighlight: true,
datesDisabled:['03 / 06/2017','03/21 / 2017','04/14/2017']
});

但是根据我的使用案例,由于您可以按年历查看年份,我可以拥有300禁用2017年的365天和2016年的365天中的200天。



我想优化,想象5年后,他可以有2500个禁用日加载。
有人知道如何动态地做这件事,我的意思是,每次更改当前月份。



还是另一种方法吗?

解决方案

changeMonth 中使用任何set *方法(例如 setDatesDisabled ), changeYear changeDecade changeCentury 事件将触发更新,这将导致选择器恢复到当前查看日期发生的月份。 / p>

为防止这种情况,您只需启动选择器,并将 updateViewDate 选项设置为 false

  $('#datepicker')。datepicker({
todayHighlight:true,
updateViewDate:false,
// datesDisabled:['03 / 06/2017','03/21/2017','04/14/2017']
})。on('changeMonth',function(e){
var month = e.date.getMonth();
var disabled = getDisabledDates(month);
$('#datepicker')。datepicker('setDat esDisabled',禁用);
});


I can disable dates with:

$('#datepicker').datepicker({
    todayHighlight: true,
    datesDisabled: ['03/06/2017', '03/21/2017','04/14/2017']
});

but with my use case, since you can go over the year by the calendar, I can have 300 disable days out of 365 in 2017 and 200 disabled days out of 365 in 2016.

I want to optimize, imagine after 5 years, he could have 2500 disabled days to load. Someone know how to do it dynamically, I mean, each time a change the current month.

Or another way to do this?

解决方案

Using any of the set* methods (e.g. setDatesDisabled) in the changeMonth, changeYear, changeDecade or changeCentury events will trigger an update which will cause the picker to revert back to the month in which the current view date occurs.

To prevent this you simply need to initiate the picker with the updateViewDate option set to false.

$('#datepicker').datepicker({
  todayHighlight: true,
  updateViewDate: false,
  //datesDisabled: ['03/06/2017', '03/21/2017','04/14/2017']
}).on('changeMonth', function(e){
  var month = e.date.getMonth();
  var disabled = getDisabledDates(month);
  $('#datepicker').datepicker('setDatesDisabled', disabled);
});

这篇关于Boostrap datepicker,每月动态禁用日期的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆