날짜 범위 선택 및 jQuery Datepicker에서 강조 표시

Question

jQuery Datepicker에서 날짜 범위의 CSS를 강조 표시하거나 변경하려고합니다. 사용자가 시작 날짜와 종료 날짜를 클릭하고 해당 범위 사이의 모든 날짜를 강조 표시 할 수있게하려고합니다. 클릭하면 해당 범위의 날짜 배열을 만들 수 있었지만 어떤 이유로 CSS를 변경하기 위해 클래스를 추가 할 수 없습니다.

어떻게 그 날짜 배열을 가져 와서 배경/강조 표시를 변경하기 위해 모두 CSS 클래스를 추가 할 수 있습니까?

도움이 될 것입니다.

감사합니다.

Answer 1

좋아, 사용자가 배열에서 선택한 날짜를 이미 가지고 있다고 가정합니다. 'beforeShowDay'옵션을 사용하면 현재 보이는 달에 매일 반복하는 함수를 지정할 수 있습니다. 그러면 함수가 각 날짜를 배열과 비교하고 일치하는 곳에 CSS 클래스를 적용 할 수 있습니다. 그래서 지금처럼 날짜 선택기 초기화 예를 들어

...

jQuery(".cal").datepicker({ 
    beforeShowDay: checkDates 
}) 

및 기능 checkDates()이 같은 (dateArray이라고 배열 가정을 보일 것이다 ....

function checkDates(theDate){ 
    for(i=0;i<dateArray.length;i++){ 
     if(dateArray[i].valueOf()===thedate.valueOf()){ 
      return [false,"cssClass","title"]; 
     }else return [true,""] 
    } 
}) 

날짜가 dateArray에 포함되어 있으면 날짜에 'cssClass'클래스가 적용됩니다.

return 문에있는 true/false 비트는 날짜를 선택할 수 있는지, 'title'이라고 표시된 비트는 HTML 제목 속성 (툴팁)

Nb입니다. 이렇게하면 일짜를 가장 가까운 밀리 초 단위로 비교하여 요일과 일치하도록 수정할 수 있습니다.

Answer 2

날짜를 나타내는 datepicker 및 날짜를 ​​나타내는 datepicker를 사용하여이 작업을 성공적으로 마쳤으므로 하나의 datepicker에 맞게 수정했습니다. . 여기에 코드입니다 :

$(function() { 
       var today = new Date(); 
       var thisYear = (today).getFullYear(); 
       var fromDate = '1/1/2000' //this is the initial from date to set the datepicker range 
       var toDate = '1/7/2000' // this is the initial to date to set the datepicker range 

//... initialize datepicker.... 
     }, 
     beforeShowDay: function(date){ 
      //if the date is in range 
      if (date >= fromDate && date <= toDate) { 
       return [true, 'ui-individual-date', '']; //applies a css class to the range 
      } 
      else { 
       return [true, '', '']; 
       } 
     }, 
     onSelect: function (dateText, obj) { 

    //sets the new range to be loaded on refresh call, assumes last click is the toDate    
     fromDate = toDate; 
     toDate = new Date(dateText); 

     $(".classDp1").datepicker("refresh"); 
     $(".classDp2").datepicker("refresh"); 
     }, 

당신이 beforeShowDay 기능을 새로 고칠 때마다이 새로운 FROMDATE 및 TODATE 범위라고합니다. 함수 외부에 변수가 있고 그 변수를 수정하면 각 클릭에 CSS의 강조 표시를 적용 할 수 있습니다.