Jquery datepicker enable dates from array?

Question

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

http://stackoverflow.com/questions/15400775/jquery-ui-datepicker-disable-array-of-dates duplicate — Xogle, Nov 11 '15 at 02:50
Hi, I dont want disable the values in the array. I will explain it above better.. — Tony, Nov 11 '15 at 02:58
Possible duplicate of [Jquery UI datepicker. Disable array of Dates](https://stackoverflow.com/questions/15400775/jquery-ui-datepicker-disable-array-of-dates) — Liam, Oct 03 '17 at 09:18

Taleeb · Answer 1 · 2015-11-12T05:40:01.650

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 comment

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.

Many thanks for your help :-) Is there a way to highlight it with color within the datepicker? — Tony, Nov 11 '15 at 13:28

score 0 · Answer 2 · answered Aug 08 '20 at 07:05

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

Jquery datepicker enable dates from array?

2 Answers2