How to disable particular dates in jQuery UI's datepicker calendar? [closed]

Question

I need to disable multiple dates for a single month in a jQuery Datepicker. Here is my code:

<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> </head> <body> <div class="input-group date"> <div class="input-group-addon"> <i class="fa fa-calendar"></i></div> <input value="" readonly="" class="form-control" name="doi" id="doi" type="text"> </div> <script type='text/javascript'> var array = ["09/14/2019","09/15/2019","09/16/2019"]; $('#doi').datepicker({ beforeShowDay: function(date){ var string = jQuery.datepicker.formatDate('mm/dd/yy', date); return [ array.indexOf(string) == -1 ] }, daysOfWeekDisabled: [0], //Disable sunday autoclose:true, }) ; </script> </body>

But disabling the dates is not working.

Expected: I want to disable these dates: 09/14/2019,09/15/2019,09/16/2019 in the datepicker.

Based on your code, this works fine.

TylerH
– TylerH

2025-03-21 20:17:44 +00:00
Commented Mar 21 at 20:17 — TylerH
– TylerH, Commented Mar 21 at 20:17

Nijin P J · Accepted Answer · 2019-09-10 05:43:45Z

5

you need to add jquery-ui.min.js and jquery-ui.css

var array = ["2019-09-14","2019-09-15","2019-09-16"] $('#doi').datepicker({ beforeShowDay: function(date){ var string = jQuery.datepicker.formatDate('yy-mm-dd', date); return [ array.indexOf(string) == -1 ] } });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/vader/jquery-ui.css" rel="stylesheet"/> <input id="doi" />

answered Sep 10, 2019 at 5:43

Nijin P J

1,3121 gold badge11 silver badges15 bronze badges

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

5 Comments

nkumar Over a year ago

@Ninjin Koderi Thanks for your response. But this also not working. As i'm using bootstrap-datepicker.min.js for styling and other features also. After Including all your cdn and scripting stuff my datepicker becomes constant (neither putting any error nor disabling date).

Nijin P J Over a year ago

Then why did you put above as jquery datepicker??

nkumar Over a year ago

because i'm using : <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Nijin P J Over a year ago

That is for jQuery right? not for the datepicker.

TylerH Mar 21 at 20:15

A .css file is not required for programmatic logic to work. OP already includes jQuery UI in their scripts, so your prose is completely incorrect here. In fact, this code doesn't seem to change anything except the format of the date in the datepicker logic.

Nijin P J · Accepted Answer · 2019-09-10 07:22:19Z

Try below solution for Bootstrap Datepicker. dont be confuse with both. from jQuery.datepicker.formatDate('mm/dd/yy', date) its clear that you are trying to use Jquery Datepicker.

var datesForDisable = ["2019-09-14","2019-09-15","2019-09-16"] $("#datepicker").datepicker({ format: 'dd/mm/yyyy', autoclose: true, weekStart: 1, calendarWeeks: true, todayHighlight: true, beforeShowDay: function (currentDate) { var dayNr = currentDate.getDay(); var dateNr = moment(currentDate.getDate()).format("DD-MM-YYYY"); if (datesForDisable.length > 0) { for (var i = 0; i < datesForDisable.length; i++) { if (moment(currentDate).unix()==moment(datesForDisable[i],'YYYY-MM-DD').unix()){ return false; } } } return true; } })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js"></script> <input id="datepicker">

TylerH · Accepted Answer · 2025-03-19 20:03:55Z

Here was my solution:

var datearray = ["09/14/2019","09/15/2019","09/16/2019"]; $('#doi').datepicker({ format: 'mm/dd/yyyy', datesDisabled: datearray, daysOfWeekDisabled: [0], //Disable sunday autoclose:true, todayHighlight: true, });

Here, datesDisabled: plays vital role for me.

Collectives™ on Stack Overflow

How to disable particular dates in jQuery UI's datepicker calendar? [closed]

3 Answers 3

5 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Related