jQuery UI Datepicker - 多個日期選擇

Question

是否有一種方法可以使用jQuery UI Datepicker小部件來選擇多個日期？

所有幫助表示讚賞！ 如果它不能使用jQuery UI日期選擇器，那麼是否有類似的東西呢？

Answer 1

我需要做同樣的事情，所以寫了一些JavaScript來啓用它，使用onSelect和beforeShowDay事件。它維護自己的選定日期數組，因此不幸的是沒有與顯示當前日期的文本框集成在一起。我只是將它用作內聯控件，然後我可以查詢當前選定日期的數組。
我用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

當你稍微修改它時，它會工作，不管你設置了哪個dateFormat。

$("#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

我現在已經花了相當長的一段時間，試圖找到一個很好的日期選擇器支持區間範圍，而這最終找到了一個：

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

我認爲這可能是最好的jQuery日期選擇器來選擇一個範圍或多個日期，並且聲稱它是jQuery UI datepicker的基礎，我沒有理由懷疑它，因爲它看起來非常強大，並且還有很好的文檔記錄！

Answer 4

@dubrox開發的插件非常輕便，幾乎與jQuery UI完全相同。我的要求是有能力限制所選日期的數量。

直觀地看，maxPicks屬性似乎是爲此目的而提供的，但它不起作用。

對於那些尋找此修復程序，那就是：

1. 首先，你需要patchjquery.ui.multidatespicker.js。我已提交pull request on github。您可以使用它，直到dubrox將其與主人合併或提出他自己的修復。

2. 用法非常簡單。下面的代碼會導致日期選擇器在指定的日期數（maxPicks）已被選中後不會選擇任何日期。如果您取消選擇任何先前選擇的日期，它將讓您再次選擇，直到您再次達到限制。

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

Answer 5

使用jQuery UI日曆，這個插件可以讓你選擇多個日期：

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

Answer 6

剛把這個要求;這裏是我使用的代碼。照常將其應用於輸入，我正在使用類typeof__multidatepicker。

它維護所有者文本框中的唯一日期列表。你也可以在那裏鍵入，這是沒有驗證 - 顯然服務器需要檢查結果列表！

我試圖讓它與datepicker的鏈接文本框一起工作，但失敗了，所以它爲datepicker創建了一個不可見的輸入（它似乎不適用於display:none，因此也是奇怪的樣式）。

它位於主輸入上方，所以日期選擇器出現在正確的位置，寬度爲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

• 選擇日期範圍。
• 挑選多個日期不安全。
• 定義可選日期的最大數量。
• 定義一個範圍X天，它可以從其中選擇Y日期的地方 。定義不可用日期

Answer 8

使用本上：

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