Bootstrap datepicker配置阻止特定日期(假期)

时间:2014-12-24 20:13:19

标签: twitter-bootstrap twitter-bootstrap-3 calendar bootstrap-datepicker

有没有人想出如何配置datepicker以不显示特定日期(例如7月4日)?看起来这可以使用beforeShowDay完成,但我并不积极。

4 个答案:

答案 0 :(得分:3)

http://jsfiddle.net/Lr3taznx/

//a array of dates that should be blocked
var forbidden=['12/25/2014','12/24/2014']

$('#datepicker').datepicker({
    beforeShowDay:function(Date){
        //
        var curr_day = Date.getDate();
        var curr_month = Date.getMonth()+1;
        var curr_year = Date.getFullYear();        
        var curr_date=curr_month+'/'+curr_day+'/'+curr_year;        

        if (forbidden.indexOf(curr_date)>-1) return false;        
    }
})

http://jsfiddle.net/zsqvjvkd/1/

var forbidden=['2014-12-25','2014-12-24']

$('#datepicker').datepicker({
    beforeShowDay:function(Date){
        var curr_date = Date.toJSON().substring(0,10);

        if (forbidden.indexOf(curr_date)>-1) return false;        
    }
})

答案 1 :(得分:2)

使用版本1.3.1+,您只需使用datesDisabled选项:http://bootstrap-datepicker.readthedocs.org/en/latest/options.html#datesdisabled

答案 2 :(得分:0)

使用以下代码禁用Twitter Bootstrap DatePicker中的日期: 你必须使用那个时刻,包括moment.js:

var disabledDates = ['2018-01-07', '2018-01-27']

beforeShowDay: function (Date) {        
   $('#datepicker').datepicker({
        var date = moment(Date).format('YYYY-MM-DD');
        if (disabledDates.indexOf(curr_date) > -1) return false;
   });
},

答案 3 :(得分:0)

主网址:https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#enddate

使用上述日期选择器版本的

,如代码中所示,使用data-date-dates-disabled,可以传递用逗号分隔的日期值。并确保日期格式应与您在data-date-format属性中定义的格式相同,如下所示。

                <input 
                       asp-for="From" 
                       name="From" 
                       id="fromDatePickerId" 
                       value="@Model.From" 
                       class="DateClass form-control"
                       data-date-format="dd/mm/yyyy" 
                       data-date-start-date="@Model.From" 
                       data-date-end-date="@Model.To" 
                       data-provide="datepicker" 
           data-date-dates-disabled = "23/11/2019,24/11/2019" />