请给jQuery datepicker自定义规则提供帮助

时间:2011-04-16 15:20:16

标签: jquery arrays jquery-ui date jquery-ui-datepicker

目前我有一个日期选择器:

如果在中午12:00之后排除今天。

不包括星期日。

<script type="text/javascript">
 $(function() {


            // get today's date
            var myDate = new Date();
            // add one day if after 12:00
            if (myDate.getHours() > 12) {
                        myDate.setDate(myDate.getDate()+1);
            } else {
                myDate.setDate(myDate.getDate()+0);

            };

           $("#delivery-date-textbox").datepicker({
            dateFormat: 'dd-mm-yy',
            minDate: myDate,
            beforeShowDay: function(date){ return [date.getDay() != 0,""]}

            });
            });
</script>

如何让它排除一系列公众假期?

3 个答案:

答案 0 :(得分:7)

它可能对你有所帮助...... Click here

/* create an array of days which need to be disabled */
var disabledDays = ["2-21-2010","2-24-2010","2-27-2010","2-28-2010","3-3-2010","3-17-2010","4-2-2010","4-3-2010","4-4-2010","4-5-2010"];

/* utility functions */
function nationalDays(date) {
  var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
  //console.log('Checking (raw): ' + m + '-' + d + '-' + y);
  for (i = 0; i < disabledDays.length; i++) {
    if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1 || new Date() > date) {
      //console.log('bad:  ' + (m+1) + '-' + d + '-' + y + ' / ' + disabledDays[i]);
      return [false];
    }
  }
  //console.log('good:  ' + (m+1) + '-' + d + '-' + y);
  return [true];
}
function noWeekendsOrHolidays(date) {
  var noWeekend = jQuery.datepicker.noWeekends(date);
  return noWeekend[0] ? nationalDays(date) : noWeekend;
}
/* create datepicker */
jQuery(document).ready(function() {
  jQuery('#date').datepicker({
    minDate: new Date(2010, 0, 1),
    maxDate: new Date(2010, 5, 31),
    dateFormat: 'DD, MM, d, yy',
    constrainInput: true,
    beforeShowDay: noWeekendsOrHolidays
  });
});

(David Walsh博客)

答案 1 :(得分:2)

我很快写了一个片段,我认为这是一个很好的大纲。我的主要观点是,有两种类型的国家假日:每年都在同一天(如圣诞节)和每年不同日子(如复活节)。我不会在这里给你计算移动假期的逻辑,但是我的代码片段可以使用一个可以有两种假期的数组:month/day(用于静态)和month/day/year(用于更改)。您可以按照自己的方式生成此数组。

测试将针对此数组运行,将数组的值转换为Date对象,并使用jQuery的inArray()来查找匹配项。

基本代码:

//an array of holidays, defined here, ajaxed or anything
var holidays=['12/24', '1/1', '5/10/2011', '5/25'];

//a function that decides whether a date is a holiday
function isHoliday(date, holidays) {
    var parts, dateArray=[];
    //build Dates from the array
    for (var i=0; i<holidays.length; i++) {
        parts=holidays[i].split('/');
        if (parts.length==2) {
            dateArray.push(new Date(date.getFullYear(), parts[0]-1, parts[1]).getTime());
        } else if (parts.length==3) {
            dateArray.push(new Date(holidays[i]).getTime());
        } else {
            return false;
        }
    }
    return $.inArray(date.getTime(), dateArray)!=-1;
}

$('#fos').datepicker({
    dateFormat: 'dd-mm-yy',
    beforeShowDay: function(date){
        //handling sundays
        if (date.getDay() == 0) {
            return [false];
        }
        //handling holidays
        if (isHoliday(date, holidays)) {
            return [false];
        }
        return [true];
    }
});

jsFiddle Demo。在Chrome和FF4上成功测试。

答案 2 :(得分:1)

正如您所见,jQuery UI的datePicker可以使用辅助函数来判断是否可以选择给定日期。辅助函数接收单个日期。然后,只要返回具有单个bool值的数组,就可以将您选择的任何逻辑应用于该日期。

这是我过去做过的变体......不是特别性感但是有效!

//returns a single-item array of true or false. False disables the given date (un-pick-able!)
isWorkingDay = function isWorkingDay(date) {
    var day = date.getDay(),
        d = date.getDate(),
        m = date.getMonth() + 1,
        yyyy = date.getFullYear(),
        dateStr = m + "/" + d + "/" + yyyy,
        weekendDays = [0, 6],
        holidays = ["5/3/2011", "5/24/2011", "5/26/2011"];

    //filter out holidays
    for (var i = 0; i < holidays.length; i = i + 1) {
        if (dateStr === holidays[i]) {
            return [false];
        }
    }

    //filter out weekends (e.g. Saturday & Sunday)
    for (var i = 0; i < weekendDays.length; i = i + 1) {
        if (day === weekendDays[i]) {
            return [false];
        }
    }
    return [true];
};


$(document).ready(function () {
    //initialize datepicker
    $("input.calendar").datepicker({
        beforeShowDay: isWorkingDay
    });
});

我还整理了一个有效的演示 - 请在此处查看:http://jsfiddle.net/2uCxh/

一些注意事项:
+您需要根据自己的喜好配置“假期”数组(我的假数据) +我没有包括你的时间截止逻辑 - 它很容易添加 +这是非常以美国为中心的