jQuery Datepicker-将类添加到选定范围的第一个和最后一个日期 [英] jQuery Datepicker - add class to the first and the last date of a selected range

问题描述

我正在使用jQuery日期选择器

我希望它看起来如何

解决方案

更新

(对我而言)唯一的方法是添加一个间谍，以检查DOM中是否存在某些类( datepick-popup )(模拟插件中不存在的open事件)):

  var lapse = setInterval(checkIfpickerIsOpened，300);//您可以调整时间函数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:否，prevText:'<'，nextText:'>'，showOtherMonths:正确，dayNamesShort:['Sun'，'Mon'，'Tue'，'Wed'，'Thu'，'Fri'，'Sat']，onClose:关闭，showTrigger:#calImg"});函数Close(){lapse = setInterval(checkIfpickerIsOpened，100);} 

要查看结果，可以添加一个CSS:

  .selected {background-color:red！important;//* important *是覆盖默认颜色所必需的} 

我发现了一个隐藏的 onShow ，因此当我们有一段时间等待日期选择器的不同项目时，它的功能就会出现.

  $('.date-picker-input').datepick({rangeSelect:true，dateFormat:"dd/mm/yyyy"，changeMonth:否，prevText:'<'，nextText:'>'，showOtherMonths:正确，dayNamesShort:['Sun'，'Mon'，'Tue'，'Wed'，'Thu'，'Fri'，'Sat']，onShow:function(){setTimeout(Open，200);}，showTrigger:#calImg"});函数Open(){if($(.datepick-popup").length> 0){$(.datepick-popup .datepick-selected:first，.datepick-popup .datepick-selected:last").addClass("selected");}} 

所以您有2种解决方案！

I'm using jQuery Date picker http://keith-wood.name/datepick.html

Here is html input for datepicker call:

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

This is my jquery code for datepicker initialization:

 $('.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',
     });
  });

I'm using range option, and i want to add class to the first and last date of selected range in order to stylize them. The dates inside a range have already had .datepick-selected class, but they are inside < td > elements so i must point them via jquery. This is what i tried in order to generate class:

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

But nothing happened.

How it currently looks

How I want it to look

解决方案

UPDATED

the only way to do that (for me) is to add a spy which checks if some class (datepick-popup) is present in DOM (simulate the open event which doesnt exist in the plugin):

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

to see the result, you could add a css:

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

i have found an hidden even onShow so its functional when we had some timeout to wait the different items of datepicker appear.

   $('.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");
  }    
} 

so you have 2 solutions!!

这篇关于jQuery Datepicker-将类添加到选定范围的第一个和最后一个日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！