可以允许仅点击特定日期的网页的日期戳 [英] Datepicker for web page that can allow only specific dates to be clicked

问题描述

是否有一个JavaScript或一些库可以为网页创建一个日期戳（类似于 Jquery UI DatePicker

例如，在服务器端，我可以指定一个天数数组，以使其能够被选择。 >

解决方案

Datepicker beforeShowDay（）事件仅用于这个目的，下面是一个例子，其中允许的日期集合相对较小，用于根据你所选择的日期和选择方式，你可以编写一个以编程方式选择日期的方法（比如忽略周末，每个月的第1到15个等等），或者你可以结合这两种技术，比如说删除周末和固定的假期列表。

  $（function（）{
 //这可能是一个静态哈希，由服务器生成，或通过加载ajax 
 //如果通过ajax，请确保将剩余的代码放在回调中。 
 var dates_allowed = {
'2009-12-01'：1，
'2009-12-25'：1，
'2010-09-28'：1， 
'2011-10-13'：1 
}; 
 
 $（'＃datepicker'）。datepicker（{
 //这些没有必要，但是如果你碰巧认识他们，为什么不
 minDate：new Date 2009，12-1，1），
 maxDate：new Date（2010,9-1,28），
 
 //在显示之前调用每个日期
 beforeShowDay ：function（date）{
 
 //前缀值低于10，0 
函数addZero（否）{
 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']; 
} 
} 
}）; 
}）; 
  

返回值为

 [1]：应用CSS类的名称（如果有的话，请确保返回''，如果没有）
 [2]：工具提示文本（可选）
  

请注意，回调中给出的date变量是Date对象的一个​​实例代表给定的日期，而不是指定格式的该日期的文本版本。因此，例如，您可以以不同的格式在datepicker中显示日期（例如，在生成页面时不需要从DB转换日期），以一种格式生成允许的日期列表。

另请参见可以将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.

解决方案

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'];
            }
        }
    });
});

The return values are

[0]: boolean selectable or not,
[1]: CSS class names to apply if any (make sure to return '' if none),
[2]: Tooltip text (optional)

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

See also Can the jQuery UI Datepicker be made to disable Saturdays and Sundays (and holidays)?

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