网页的Datepicker,只允许点击特定日期

Question

是否有Javascript或某些库可以为网页创建一个日期选择器(类似于Jquery UI DatePicker,它只允许某些日期可点击和突出显示.

例如,在服务器端,我可以指定一组天数来启用选择.

Answer 1

Datepicker beforeShowDay()事件就是为了这个目的.这是一个示例,其中允许日期的集合相对较小以用于说明目的.根据您拥有的日期和选择方式,您可以改为编写一种以编程方式选择日期的方法(例如忽略周末,每月的第1和第15日等).或者你可以结合两种技术,比如删除周末和固定的假期列表.

$(function() {
    // this could be a static hash, generated by the server, or loaded via ajax
    // if via ajax, make sure to put the remaining code in a callback instead.
    var dates_allowed = {
          '2009-12-01': 1,
          '2009-12-25': 1,
          '2010-09-28': 1,
          '2011-10-13': 1
    };

    $('#datepicker').datepicker({
        // these aren't necessary, but if you happen to know them, why not
        minDate: new Date(2009, 12-1, 1),
        maxDate: new Date(2010, 9-1, 28),

        // called for every date before it is displayed
        beforeShowDay: function(date) {

            // prepend values lower than 10 with 0
            function addZero(no) {
                if (no < 10){
                  return "0" + no;
                }  else {
                  return no; 
                }
            }

            var date_str = [
                addZero(date.getFullYear()),
                addZero(date.getMonth() + 1),
                addZero(date.getDate())      
            ].join('-');

            if (dates_allowed[date_str]) {
                return [true, 'good_date', 'This date is selectable'];
            } else {
                return [false, 'bad_date', 'This date is NOT selectable'];
            }
        }
    });
});

返回值是

[0]: boolean selectable or not,
[1]: CSS class names to apply if any (make sure to return '' if none),
[2]: Tooltip text (optional)

请注意,回调中给出的日期变量是表示给定日期的Date对象的实例,而不是指定格式的该日期的文本版本.因此,例如,您可以生成一种格式的允许日期列表,同时以不同的格式显示日期选择器中的日期(例如,这样您就不必在生成页面时从数据库转换日期).

另请参见jQuery UI Datepicker是否可以禁用星期六和星期日(和假期)？