在jQuery UI datepicker中禁用假日,星期日和过去的日期

时间:2013-05-29 09:53:52

标签: javascript php jquery jquery-ui jquery-ui-datepicker

我正在使用jQuery datepicker创建约会表单。我一直在搜索,但似乎我无法在之前的日子里结合我想要的所有功能。 我想从datepicker中得到的东西在今天之前的所有日期都被禁用(昨天和其余部分,因为你不能在今天之前预约它必须晚些时候),然后在每个星期日(非工作日)和公共假期禁用(这个使用数组)。我从别人那里看到的是jQuery专门针对一个函数,比如公共假期,它只是一个数组,但是前一天和周日是如何禁用的呢?

我试图关注这篇文章http://articles.tutorboy.com/2010/09/03/jquery-ui-datepicker-disable-specified-dates/,但我不知道如何将它结合起来。有人能告诉我怎么样?

我每周日都禁用此功能

 function disabledSunday(date) {
     var day = date.getDay();
     return [(day != 0), ''];
 }
 $('#datepicker').datepicker({
     dateFormat: 'mm-dd-yy',
     beforeShowDay: disabledSunday
 });

这个直到今天为止

 var date = new Date();
 var m = date.getMonth(),
     d = date.getDate(),
     y = date.getFullYear();
 // Disable all dates till today
 $('#datepicker').datepicker({
     minDate: new Date(y, m, d),
     dateFormat: 'mm-dd-yy',
 });

这是针对特定日期,例如公众假期

 // Disable a list of dates
 var disabledDays = ["5-31-2013", "6-01-2013"];

 function disableAllTheseDays(date) {
     var m = date.getMonth(),
         d = date.getDate(),
         y = date.getFullYear();
     for (i = 0; i < disabledDays.length; i++) {
         if ($.inArray((m + 1) + '-' + d + '-' + y, disabledDays) != -1) {
             return [false];
         }
     }
     return [true];
 }
 $('#datepicker').datepicker({
     dateFormat: 'mm-dd-yy',
     beforeShowDay: disableAllTheseDays
 });

如何将这三个功能合二为一,我对Jquery和javascript的了解不多

4 个答案:

答案 0 :(得分:3)

试试这个: -      HTML代码:      <input id="txtDate" />

function disabledays(date) {
    var ymd = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
        //if u have to disable a list of day
         var removeDays = ["2013-6-11","2013-6-31" ];
         if ($.inArray(ymd, removeDays) >= 0) {
        return [false];
    } else {
        //Show accept sundays
        var day = date.getDay();
        return [(day == 1 || day == 2 || day == 3 || day == 4 ||day == 5 ||day == 6 )];
    }
}

$(function () {
    $('#txtDate').datepicker({
        beforeShowDay: disabledays
    });
});

答案 1 :(得分:1)

您可以使用minDate选项禁用过去的日期。此外,您可以使用beforeShowDay选项检查其他两个条件**。

$("#datepicker").datepicker({
        minDate: 0,
        beforeShowDay: function (date) {
            // it is possible to write the following function using one line
            // of code; instead, multiple if/else are used for readability
            var ok = true;
            if (date.getDay() === 0) { // is sunday
                ok = false;
            } else {
                var dateStr = $.datepicker.formatDate("m-dd-yy", date);
                if ($.inArray(dateStr, disabledDays) >= 0) { // is holiday
                    ok = false;
                }
            }
            return [ok, ""];
        }
    });
});

**实际上可以检查该功能中的所有三个条件。

答案 2 :(得分:1)

试试这个 $("#datepicker").datepicker({ minDate: 0 });

答案 3 :(得分:0)

愿你在这里找到你的洗礼

http://jqueryui.com/datepicker/#min-max