仅允许单击特定日期的网页的日期选取器

datepicker beforeShowDay()事件正是为此目的而设计的。下面是一个例子,为了便于说明,允许的日期集相对较小。根据您有多少个日期以及如何选择这些日期,您可以编写一个以编程方式选择日期的方法(例如忽略周末、每月的第一个和第十五个日期等)。或者你可以结合这两种技巧,比如删除周末和固定的假期列表。

$(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)

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

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

详细阐述了RobvanDam的答案,这里是一个代码示例(使用jquery ui-datepicker),用于使用Ajax获取启用的日期。我使用Ajax查询一个从数据库返回启用日期的PHP页面(因为我只想显示有实际数据的日期)。

其思想是在用户每次更改月份时执行Ajax查询,然后将本月的启用日期存储在一个全局数组(allowedates)中,该数组稍后由beforeshowday使用。

当然,您可以在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}}

您可以使用jquery ui日期选择器开始。从ui.datepicker.js下载最新的开发包并开始工作。请参见“生成HTML”。查找不可选择的变量。如果您的服务器端代码可以生成一些脚本-它可以填充一些新的设置,您可以扩展日期选择器来接受。然后在该行中设置了不可选择的有效日期列表中添加一个检查。请注意,日期选取器允许键盘输入超出有效范围的日期。

如果您已经在使用jquery ui,那么在加载jquery ui脚本之后,我可能只会重写GenerateHTML原型。

尝试 dijit.Calendar 有一个isDisabledDate属性可以在标记或JavaScript中设置为函数。请参见第二个示例。每天呈现时都会调用禁用日期的方法。函数可以做一些类似于确定是否遵循模式的操作(这是周末吗?)或者在服务器提供的静态表(数组)上查找它,比如繁忙的日子或假日。这个 getClassForDate 方法可以重写以返回CSS类。

也许您可以扩展日期选择器以允许禁用/启用日期…我相信您可以删除禁用日期的点击处理程序,使其不可点击。然后只需调整禁用日期的CSS,它们就可以“变灰”。

我用YUI日历和一堆自定义代码制作了一个类似的应用程序(一个禁止各种日期的基于网络的日期选择器)。也就是说,在我发现jquery的奇妙乐趣之前,我就这样做了(上帝啊,这并不是jquery的一半,但至少它使用了jquery用户界面的jquery方法)。如果我再这样做,我肯定会使用jquery ui(尽管它有很多缺点)作为基础;混合库比处理jquery ui的不成熟更麻烦。

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

可以找到有关禁用日期的详细信息 here .