jQuery UI Datepicker - 複数の日付選択

Question

jQuery UI Datepickerウィジェットを使用して複数の日付を選択する方法はありますか？

すべてのご協力ありがとうございます。 jqueryのUIのdatepickerを使用することができない場合は、同様のことがありますか？

Answer 1

同じことをする必要があったので、onSelectとbeforeShowDayイベントを使用して、これを可能にするJavaScriptを書きました。それは選択された日付の独自の配列を維持するので、残念ながら、現在の日付などを示すテキストボックスとは統合されません。私はそれをインラインコントロールとして使用しており、現在選択されている日付の配列を照会できます。
私はthis codeを基本として使用しました。

<script type="text/javascript"> 
// Maintain array of dates 
var dates = new Array(); 

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

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

// Adds a date if we don't have it yet, else remove it 
function addOrRemoveDate(date) { 
    var index = jQuery.inArray(date, dates); 
    if (index >= 0) 
     removeDate(index); 
    else 
     addDate(date); 
} 

// Takes a 1-digit number and inserts a zero before it 
function padNumber(number) { 
    var ret = new String(number); 
    if (ret.length == 1) 
     ret = "0" + ret; 
    return ret; 
} 

jQuery(function() { 
    jQuery("#datepicker").datepicker({ 
     onSelect: function (dateText, inst) { 
      addOrRemoveDate(dateText); 
     }, 
     beforeShowDay: function (date) { 
      var year = date.getFullYear(); 
      // months and days are inserted into the array in the form, e.g "01/01/2009", but here the format is "1/1/2009" 
      var month = padNumber(date.getMonth() + 1); 
      var day = padNumber(date.getDate()); 
      // This depends on the datepicker's date format 
      var dateString = month + "/" + day + "/" + year; 

      var gotDate = jQuery.inArray(dateString, dates); 
      if (gotDate >= 0) { 
       // Enable date so it can be deselected. Set style to be highlighted 
       return [true, "ui-state-highlight"]; 
      } 
      // Dates not in the array are left enabled, but with no extra style 
      return [true, ""]; 
     } 
    }); 
}); 
</script> 

Answer 2

あなたはそれを少しmodifiyとき、それはあなたが設定されているDATEFORMATにかかわらず動作します。

http://keith-wood.name/datepick.html

私は、これが最良のjqueryの日かもしれ信じている：私は今、間隔の範囲をサポートする優れた日付ピッカーを見つけようとしてかなりの時間を費やし、そして最終的にこれを発見した

$("#datepicker").datepicker({ 
         dateFormat: "@", // Unix timestamp 
         onSelect: function(dateText, inst){ 
          addOrRemoveDate(dateText); 
         }, 
         beforeShowDay: function(date){ 
          var gotDate = $.inArray($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), date), dates); 
          if (gotDate >= 0) { 
           return [false,"ui-state-highlight", "Event Name"]; 
          } 
          return [true, ""]; 
         } 
        });  

Answer 3

jQuery UI datepickerの基盤となっていると主張されています。本当に強力で、文書化されているので疑いの余地はありません。

Answer 4

@dubroxによって開発されたプラグインは、非常に軽量で、jQuery UIとほとんど同じです。私の要求は、選択された日付の数を制限する能力を持つことでした。

直感的には、この目的のためにmaxPicksプロパティが提供されているようですが、残念ながら機能しません。この修正プログラムを探しているあなたのそれらのために

、ここにある：

1. まずアップ、あなたはpatchjquery.ui.multidatespicker.jsする必要があります。私はpull request on githubを提出しました。ダブロックスがマスターとマージするか、自分自身の修正が出るまで、それを使うことができます。

2. 使い方は本当に簡単です。以下のコードは、指定された日付の数（maxPicks）がすでに選択されている場合、日付ピッカーが日付を選択しないようにします。以前に選択した日付の選択を解除すると、再度上限に達するまでもう一度選択することができます。 jQueryのUIカレンダーと

   $("#mydatefield").multiDatesPicker({maxPicks: 3});

Answer 5

、このプラグインは、あなたが複数の日付を選択することができます：

http://dubrox.github.io/Multiple-Dates-Picker-for-jQuery-UI/

Answer 6

はちょうどこのための要件を持っていました。ここで私が使用したコードです。通常通り入力に適用し、クラスtypeof__multidatepickerを使用しています。

オーナーのテキストボックスに一意の日付のリストを保持します。ここに入力することもできますが、これは検証されません。明らかに、サーバーは結果リストを確認する必要があります。

datepickerのリンクされたテキストボックスで動作させようとしましたが、失敗したので、datepickerの目に見えない入力が作成されます（display:noneで動作しない、つまり奇妙なスタイリング）。

メイン入力の上に配置されているため、datepickerが正しい場所に表示され、1pxの幅になるので、メインのテキストボックスに入力することができます。

固定プラットフォームのイントラネット用ですので、多くのクロスブラウザテストは行っていません。

ハンドラをbodyに含めることを忘れないでください。そうしないと、混乱して動作します。

$('.typeof__multidatepicker').each(
    function() 
    { 
     var _this = $(this);       

     var picker = $('<input tabindex="-1" style="position:absolute;opacity:0;width:1px" type="text"/>'); 

     picker.insertAfter(this) 
     .position({my:'left top', at:'left top', of:this}) 
     .datepicker({ 
      beforeShow: 
       function() 
       { 
        _this.data('mdp-popped', true); 
       }, 
      onClose: 
       function(dt, dpicker) 
       { 
        var date = $.datepicker.formatDate(picker.datepicker('option', 'dateFormat'), picker.datepicker('getDate')); 
        var hash = {}; 
        var curr = _this.val() ? _this.val().split(/\s*,\s*/) : []; 
        var a = []; 

        $.each(curr, 
         function() 
         { 
          if(this != '' && !/^\s+$/.test(this)) 
          { 
           a.push(this); 
           hash[this] = true; 
          } 
         } 
        ); 

        if(date && !hash[date]) 
        { 
         a.push(date); 

         _this.val(a.join(', ')); 
        }                 

        _this.data('mdp-popped', false); 
        _this.data('mdp-justclosed', true); 
       } 
     }); 

     _this.on('focus', 
      function(e) 
      {        
       if(!_this.data('mdp-popped') && !_this.data('mdp-justclosed')) 
        _this.next().datepicker('show'); 

       _this.data('mdp-justclosed', false); 
      } 
     ); 
    } 
); 

$('body').on('click', function(e) { $('.typeof__multidatepicker').data('mdp-justclosed', false); }); 

Answer 7

使用このplugin http://multidatespickr.sourceforge.net

• 選択日付範囲。
• 複数の日付を選択しないでください。
• 選択可能な日付の最大数を定義します。
• 範囲を定義して、 からYの日付を選択できるX日を定義します。これは上で使用できない日付

Answer 8

使用を定義します。

$('body').on('focus',".datumwaehlen", function(){ 
    $(this).datepicker({ 
     minDate: -20 
    }); 
});