jQuery Datepicker - 添加 class 到所选范围的第一个和最后一个日期

Question

我正在使用 jQuery 日期选择器 http://keith-wood.name/datepick.html

这是日期选择器调用的 html 输入：

<input type="text" class="date-picker-input" placeholder="dd/mm/yyyy - dd/mm/yyyy ">

这是我的 jquery 日期选择器初始化代码：

 $('.date-picker-input').datepick({ 
        rangeSelect: true, 
        dateFormat: 'dd/mm/yyyy',
        changeMonth: false,
        prevText: '<',
        nextText: '>',
        showOtherMonths: true,
        dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        showTrigger: '#calImg',
     });
  });

我正在使用范围选项，我想将 class 添加到所选范围 的第一个和最后一个日期，以便对它们进行样式化。范围内的日期已经有 .datepick-selected class，但它们在 < td > 元素内，所以我必须通过 jquery 指向它们。这是我尝试生成 class:

$('.datepick-month .datepick-selected:first, .datepick-month .datepick-selected:last').addClass('selected');

但是什么也没发生。

目前的情况

我希望它看起来如何

Answer 1

您尝试使用 :first 和 :last，而您可能应该使用 :first-of-type 和 :last-of-type。尝试：

$('.date-picker-input .datepick-selected:first-of-type, .date-picker-input .datepick-selected:last-of-type').addClass('selected');

Answer 2

已更新

唯一的方法（对我来说）是添加一个间谍来检查class（datepick-popup）是否存在于DOM中（模拟打开事件插件中不存在):

    var lapse = setInterval( checkIfpickerIsOpened, 300); //you could adjust the time
    
    function checkIfpickerIsOpened(){
       if($(".datepick-popup").length > 0){
         $(".datepick-popup .datepick-selected:first, .datepick-popup .datepick-selected:last").addClass("selected");
         clearInterval(lapse);
       }
    }
   
   $('.date-picker-input').datepick({ 
        rangeSelect: true, 
        dateFormat: 'dd/mm/yyyy',
        changeMonth: false,
        prevText: '<',
        nextText: '>',
        showOtherMonths: true,
        dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        onClose: Close,
        showTrigger: '#calImg'
  });

   function Close(){
     lapse = setInterval( checkIfpickerIsOpened, 100);      
  }

要查看结果，您可以添加 css:

.selected {
  background-color:red !important;// *important* is needed to override default color
}

我发现了一个隐藏的 even onShow 所以当我们有一些超时等待 datepicker 的不同项目出现时它的功能。

   $('.date-picker-input').datepick({ 
        rangeSelect: true, 
        dateFormat: 'dd/mm/yyyy',
        changeMonth: false,
        prevText: '<',
        nextText: '>',
        showOtherMonths: true,
        dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        onShow: function(){setTimeout(Open, 200);},
        showTrigger: '#calImg'
  });

 function Open(){
  if($(".datepick-popup").length > 0){
     $(".datepick-popup .datepick-selected:first, .datepick-popup .datepick-selected:last").addClass("selected");
  }    
}

所以你有 2 个解决方案！！

jQuery Datepicker - 添加 class 到所选范围的第一个和最后一个日期

jQuery Datepicker - add class to the first and the last date of a selected range

jquery

datepicker

date-range