Michael Joseph
Michael Joseph

Reputation: 135

How To Disable Specific Days and Dates Using BeforeShowDay In jQueryUiDatepicker?

I already have functioning code in jQueryUiDatepicker that disables Fridays and Saturdays and all previous days (plus 2 days). My issue is trying to add 2 specific dates to this existing Datepicker code that will also disable these dates.

This is my existing code on starting line 92 in jQueryUiDatepicker:

beforeShowDay: function(date) {
var show = true;
if(date.getDay()==5||date.getDay()==6) show=false
return [show];
},
    beforeShow: function(){
    var dateTime = new Date();
    var hour = dateTime.getHours();
    //If Hour is greater or equals to 8AM
    if(hour  >= 08){
        //Disable all past days including tomorrow and today
        $(this).datepicker( "option", "minDate", "+2" );
    }
},

I am trying to disable 18th and 19th October 2017 and failing, this is the code I have added directly underneath the above code:

beforeShowDay: var array = ['18/10/2017', '19/10/2017']

$('input').datepicker({
beforeShowDay: function(date){
    var string = jQuery.datepicker.formatDate('dd/mm/yy', date);
    return [ array.indexOf(string) == -1 ]
    },

My question is how can I disable all previous dates, all Fridays and Saturdays and these 2 dates in the October?

Note# This coding has to be done in jquery.ui.datepicker, not a script in html

Upvotes: 0

Views: 2940

Answers (1)

Amal
Amal

Reputation: 3426

Hope this helps

use inArray instead of indexOf and you can also disable all previous dates using minDate

var array = ["18/10/2017", "19/10/2017"];
$(function() {
    $('input').datepicker({
        minDate: new Date(),
        beforeShowDay: function (date) {
        $thisDate = date.getDate() + "/" + (date.getMonth() + 1) + "/" + date.getFullYear();
    var day = date.getDay();
    if ($.inArray($thisDate, array) == -1&&day!=5&&day!=6) {
        return [true, ""];
    } else {
        return [false, "", "Unavailable"];
    }
}
    });
});

DEMO

Upvotes: 1

Related Questions