CODEWITHSUNDEEP
jqueryjquery-uidatepickerbootstrap-datepickerbootstrap-datetimepicker
nkumar
nkumar

Reputation: 89

How to disable particular dates in datepicker's calender

I need to disable multiple dates in single month of JQuery- Bootstrap Datepicker . As i tried with multiple answers here over SO and else also. But my problem didn't resolved. As I'm having list of dates i need to disable over datepicker. But, datepicker isn't responding with date disability.

I used to work over JQuery and boostrap to view Datepicker. Used CDN to load script.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

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

After executing this script i'm receiving an error related to .formDate()
Uncaught TypeError: Cannot read property 'formatDate' of undefined

formDate function

But After adding: <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js" ></script>
after JQuery CDN, this error was resolved but Disabling date is still not working.

Expected: Disable : 09/14/2019,09/15/2019,09/16/2019 from datepicker.

Upvotes: 0

Views: 15904

Answers (3)

nkumar
nkumar

Reputation: 89

After working & Searching alot for this question i'll get my answer. Using JQuery CDN:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

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.
Thanks for all your suggestions & response.

Upvotes: 0

Nijin P J
Nijin P J

Reputation: 1322

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">

Upvotes: 0

Nijin P J
Nijin P J

Reputation: 1322

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" />

Upvotes: 5

Related Questions