根据日期选择器选择禁用表单字段

时间:2013-11-28 17:53:57

标签: javascript jquery date datepicker

我有一个带有日期选择器的表单,人们可以在这里预订旅游。如果表单在12月选择日期,我希望自动禁用该表单上的其他是/否下拉菜单。我的datepicker也有禁用日期。日期选择器似乎正在工作,但我似乎无法从任何地方返回的datepicker中获取所选月份(我已尝试将其打印到屏幕,在警报中使用它等)显然我的代码有问题但是我我不是JS / jQuery专家,所以我无法自己解决这个问题!

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

现在我甚至无法使警报工作,所以我认为这与我正在做的事情var selectedMonth = date.getMonth();等有关。

任何帮助都会非常感激!

1 个答案:

答案 0 :(得分:1)

您的函数“unavailableDates(date)”似乎是正确的,但我认为datepicker的属性“beforeShowDay”并不是您想要的。

根据jQueryUI's Datepicker API

enter image description here

所以,我认为你想要的功能是:onSelect

enter image description here

您的代码应该是这样的:

$( "#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"];

您可以在此jsfiddle上查看。