Question

我一直在使用JQuery UI Datepicker。我需要给一些日期上色。因此，我遵循了this，它在较旧的版本中效果很好。

但是我无法确定如何拥有多个日期组，并为每个组分配一个CSS类进行样式设置。

对于旧版本，这是代码：

<script type="text/javascript">
jQuery(document).ready(function() {

    // An array of dates
    var eventDates = {};
    eventDates[ new Date( '08-23-2018' )] = new Date( '08-23-2018' );
    eventDates[ new Date( '08-25-2018' )] = new Date( '08-25-2018' );

    // datepicker
    jQuery('#calendar').datepicker({
        beforeShowDay: function( date ) {

            var highlight = jQuery.datepicker.formatDate('mm-dd-yy', date);
            if( highlight ) {
                 return [true, "event", highlight];
            } else {
                 return [true, '', ''];
            }
         }
    });
});
</script>

这是新版本：

  <script>

  $(function() {

  //disabled date
  var array = ["08-22-2018","08-25-2018"];

$("#datepicker" ).datepicker({
  minDate: "+0d",
    onSelect: function(dateText, inst) {
        $("input[name='bookingdate']").val(dateText);
    },
    //disabled date
    beforeShowDay: function(date){
        var string = jQuery.datepicker.formatDate('mm-dd-yy', date);

        return [array.indexOf(string) == -1]
    }
    });
  });

  </script>

Answer 1

我不确定“旧版本”和“新版本”是什么意思。您是在谈论DatePicker的版本还是您的代码？

看看我能理解的代码，您想禁用对array中定义的两个日期的选择，并突出显示那些日期为禁用状态。

突出显示不起作用，因为您仅从beforeShowDay函数返回一个值，如下所示：

return [array.indexOf(string) == -1]

相反，您需要返回以下内容：

if(array.indexOf(string) == -1) {
    return [ false, 'cssClassForHighlighting', 'This date is disabled because XYZ reason']
} else {
    return [true, '', ''];
}

请参阅beforeShowDay http://api.jqueryui.com/datepicker/#option-beforeShowDay

的文档

注意：您在帖子中描述的问题与该帖子的标题不匹配。因此，更改标题以符合您在帖子中描述的要求。

jQuery UI日期选择器多个类用于多个日期组

1 个答案: