Датапикер JQuery UI. Отключить массив дат


84

Я пытался найти решение моей проблемы с jquery ui datepicker, и мне не повезло. Вот что я пытаюсь сделать ...

У меня есть приложение, в котором я выполняю сложный PHP для возврата массива дат JSON, который я хочу ЗАБЛОКИРОВАТЬ из Jquery UI Datepicker. Я возвращаю этот массив:

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

Разве нет простого способа просто сказать: заблокировать эти даты из набора даты?

Я прочитал документацию по пользовательскому интерфейсу и не вижу ничего, что могло бы мне помочь. У кого-нибудь есть идеи?






Может ли кто-нибудь указать мне на аналогичные вопросы, но с помощью DatePicker Materialise?
naz786

Ответы:


209

Вы можете использовать beforeShowDay для этого

В следующем примере отключаются даты с 14 марта 2013 г. по 16 марта 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 ]
    }
});

Демо: Fiddle


1
Я ДОЛЖЕН увидеть, к чему вы клоните. Как бы мне включить свой массив дат.
Daniel White

14
ВАУ. Ты чертов гений, братан. Я не знаю, почему этого еще нет в сообщениях о переполнении стека для этого вопроса, поскольку его задавали миллион раз. Все приведенные выше примеры слишком сложны, это красиво и просто. 5 звезд. Благодарю.
Daniel White

Я загрузил код jqueryui.com/download/ ... но когда я интегрирую в него приведенный выше код, он не работает, пожалуйста, помогите
Сэм

Одного голоса недостаточно. Некоторые люди делают вещи намного сложнее, чем нужно. Большое спасибо за простой рабочий фрагмент. Очень полезно.
0112,

4
Если вы также хотите исключить выходные, помимо этих пользовательских дат, замените строку возврата следующим:return array.indexOf(string) != -1 ? [false] : $.datepicker.noWeekends(date);
Pablo SG Pacheco

20

IE 8 не имеет функции indexOf, поэтому вместо этого я использовал jQuery inArray.

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

6
@ChristopherStrydom, вы удивитесь, сколько людей до сих пор его используют.
euther

3
Это связано с тем, что IE8 - это новейший браузер IE, который будет работать на WinXP (SP3).
JosephK

Однако он поддерживает функцию indexOf () в строке для поиска позиции подстроки в этой строке.
Wezy

9

Если вы также хотите заблокировать воскресенье (или другие дни), а также массив дат, я использую этот код:

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];
      }
   });
});   

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

1

beforeShowDate у меня не сработал, поэтому я пошел дальше и разработал собственное решение:

$('#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]; 
                });
             }

Можем ли мы сделать то же самое на dateRangePicker ??
Сунил Рават

1

Для ДД-ММ-ГГ используйте этот код:

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, ''];
}

Возможно ли для daterangepicker, я хочу отключить массив дат в date-range-picker?
Сунил Рават

Не могли бы вы сформулировать свой вопрос?
Диериг Патрик

У меня есть выбор диапазона дат, предположим: 01.01.2017 - 31.03.2017. Я хочу выделить некоторые даты массивом настраиваемых дат между этим диапазоном. в календаре диапазона дат. $ date = ['02 /01/2017','03/01/2017'... still] эти даты. это возможно?
Сунил Рават

как и в datepicker, мы можем использовать для этой цели функцию: beforeShowDay, что есть в date-range-picker: daterangepicker.com
Сунил Рават

1

Если вы хотите отключить конкретную дату (даты) в jquery datepicker, то вот простая демонстрация для вас.

<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>
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.