用于仅允许单击特定日期的网页的Datepicker

是否有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是否可以禁用星期六和星期日（和假期）？

Answer 2

详细说明Rob Van Dam的答案，这是一个代码示例（使用jQuery UI datepicker），用于使用AJAX获取启用日期。 我使用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

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

有关禁用日期的更多信息，请访问此处 。