jQuery Datepicker - 将类添加到选定范围的第一个和最后一个日期

Question

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

这里是 datepicker 调用的 html 输入：

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

这是我用于 datepicker 初始化的 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',
     });
  });

我正在使用范围选项，我想将类添加到所选范围的第一个和最后一个日期，以便对它们进行风格化。范围内的日期已经有 .datepick-selected 类，但它们在

元素内，所以我必须通过 jquery 指向它们。这是我为了生成类而尝试的：

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

但什么也没发生。

目前的样子

我希望它看起来如何

【问题讨论】：

• 能否显示更多的 html 代码，因为 datepicker 有很多选项
• .datepick-selected 仅在显示 datepicker 时存在，当插件关闭时，您在 DOM 中看不到它，只有在插件打开时才存在
• 如果你只想保持选中daye，你可以玩onClose
• 我已经用截图更新了我的问题。如您所见，选定的“从到”日期有额外的类“datepick-selected”（见我的第一个屏幕截图）。我想仅在第一个和最后一个元素中添加名为“selected”的附加类，其中包含“datepick-selected”类（第二个屏幕截图）。
• 什么时候执行添加类的命令？我再说一遍，你能显示你的 html 代码，看看你是如何实现 datepicker 的吗？以及如何关闭日期选择器？当您选择第二个日期时，它会自动关闭？

Answer 1

更新

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

    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
}

我发现了一个隐藏的偶数onShow，所以当我们有一些超时来等待日期选择器的不同项目出现时它可以正常工作。

   $('.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 个解决方案！！

Answer 2

您正在尝试使用: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');