Thanh công cụ giao diện người dùng jQuery - Nhiều lựa chọn ngày

Question

Có cách nào để sử dụng tiện ích con jQuery UI Datepicker để chọn nhiều ngày không?

Tất cả trợ giúp đều được đánh giá cao! Nếu nó không có khả năng sử dụng bộ đếm ngày tháng của giao diện người dùng jquery thì có gì tương tự không?

Answer 1

Tôi cần làm điều tương tự, vì vậy đã viết một số JavaScript để bật tính năng này, sử dụng các sự kiện onSelect và beforeShowDay. Nó duy trì một dãy các ngày được chọn, do đó tiếc là không tích hợp với một hộp văn bản hiển thị ngày hiện tại, v.v .. Tôi chỉ sử dụng nó như một điều khiển nội tuyến, và sau đó tôi có thể truy vấn mảng cho các ngày được chọn hiện tại.
Tôi đã sử dụng this code làm cơ sở.

<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

Khi bạn sửa đổi nó một chút, nó hoạt động bất kể ngày nào bạn đã đặt.

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

bây giờ tôi đã dành khá nhiều thời gian cố gắng tìm một chọn ngày tốt có hỗ trợ dao động khoảng thời gian, và cuối cùng tìm thấy cái này:

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

Tôi tin rằng điều này có thể là ngày jquery tốt nhất bộ chọn để chọn một phạm vi hoặc nhiều ngày và được xác nhận là cơ sở cho trình chỉnh sửa ngày của jQuery UI và tôi không thấy lý do gì để nghi ngờ vì nó có vẻ thực sự mạnh mẽ và cũng được ghi lại tốt!

Answer 4

Plugin được phát triển bởi @dubrox rất nhẹ và hoạt động gần giống với giao diện người dùng jQuery. Yêu cầu của tôi là có khả năng hạn chế số ngày được chọn.

Bằng trực giác, thuộc tính maxPicks dường như đã được cung cấp cho mục đích này, nhưng nó không hoạt động không may.

Đối với những người bạn đang tìm kiếm sửa chữa này, ở đây nó là:

1. Đầu tiên, bạn cần phải patchjquery.ui.multidatespicker.js. Tôi đã gửi pull request on github. Bạn có thể sử dụng nó cho đến khi dubrox hợp nhất nó với chủ hoặc tự sửa lỗi.

2. Cách sử dụng thực sự đơn giản. Mã bên dưới làm cho bộ chọn ngày không chọn bất kỳ ngày nào sau khi số ngày được chỉ định (maxPicks) đã được chọn. Nếu bạn bỏ chọn bất kỳ ngày nào đã chọn trước đó, nó sẽ cho phép bạn chọn lại cho đến khi bạn đạt đến giới hạn một lần nữa.

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

Answer 5

Với jQuery UI lịch, plugin này cho phép bạn chọn nhiều ngày tháng:

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

Answer 6

Chỉ cần có một yêu cầu cho điều này; đây là mã tôi đã sử dụng. Áp dụng nó vào một đầu vào như bình thường, tôi đang sử dụng lớp typeof__multidatepicker.

Nó duy trì danh sách các ngày duy nhất trong hộp văn bản chủ sở hữu. Bạn cũng có thể gõ vào đó, điều này không được xác nhận - rõ ràng máy chủ cần kiểm tra danh sách kết quả!

Tôi đã cố gắng làm cho nó hoạt động với hộp văn bản được liên kết của trình đặt ngày nhưng không thành công, vì vậy nó tạo ra đầu vào vô hình cho datepicker (nó dường như không hoạt động với display:none, do đó tạo kiểu lạ).

Nó được định vị trên đầu vào chính để biểu tượng ngày xuất hiện ở đúng vị trí và rộng 1px để bạn vẫn có thể nhập vào hộp văn bản chính.

Dành cho mạng nội bộ có nền tảng cố định nên tôi chưa thực hiện nhiều thử nghiệm trên nhiều trình duyệt.

Hãy nhớ bao gồm trình xử lý trên body hoặc hoạt động gây nhầm lẫn.

$('.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

Sử dụng này plugin http://multidatespickr.sourceforge.net

• Chọn phạm vi ngày.
• Chọn nhiều ngày không bảo mật.
• Xác định số ngày có thể chọn tối đa.
• Xác định phạm vi X ngày từ nơi nó có thể chọn ngày Y. Xác định số ngày không có sẵn

Answer 8

sử dụng này trên:

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