Trình chọn ngày giao diện người dùng jquery. Vô hiệu hóa mảng Ngày

Tôi đã cố gắng tìm kiếm giải pháp cho vấn đề người chọn ngày trong Jquery ui của mình và tôi không gặp may. Đây là những gì tôi đang cố gắng làm ...

Tôi có một ứng dụng mà tôi đang thực hiện một số PHP phức tạp để trả về một mảng JSON ngày tháng mà tôi muốn CHẶN ra khỏi Trình chọn ngày giao diện người dùng Jquery. Tôi đang trả lại mảng này:

["2013-03-14","2013-03-15","2013-03-16"]

Không có một cách đơn giản nào để nói một cách đơn giản: chặn những ngày này khỏi trình chọn ngày?

Tôi đã đọc tài liệu về giao diện người dùng và tôi không thấy điều gì giúp ích được cho mình. Còn ai có ý tưởng nào không?

Bạn có thể sử dụng beforeShowDay để thực hiện việc này

Ví dụ sau vô hiệu hóa các ngày từ 14 tháng 3 năm 2013 đến ngày 16 tháng 3 năm 2013

var array = ["2013-03-14","2013-03-15","2013-03-16"]

$('input').datepicker({
    beforeShowDay: function(date){
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [ array.indexOf(string) == -1 ]
    }
});

Demo: Fiddle

IE 8 không có hàm indexOf, vì vậy tôi đã sử dụng jQuery inArray để thay thế.

$('input').datepicker({
    beforeShowDay: function(date){
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [$.inArray(string, array) == -1];
    }
});

Nếu bạn cũng muốn chặn các ngày Chủ nhật (hoặc các ngày khác) cũng như mảng ngày tháng, tôi sử dụng mã này:

jQuery(function($){

    var disabledDays = [
       "27-4-2016", "25-12-2016", "26-12-2016",
       "4-4-2017", "5-4-2017", "6-4-2017", "6-4-2016", "7-4-2017", "8-4-2017", "9-4-2017"
    ];

   //replace these with the id's of your datepickers
   $("#id-of-first-datepicker,#id-of-second-datepicker").datepicker({
      beforeShowDay: function(date){
         var day = date.getDay();
         var string = jQuery.datepicker.formatDate('d-m-yy', date);
         var isDisabled = ($.inArray(string, disabledDays) != -1);

         //day != 0 disables all Sundays
         return [day != 0 && !isDisabled];
      }
   });
});   

$('input').datepicker({
   beforeShowDay: function(date){
       var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
       return [ array.indexOf(string) == -1 ]
   }
});

beforeShowDate không phù hợp với tôi, vì vậy tôi đã tiếp tục và phát triển giải pháp của riêng mình:

$('#embeded_calendar').datepicker({
               minDate: date,
                localToday:datePlusOne,
               changeDate: true,
               changeMonth: true,
               changeYear: true,
               yearRange: "-120:+1",
               onSelect: function(selectedDateFormatted){

                     var selectedDate = $("#embeded_calendar").datepicker('getDate');

                    deactivateDates(selectedDate);
                   }

           });


              var excludedDates = [ "10-20-2017","10-21-2016", "11-21-2016"];

              deactivateDates(new Date());

            function deactivateDates(selectedDate){
                setTimeout(function(){ 
                      var thisMonthExcludedDates = thisMonthDates(selectedDate);
                      thisMonthExcludedDates = getDaysfromDate(thisMonthExcludedDates);
                       var excludedTDs = page.find('td[data-handler="selectDay"]').filter(function(){
                           return $.inArray( $(this).text(), thisMonthExcludedDates) >= 0
                       });

                       excludedTDs.unbind('click').addClass('ui-datepicker-unselectable');
                   }, 10);
            }

            function thisMonthDates(date){
              return $.grep( excludedDates, function( n){
                var dateParts = n.split("-");
                return dateParts[0] == date.getMonth() + 1  && dateParts[2] == date.getYear() + 1900;
            });
            }

            function getDaysfromDate(datesArray){
                  return  $.map( datesArray, function( n){
                    return n.split("-")[1]; 
                });
             }

Đối với DD-MM-YY, hãy sử dụng mã này:

var array = ["03-03-2017 ', '03 -10-2017', '03 -25-2017"]

$('#datepicker').datepicker({
    beforeShowDay: function(date){
    var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
    return [ array.indexOf(string) == -1 ]
    }
});

function highlightDays(date) {
    for (var i = 0; i < dates.length; i++) {
    if (new Date(dates[i]).toString() == date.toString()) {
        return [true, 'highlight'];
    }
}
return [true, ''];
}

Nếu bạn muốn tắt (các) ngày cụ thể trong trình chọn ngày jquery thì đây là bản demo đơn giản dành cho bạn.

<script type="text/javascript">
    var arrDisabledDates = {};
    arrDisabledDates[new Date("08/28/2017")] = new Date("08/28/2017");
    arrDisabledDates[new Date("12/23/2017")] = new Date("12/23/2017");
    $(".datepicker").datepicker({
        dateFormat: "dd/mm/yy",
        beforeShowDay: function (date) {
            var day = date.getDay(),
                    bDisable = arrDisabledDates[date];
            if (bDisable)
                return [false, "", ""]
        }
    });
</script>