1

jQuery Datepicker で日付範囲の CSS を強調表示または変更しようとしています。ユーザーが開始日と終了日をクリックして、その範囲内のすべての日付も強調表示できるようにします。クリックするとその範囲の日付の配列を作成できましたが、何らかの理由でクラスを追加して CSS を変更することはできません。

その日付の配列を取得し、CSS クラスをそれらすべてに追加して、背景/ハイライトを変更するにはどうすればよいですか?

どんな助けでも大歓迎です！

ありがとう

4

2 に答える 2

0

ユーザーが配列で日付を選択したと仮定します。「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 ビットは、日付が選択可能かどうかを決定し、「タイトル」とマークされたビットは、html タイトル属性 (ツールヒント) です。

注意 これは日付を最も近いミリ秒と比較するため、日付に合わせて変更することをお勧めします

于 2012-08-11T23:34:34.277 に答える
0

開始日用の日付ピッカーと終了日用の日付ピッカーを使用してこれを成功させたので、1 つの日付ピッカー用に変更しました。コードは次のとおりです。

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

更新するたびに、新しい fromDate と toDate の範囲で beforeShowDay 関数が呼び出されます。関数の外に変数を持ち、それらを関数内で変更すると、クリックごとに css からの強調表示を適用できます。

于 2015-03-17T14:46:16.203 に答える