javascript - 网页的日期选择器仅允许单击特定日期

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 对象的实例，而不是指定格式的该日期的文本版本。例如，您可以以一种格式生成允许的日期列表，同时以不同的格式在日期选择器中显示日期(例如，在生成页面时不必转换数据库中的日期)。

另请参阅Can the jQuery UI Datepicker be made to disable Saturdays and Sundays (and holidays)?