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

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

Taleeb · Accepted Answer · 2015-11-12 05:40:01Z

6

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.

edited Nov 12, 2015 at 5:40

answered Nov 11, 2015 at 4:51

Taleeb

1,91919 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tony Over a year ago

Many thanks for your help :-) Is there a way to highlight it with color within the datepicker?

Shahrukh Ahmad · Accepted Answer · 2020-08-08 07:05:48Z

0

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

answered Aug 8, 2020 at 7:05

Shahrukh Ahmad

1651 gold badge2 silver badges10 bronze badges

Collectives™ on Stack Overflow

Jquery datepicker enable dates from array?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related