网页的日期选择器，只允许点击特定日期 [英] Datepicker for web page that can allow only specific dates to be clicked

问题描述

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

Is there a Javascript or some library that would create a datepicker for a webpage (similar to Jquery UI DatePicker that would only allow certain dates to be clickable and highlighted.

例如在服务器端，我可以指定一组天数以供选择.

For example on server side, I could specify a array of days to enable to be selected.

推荐答案

Datepicker beforeShowDay() 事件正是为此目的而设计的.这是一个示例，其中允许的日期集相对较小以进行说明.根据您拥有的日期数量以及如何选择日期，您可以编写一种以编程方式选择日期的方法(例如忽略周末、每个月的 1 日和 15 日等).或者，您可以结合使用这两种技术，例如删除周末和固定的假期列表.

The Datepicker beforeShowDay() event is intended for exactly this purpose. Here's an example where the set of allowed dates is relatively small for purposes of illustration. Depending on how many dates you have and how they are chosen, you could instead write a method that programmatically selected dates (say by ignoring weekends, the 1st and 15th of every month, etc). Or you could combine both techniques, say remove weekends and a fixed list of holidays.

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

Note that the date variable given in the callback is an instance of a Date object representing the given day, not a text version of that date in the specified format. So for instance, you could generate the list of allowable dates in one format while displaying dates in the datepicker in a different format (e.g. so you wouldn't have to transform dates from a DB when generating the page).

另见 jQuery UI Datepicker 是否可以禁用周六和周日(和节假日)?

这篇关于网页的日期选择器，只允许点击特定日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！