Конфигурация Bootstrap datepicker для блокировки определенных дат (праздников)

Кто-нибудь понял, как настроить средство выбора даты, чтобы оно не отображало определенные даты (например, 4 июля)? Казалось бы, это можно сделать с помощью beforeShowDay, но я не уверен.


twitter-bootstrap calendar twitter-bootstrap-3 bootstrap-datepicker
person Scott C Wilson    schedule 24.12.2014    source источник

Ответы (4)


arrow_upward
3
arrow_downward

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;        
    }
})
person dm4web    schedule 25.12.2014
comment
Непосредственно перед функцией beforeShowDay я также добавил daysOfWeekDisabled: "0",, чтобы также заблокировать воскресенье. - person Scott C Wilson; 28.12.2014
comment
В версии 1.3.1+ вы можете просто использовать параметр datesDisabled: bootstrap-datepicker .readthedocs.org/en/latest/ - person Davi Lima; 26.05.2015

arrow_upward
2
arrow_downward

В версии 1.3.1+ вы можете просто использовать параметр datesDisabled: http://bootstrap-datepicker.readthedocs.org/en/latest/options.html#datesdisabled

person Davi Lima    schedule 25.05.2015
comment
Также см.: stackoverflow.com/questions/10234153 / - person Davi Lima; 04.09.2015
comment
Быстрый вопрос и как: можем ли мы изменить цвет фона только на какой-то только для предупреждения пользователя при выборе дат? - person Anupal; 25.01.2016

arrow_upward
0
arrow_downward

Используйте приведенный ниже код, чтобы отключить даты из 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;
   });
},
person Shujat Munawar    schedule 23.01.2018

arrow_upward
0
arrow_downward

Основной URL-адрес: 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" />
person A SHAHZAD    schedule 22.11.2019