Question

我使用jQuery UI datepicker作为用户请求游览学校的表单。有一个日期范围，游览正在举行，并在该范围内，网站管理员可以禁用预订的特定日期。到目前为止没问题：

/* array of booked dates generated from CMS backend */
var disabledDates = [
    '2015-05-06',
    '2015-05-08' // examples
];

$('[name="date_of_visit"]').datepicker({
    minDate: '4/30/2015', // Range start
    maxDate: '10/1/2015', // Range end
    beforeShowDay: function(date) { // Disable custom dates
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [$.inArray(string, disabledDates) == -1];
    }
});

我从这篇帖子中获得了beforeShowDay代码：Jquery UI datepicker. Disable array of Dates

我知道我可以使用第二个参数向已禁用的元素添加一个类，但会将其添加到所有已禁用的日期，包括minDate和maxDate以外的日期：

beforeShowDay：一个以日期作为参数且必须的函数   返回一个数组：

0：true / false表示此日期是否可选择1：   要添加到日期的单元格中的CSS类名称，或者＃34;＆＃34;对于默认值   演示文稿
2：此日期的可选弹出工具提示

在日期选择器之前，每天都会调用该函数   显示。

然而，客户要求只有＆＃34;预订＆＃34;日期可视化指示日期不可用（与默认禁用状态不同）。不会有很多，也许是4或5.这对我来说很有意义。

是否有某种方法可以自定义我的设置中beforeShowDay功能禁用的日期，或其他解决方案以实现我之后的目标？的 jsFiddle demo

Answer 1

韦斯利，我看了你的要求并查看了你需要的要求，我认为因为它本身也有点独特，所以我研究了代码并制作了你想要的东西。我正在粘贴下面的代码并对其进行一些解释： -

以下是Jquery代码： -

var disabledDates = [
    '2015-05-06',
    '2015-05-08'
];

$('input').datepicker({
    minDate: '4/30/2015',
    maxDate: '10/1/2015',
    beforeShowDay: function(date){
         var str = jQuery.datepicker.formatDate('yy-mm-dd', date);
         var minDateArr = $(this).datepicker( "option", "minDate" ).split('/')

        var minDate = new Date(minDateArr[2],minDateArr[0]-1,minDateArr[1]); //Don't remove the -1 from minDateArr[0]-1 as the Javascript dates starts with 0.
        if ($.inArray(str, disabledDates) != -1){
            return  [false, 'special']
        }
        else if(date < minDate ){
             return [false, 'not-special']
        }
        else{
            return [true,"special"];
        }
    }
});

CSS中的一些操作： -

.special span {
    color: red !important; /* should only apply to may 6 and 8 */
}
.not-special span {
    color: green !important; 
}

最重要的是必须有输入标记： -

<input>

以下是Js Fiddle链接： - http://jsfiddle.net/ckk6hzzu/

希望这是您所要求的，并期望这将有助于其他可用于预订/预订网站的地方。

使用jQuery UI datepicker自定义范围内的特定禁用日期

1 个答案: