网页的日期选择器，只允许点击特定日期

Posted 2023-05-07

【中文标题】网页的日期选择器，只允许点击特定日期

【英文标题】：Datepicker for web page that can allow only specific dates to be clicked

【发布时间】：2010-12-25 19:32:20

【问题描述】：

是否有 javascript 或某些库可以为网页创建日期选择器（类似于 Jquery UI DatePicker，它只允许单击和突出显示某些日期。

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

【问题讨论】：

您使用的是什么服务器端技术？你只标记了客户端？根据服务器（asp.net 等）的不同，您可以使用许多控件来实现此功能。

它不值得一个完整的答案，但我能够在 jQuery 源代码中四处寻找并编辑出一个好的日期选择器。

【参考方案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)?

【讨论】：

很好，没有意识到有现有的功能。 +1

我把它放到了 jsfiddle.net/peter/yYTCm/3 的 jsfiddle 中，启用的日期是不可选的，请你看看，让我知道要进行哪些更改

date.getMonth() + 1 & date.getDate() 没有得到零填充数字，可能是原因

函数已更新以涵盖前导“零”的问题。

【参考方案2】：

详细说明 Rob Van Dam 的答案，这里是一个代码示例（使用 jQuery UI 日期选择器），用于使用 AJAX 获取启用的日期。我使用 AJAX 查询从数据库返回启用日期的 php 页面（因为我只想显示我有实际数据的日期）。

这个想法是在每次用户更改月份时执行 AJAX 查询，然后将本月的启用日期存储在一个全局数组 (allowedDates) 中，该数组稍后由 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

【讨论】：

这个样本对我来说似乎非常有用，尤其是当您有大量日期（例如，几十年）时。

【参考方案3】：

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

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

【讨论】：

建议破解内部结构并不是一个好主意，尤其是提供现有功能。

【参考方案4】：

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

【参考方案5】：

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

【参考方案6】：

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

【参考方案7】：

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

更多关于禁用日期的信息可以在here找到。