I am trying to enable just some specified dates in datepicker. In my case the values inside the variable "onlyThisDates". Should I use enabledDates option to solve this or ..? I do not want disable the values in the array. The other way around. I want disable everything and just enable the values in the array.

If someone could help it would be great.

<input id="openDatepick></input>

var onlyThisDates = ['09/11/2015', '10/11/2015', '11/11/2015'];    

var nowDate = new Date();
var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);

$('#openDatepick').datepicker({
    format: 'dd/mm/yyyy',
    startDate: today

}).on('changeDate', function (e) {
    //$('this').datepicker('hide');
});
$("#remove").on("click", function () {
    $('.datepicker-days').hide();
});

I am trying to enable just some specified dates in datepicker. In my case the values inside the variable "onlyThisDates". Should I use enabledDates option to solve this or ..? I do not want disable the values in the array. The other way around. I want disable everything and just enable the values in the array.

If someone could help it would be great.

<input id="openDatepick></input>

var onlyThisDates = ['09/11/2015', '10/11/2015', '11/11/2015'];    

var nowDate = new Date();
var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);

$('#openDatepick').datepicker({
    format: 'dd/mm/yyyy',
    startDate: today

}).on('changeDate', function (e) {
    //$('this').datepicker('hide');
});
$("#remove").on("click", function () {
    $('.datepicker-days').hide();
});

• javascript
• jquery
• datepicker

• stackoverflow./questions/15400775/… duplicate – Xogle Commented Nov 11, 2015 at 2:50
• Hi, I dont want disable the values in the array. I will explain it above better.. – Tony Commented Nov 11, 2015 at 2:58
• Possible duplicate of Jquery UI datepicker. Disable array of Dates – Liam Commented Oct 3, 2017 at 9:18

2 Answers 2

In beforeShowDay function: for any date you return false - that will be disabled and for any date any thing other than false is returned that day will be enabled.

Based on this your beforeShowDay should be something like the following:-

beforeShowDay: function (date) {
        var dt_ddmmyyyy = date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear();
        return (onlyThisDates.indexOf(dt_ddmmyyyy) != -1);
    }

Note that I've added 1 to getMonth() as month in javascript starts from 0.

See jsFiddle here.

EDIT: Based on ment

In the beforeShowDay function we can define css, tooltips etc. For example instead of returning true we can return a css-class.

beforeShowDay: function (date) {
        var dt_ddmmyyyy = date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear();
        if (onlyThisDates.indexOf(dt_ddmmyyyy) != -1) {
            return {
                tooltip: 'This date is enabled',
                classes: 'active'
            };
        } else {
            return false;
        }
    }

See this jsFiddle.

Also see this link for different functionalities available with bootstrap datepicker.

Following code will disable days of week using datepicker, property 'daysOfWeekDisabled' needs array of week day id

$(".dateControl").datepicker({
            daysOfWeekDisabled: [1,2,3],
            startDate: new Date(),
            autoclose: true
        })