twitter-bootstrap Bootstrap datepicker 配置以阻止特定日期(假期)

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/27641781/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 22:03:27  来源:igfitidea点击:

Bootstrap datepicker configuration to block specific dates (holidays)

twitter-bootstraptwitter-bootstrap-3calendarbootstrap-datepicker

提问by Scott C Wilson

Has anyone figured out how to configure datepicker to not display specific dates (such as, say, July 4th)? It would seem that this could be done using the beforeShowDay but I'm not positive.

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

采纳答案by dm4web

http://jsfiddle.net/Lr3taznx/

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;        
    }
})

OR:

或者:

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

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;        
    }
})

回答by Davi Lima

With version 1.3.1+ you can simply use datesDisabledoption: http://bootstrap-datepicker.readthedocs.org/en/latest/options.html#datesdisabled

使用 1.3.1+ 版本,您可以简单地使用datesDisabled选项:http: //bootstrap-datepicker.readthedocs.org/en/latest/options.html#datesdisabled

回答by Solution Spirit

Use this below code to disable the dates from Twitter Bootstrap DatePicker: You have to use moment for that just include moment.js:

使用以下代码禁用 Twitter Bootstrap DatePicker 中的日期:您必须使用 moment 来仅包含 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;
   });
},

回答by A SHAHZAD

Main Url: https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#enddate

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

with the above date picker version, use data-date-dates-disabled as shown in the code, you can pass comma separated date values. and make sure that format of date should be same what you define in data-date-format property as shown below.

使用上述日期选择器版本,如代码所示使用 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" />