CODEWITHSUNDEEP
javascriptjquerydatedatepicker
Iconoclast
Iconoclast

Reputation: 191

Disable form field based on datepicker selection

I have a form with a datepicker where people can book tours. There is an additional Yes/No drop-down on the form that I want to have automatically disabled if they choose a date in December. My datepicker also has disabled dates. The datepicker seems to be working, but I cannot seem to get the selected month from the datepicker returned anywhere (I've tried printing it to screen, using it in an alert, etc.) Obviously there's something wrong with my code but I'm not a JS/jQuery expert so I can't figure it out on my own!

jQuery(document).ready(function($) {

// INITIALIZE DATEPICKER
jQuery(function() {
        jQuery("#myDatepicker").datepicker({
            beforeShowDay: unavailableDates,
            changeMonth: true,
            minDate: 1
    });

});

// DISABLE DATES WITHIN DATEPICKER & GET MONTH  
function unavailableDates(date) {
        dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
                    if (jQuery.inArray(dmy, theUnavailableDates) == -1) {
            return [true, ""];
        } else {
            return [false, "", "Unavailable"];
        }

        var selectedMonth = date.getMonth();
        if (selectedMonth == 11) {
            jQuery("#tourExtras").hide();
            alert("this means its working");
        }
        else {
            jQuery("tourExtras").show();
            alert("this means its not working");
        }
}   

// DISABLED DATES 
var theUnavailableDates = ["1-1-2014", "2-1-2014", "3-1-2014"];

Right now I can't even get the alerts to work, so I'm assuming it's something to do with how I'm doing var selectedMonth = date.getMonth(); etc.

Any help would be really appreciated!

Upvotes: 0

Views: 667

Answers (1)

fabriciorissetto
fabriciorissetto

Reputation: 10063

Your function "unavailableDates(date)" seems to be right, but i think the property "beforeShowDay" of datepicker it's not what you want.

According to jQueryUI's Datepicker API:

enter image description here

So, i think the function that you want is: onSelect

enter image description here

Your code should be like this:

$( "#datepicker" ).datepicker({
    onSelect: function(dateText, inst) { 
        unavailableDates(dateText);
    },
    changeMonth: true,
    minDate: 1
});

// DISABLE DATES WITHIN DATEPICKER & GET MONTH  
function unavailableDates(dateText) {
    var date = new Date(dateText); //convert text to date

        dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
        if (jQuery.inArray(dmy, theUnavailableDates) == -1) {
            alert("this date is NOT on theUnavailableDates array");
            //do something
        } else {
            alert("this date is on theUnavailableDates array!")
            //do something
        }

    var selectedMonth = date.getMonth() + 1; //the month is based on jan=0,feb=1,...
    if (selectedMonth == 11) {
        jQuery("#tourExtras").hide();
        alert("this is november");        
    }
    else {
        jQuery("tourExtras").show();
        alert("this is not november");
    }
}   

// DISABLED DATES 
var theUnavailableDates = ["1-1-2014", "2-1-2014", "3-1-2014"];

You can check it on this jsfiddle.

Upvotes: 1

Related Questions