Выделите даты в JQuery UI DatePicker - PullRequest
Новая
       11

Выделите даты в JQuery UI DatePicker

17 голосов
/ 28 июля 2011

Как я могу использовать beforeShowDay для выделения дней в JQuery UI datepicker. У меня есть следующий массив дат 

Array
(
    [0] => 2011-07-07
    [1] => 2011-07-08
    [2] => 2011-07-09
    [3] => 2011-07-10
    [4] => 2011-07-11
    [5] => 2011-07-12
    [6] => 2011-07-13
)

Ответы [ 6 ]

33 голосов
/ 28 июля 2011

Посмотрите документацию.

beforeShowDay Функция принимает в качестве параметра дату и должна возвращать массив с [0], равным true / false, указывающим, можно ли выбрать эту дату, [1]равно названию класса CSS или '' для презентации по умолчанию, и [2] необязательная всплывающая подсказка для этой даты.Он вызывается для каждого дня в указателе даты перед его отображением.

Это означает, что вам нужно создать функцию, которая будет принимать дату и возвращать массив параметров, значения которых:

  1. логический - указывает, можно ли выбрать дату
  2. строка - имя класса css, который будет применен к дате
  3. строка - необязательная всплывающая подсказка для этой даты

вот пример: 

var your_dates = [new Date(2011, 7, 7),new Date(2011, 7, 8)]; // just some dates.

$('#whatever').datepicker({
   beforeShowDay: function(date) {
      // check if date is in your array of dates
      if($.inArray(date, your_dates)) {
         // if it is return the following.
         return [true, 'css-class-to-highlight', 'tooltip text'];
      } else {
         // default
         return [true, '', ''];
      }
   }
});

и теперь вы можете добавить стиль для выделения даты 

<style>
   .css-class-to-highlight{
       background-color: #ff0;
   }
</style>
19 голосов
/ 28 июля 2011

Я решил проблему, используя 

var disabledDays = ["2011-7-21","2011-7-24","2011-7-27","2011-7-28"];
var date = new Date();
jQuery(document).ready(function() { 
    $( "#dateselector").datepicker({ 
        dateFormat: 'yy-mm-dd',
        beforeShowDay: function(date) {
            var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
            for (i = 0; i < disabledDays.length; i++) {
                if($.inArray(y + '-' + (m+1) + '-' + d,disabledDays) != -1) {
                    //return [false];
                    return [true, 'ui-state-active', ''];
                }
            }
            return [true];

        }
    });
});
2 голосов
/ 31 января 2016

Найден самый проголосовавший ответ не работает. Немного обновил код, чтобы он заработал. $ .inArray () в основном ищет indexOf (). Также мы не можем сравнивать две даты напрямую на равенство. Справка: Сравните две даты с JavaScript 

function inArrayDates(needle, haystack){
    var found = 0;
    for (var i=0, len=haystack.length;i<len;i++) {
        if (haystack[i].getTime() == needle.getTime()) return i;
            found++;
        }
    return -1;
}

и обновить принятую функцию как 

if(inArrayDates(date, markDates) != -1) {
            return [true, 'selected-highlight', 'tooltip here'];
          } else {
             return [true, '', ''];
          }
1 голос
/ 25 мая 2017

Даты в JS являются экземплярами объекта Date, поэтому вы не можете проверить, совпадают ли даты, используя == или ===.

Простое решение: 

var your_dates = [
   new Date(2017, 4, 25),
   new Date(2017, 4, 23)
];

$( "#some_selector" ).datepicker({
    beforeShowDay: function(date) {
        are_dates_equal = d => d.getTime() === date.getTime();
        if(your_dates.some(are_dates_equal)) {
            return [true, 'ui-state-active', ''];
        }
        return [true, '', ''];
    }
})
0 голосов
/ 13 марта 2019

Я получил простое решение, где только мы должны дать даты, которые будут отключены, и показать цвет для доступных дат. И это сработало для меня 

   <style>
    .availabledate a {
         background-color: #07ea69 !important;
         background-image :none !important;
         color: #ffffff !important;
     }
     </style>

И для сценария используйте это: 

<script>

    $(function() {
        //This array containes all the disabled array
          datesToBeDisabled = ["2019-03-25", "2019-03-28"];

            $("#datepicker").datepicker({
              changeMonth: true,
              changeYear: true,
              minDate : 0,
              todayHighlight: 1,
              beforeShowDay: function (date) {
                var dateStr = jQuery.datepicker.formatDate('yy-mm-dd', date);
                if(dateStr){
                  return [datesToBeDisabled.indexOf(dateStr) == -1,"availabledate"];
                }else{
                  return [datesToBeDisabled.indexOf(dateStr) == -1,""];
                }

              },

            });


    });

  </script>

Надеюсь, это может кому-то помочь.

0 голосов
/ 28 июля 2011

http://jqueryui.com/demos/datepicker/#event-beforeShowDay

Вы сравниваете параметр даты в beforeShowDay с датами, которые вы получили в своем массиве, и, если есть совпадение, вы возвращаете массив, как определено в ссылке выше.

В массиве, который вы возвращаете из beforeShowDay, второй элемент используется для установки имени класса, который будет использоваться на дату, затем вы можете использовать css для установки стилей для этого класса.

...