javascript - Jquery datepicker enable dates from array? - Stack Overflow

admin管理员组

文章数量:1309930

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

Share Improve this question Follow edited Oct 3, 2017 at 9:17 Liam 29.8k2828 gold badges138138 silver badges202202 bronze badges asked Nov 11, 2015 at 2:24 TonyTony 4911 gold badge22 silver badges55 bronze badges 3

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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 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
        })

本文标签： javascriptJquery datepicker enable dates from arrayStack Overflow