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)?

Answer 2

阐述Rob Van Dam的答案，这是一个使用AJAX获取启用日期的代码示例（使用jQuery UI datepicker）。我使用AJAX查询从数据库返回启用日期的PHP页面（因为我只想显示我有实际数据的日期）。

这个想法是每次用户更改月份时执行AJAX查询，然后将本月的启用日期存储在稍后由beforeShowDay使用的全局数组（allowedDates）中。

当然，您可以在beforeShowDay中执行AJAX查询，但由于AJAX查询数量很多（每月超过30个），这将非常有用。

var allowedDates = new Object();

function queryAllowedDates (year, month, id) {
  $.ajax({
    type: 'GET',
    url: 'calendar_days.php',
    dataType: 'json',
    success: function(response) { 
      allowedDates[id] = response.allowedDates;
    },
    data: {year:year,month:month},
    async: false
  });
}

$("#datepicker1").datepicker({
  dateFormat: 'dd.mm.yy', 
  changeMonth: true, 
  changeYear: true ,
  beforeShow: function (input) {
    var currentDate = $(input).datepicker('getDate');
    var id = $(input).attr('id');
    queryAllowedDates(currentDate.getFullYear(), currentDate.getMonth()+1,id);
  },
  onChangeMonthYear: function (year, month, inst) {
    queryAllowedDates(year, month, inst.input.attr('id'));
  },
  beforeShowDay: function (day) {
    var id = $(this).attr('id');

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

    if (allowedDates[id] != undefined && allowedDates[id][date_str]) {
      return [true, 'good_date', 'This date is selectable'];
    } else {
      return [false, 'bad_date', 'This date is NOT selectable'];
    } 
  }
});

在此示例中，PHP页面返回包含以下内容的JSON数组：

{"allowedDates":{"2008-12-04":1,"2008-12-11":1}}

Answer 3

您可以从使用jquery ui datepicker开始。从ui.datepicker.js下载最新的开发包并开始工作。请参阅_generateHTML。寻找不可选择的变量。如果您的服务器端代码可以生成一些脚本 - 它可以填充一些新设置，您可以将日期选择器扩展为接受。然后在此行中的有效日期列表中添加一个检查，其中设置了unselectable。请注意，日期选择器似乎允许键盘在有效范围之外输入日期。

如果您已经在使用jquery ui，我可能会在您加载jquery UI脚本后覆盖_generateHTML原型。

Answer 4

尝试dijit.Calendar您可以在标记或JavaScript中为函数设置isDisabledDate属性。见第二个例子。禁用日期的方法在渲染时每天调用。该函数可以执行某些操作，例如确定是否遵循模式（是周末吗？），还是查看您从服务器提供的某些静态表（Array），如忙碌的日子或假日。可以重写getClassForDate方法以返回CSS类。

Answer 5

也许您可以扩展DatePicker以允许禁用/启用日期...我相信您可以删除禁用日期的点击处理程序，使其无法点击。然后只需调整CSS以获取禁用日期，它们就可以“灰显”。

Answer 6

我使用YUI日历和一堆自定义代码创建了一个类似的应用程序（禁止使用各种日期的基于Web的日期选择器）。话虽这么说，我在发现jQuery的奇妙乐趣之前就做到了这一点（以及“上帝，这不是jQuery的一半，但至少它使用了jQuery UI的jQuery方法”）。如果我再次这样做，我肯定会使用jQuery UI（尽管有许多失败）作为我的基础;混合库比处理jQuery UI的不成熟更麻烦。

Answer 7

我多年来一直在使用The Coolest Javascript Calendar，它可以禁用日历的某些日子。看看它，我在各种ASP.NET项目中使用它。

有关停用日期的更多信息，请访问here。

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

7 个答案: