Search code examples
javascriptjquerydatetimepickereonasdan-datetimepicker

Add an array into Bootstrap DateTimePicker options


I'm attempting to disable certain dates in the Bootstrap Date Time Picker by eonasdan found here.

I'm able to manually add an array of dates that then become disabled but I can't figure out how to add an array created dynamically into this option.

Here is my code:

noDates = ['31/03/2017', '19/04/2017', '20/04/2017', '25/04/2017'];

// Just for testing
console.log(noDates);

// Studio 1 datepicker
$('#datetimepicker1').datetimepicker({
    // Date format
    format: "DD/MM/YYYY",
    // Show calendar when user clicks input field
    allowInputToggle: true,
    // Minimum date is today's date
    minDate: new Date(),
    // Disabled Dates
    disabledDates: noDates
}); 

Where it says disabledDates: noDates I am able to manually write out the dates like so:

disabledDates: [
    "03/31/2017",
    "04/19/2017",
    moment("04/20/2017"),
    moment("04/25/2017")
]

I have also attempted the following:

$('#datetimepicker1').data('DateTimePicker').disabledDates(noDates);

However, that gives me the error:

Uncaught TypeError: Cannot read property 'disabledDates' of undefined

Is there a way to add variables/arrays into objects like this?


Solution

  • The problem is with your dates, more specific the format:

    Wrong:

    var noDates = ['31/03/2017', '19/04/2017', '20/04/2017', '25/04/2017'];
    

    OK:

    var noDates = ['2017-03-31', '2017-04-19', '2017-04-20', '2017-04-25'];