jQuery Datepickerは、複数の日付を選択し、選択時にCSSでマークします。

Question

これは、jQueryの日付ピッカーが複数の日付を選択して強調表示するように開発と読書をしています。

このため、選択した日付を単純なテキストフィールドで視覚化された配列に書き込むことができました。

私が管理できなかったことは、datepickerで選択した日付の外観を永久に変更することです。

"beforeShowDay："オプションを実装しました。これは、datepickerを正しくロードしていますが、日付の選択には直接呼び出されません。 これは私が推測したところでは、 "onSelect"というビューをリフレッシュする必要がありますが、リフレッシュが正しく機能していません。 今、私は、日付配列を扱うためのいくつかの小さなメソッドを持っています。

更新日時を追加または削除すると、datepickerを更新しようとしています。

私は日付を選択して、それを日付配列に追加するか、日付配列から削除します。 また、onSelect、私は選択された日と一致していますし、addClass（）しようとします。

しかし、もう一度、私は、私の日付ピッカーには表示されていないので、何かを丸く逃したと思う。ここで

は、今の私のコードです：

var dates = new Array(); 

function addDate(date) { 
    if (jQuery.inArray(date, dates) < 0 && date) { 
     dates.push(date); 
    } 
} 

function removeDate(index) { 
    dates.splice(index, 1); 
} 

// Adds a date if we don't have it yet, else remove it and update the dates 
// textfield 
function addOrRemoveDate(date) { 
    var index = jQuery.inArray(date, dates); 
    if (index >= 0) { 
     removeDate(index); 
     updateDatesField(dates); 
    } else { 
     addDate(date); 
     updateDatesField(dates); 
    } 
    jQuery(calContainer).datepicker("refresh"); 
} 


    var calContainer = document.getElementById("calendar-container"); 

    jQuery(calContainer).datepicker({ 
     minDate : new Date(), 
     dateFormat : "@", 
     onSelect : function(dateText, inst) { 
      addOrRemoveDate(dateText); 

      jQuery(".ui-datepicker-calendar tbody tr td a").each(function() { 
       if (jQuery(this).text() == inst.selectedDay) { 
        jQuery(this).addClass("ui-state-highlight"); 
        jQuery(this).parent().addClass("selected"); 
       } 
      }); 
      // addTimeSelectorColumns(dates); 
     }, 
     beforeShowDay : function(_date) { 
      var gotDate = -1; 
      for (var index = 0; index < dates.length; index++) { 
       if (_date.getTime() == dates[index]) { 
        gotDate = 1; 
       } else { 
        gotDate = -1; 
       } 
      } 

      if (gotDate >= 0) { 
       return [ true, "ui-datepicker-today", "Event Name" ]; 
      } 
      return [ true, "" ]; 
     } 
    }); 
function updateDatesField(dates) { 

    if (dates.length > 0) { 
     var tmpDatesStrArr = new Array(); 
     var dateString = ""; 
     var datesField = document.getElementById("dates"); 

     for (var index = 0; index < dates.length; index++) { 
      var dateNum = dates[index]; 

      var tmpDate = new Date(); 
      tmpDate.setTime(dateNum); 

      dateString = tmpDate.getDate() + "." + tmpDate.getMonth() + "." 
        + tmpDate.getFullYear(); 
      tmpDatesStrArr.push(dateString); 
     } 

     jQuery(datesField).val(tmpDatesStrArr); 
    } 
} 

（私はまだJavascriptを/ jQueryのでは初心者ですので、私はコード化に向けた任意のヘルプやヒントが、ところで...歓迎されている）それが依存

Answer 1

あなたがjQueryのUIに固執するかどうかは関係ありません。他のライブラリを開いている場合、複数選択をサポートするjQuery Datepickerがあります：jquery.datePicker with multiple select enabled。複数の選択をネイティブにサポートしていないので、jQuery UIの操作で時間を節約することができます。

EDIT：

あなたの主なライブラリがないjQueryのであれば、私はあなたの代わりにスタンドアロンまたはプロトタイプ依存ライブラリを探すべきだと思います。 JS Calendarは有望そうです。これは、Ctrlキーを検出することによって複数の選択をネイティブにサポートします。