Пожалуйста, помогите с пользовательскими правилами jQuery datepicker

#php #jquery

#jquery #массивы #jquery-пользовательский интерфейс #Дата #jquery-ui-datepicker

Вопрос:

На данный момент у меня есть datepicker, который:

Исключает сегодня, если после 12:00 пополудни.

Исключая воскресенья.

 <script type="text/javascript">
 $(function() {


            // get today's date
            var myDate = new Date();
            // add one day if after 12:00
            if (myDate.getHours() > 12) {
                        myDate.setDate(myDate.getDate() 1);
            } else {
                myDate.setDate(myDate.getDate() 0);

            };

           $("#delivery-date-textbox").datepicker({
            dateFormat: 'dd-mm-yy',
            minDate: myDate,
            beforeShowDay: function(date){ return [date.getDay() != 0,""]}

            });
            });
</script>
 

Как я могу сделать так, чтобы он также исключал массив государственных праздников?

Ответ №1:

это может вам помочь ….Нажмите здесь

 /* create an array of days which need to be disabled */
var disabledDays = ["2-21-2010","2-24-2010","2-27-2010","2-28-2010","3-3-2010","3-17-2010","4-2-2010","4-3-2010","4-4-2010","4-5-2010"];

/* utility functions */
function nationalDays(date) {
  var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
  //console.log('Checking (raw): '   m   '-'   d   '-'   y);
  for (i = 0; i < disabledDays.length; i  ) {
    if($.inArray((m 1)   '-'   d   '-'   y,disabledDays) != -1 || new Date() > date) {
      //console.log('bad:  '   (m 1)   '-'   d   '-'   y   ' / '   disabledDays[i]);
      return [false];
    }
  }
  //console.log('good:  '   (m 1)   '-'   d   '-'   y);
  return [true];
}
function noWeekendsOrHolidays(date) {
  var noWeekend = jQuery.datepicker.noWeekends(date);
  return noWeekend[0] ? nationalDays(date) : noWeekend;
}
/* create datepicker */
jQuery(document).ready(function() {
  jQuery('#date').datepicker({
    minDate: new Date(2010, 0, 1),
    maxDate: new Date(2010, 5, 31),
    dateFormat: 'DD, MM, d, yy',
    constrainInput: true,
    beforeShowDay: noWeekendsOrHolidays
  });
});
 

(Блог Дэвида Уолша)

Ответ №2:

Я быстро написал фрагмент, который, на мой взгляд, является хорошим наброском. Я хочу сказать, что существует два типа национальных праздников: те, которые выпадают на один и тот же день каждый год (например, Рождество) и те, которые выпадают на разные дни каждый год (например, Пасха). Я не буду приводить здесь логику для вычисления движущихся праздников, но мой фрагмент работает с массивом, который может иметь два типа праздников: month/day (для статических) и month/day/year (для изменения). Вы можете сгенерировать этот массив так, как хотите.

Тест будет выполняться с этим массивом, преобразует значения массива в объекты даты и использует jQuery inArray() для поиска совпадений.

Базовый код:

 //an array of holidays, defined here, ajaxed or anything
var holidays=['12/24', '1/1', '5/10/2011', '5/25'];

//a function that decides whether a date is a holiday
function isHoliday(date, holidays) {
    var parts, dateArray=[];
    //build Dates from the array
    for (var i=0; i<holidays.length; i  ) {
        parts=holidays[i].split('/');
        if (parts.length==2) {
            dateArray.push(new Date(date.getFullYear(), parts[0]-1, parts[1]).getTime());
        } else if (parts.length==3) {
            dateArray.push(new Date(holidays[i]).getTime());
        } else {
            return false;
        }
    }
    return $.inArray(date.getTime(), dateArray)!=-1;
}

$('#fos').datepicker({
    dateFormat: 'dd-mm-yy',
    beforeShowDay: function(date){
        //handling sundays
        if (date.getDay() == 0) {
            return [false];
        }
        //handling holidays
        if (isHoliday(date, holidays)) {
            return [false];
        }
        return [true];
    }
});
 

И демонстрация jsFiddle. Успешно протестировано в Chrome и FF4.

Ответ №3:

Как вы видели, DatePicker jQuery UI может использовать вспомогательную функцию, чтобы определить, можно ли выбрать заданную дату. Вспомогательная функция получает одну дату. Затем вы можете применить любую выбранную вами логику к этой дате, если вы возвращаете массив с одним значением bool.

Вот вариант того, что я делал в прошлом… не особенно сексуально, но это работает!

 //returns a single-item array of true or false. False disables the given date (un-pick-able!)
isWorkingDay = function isWorkingDay(date) {
    var day = date.getDay(),
        d = date.getDate(),
        m = date.getMonth()   1,
        yyyy = date.getFullYear(),
        dateStr = m   "/"   d   "/"   yyyy,
        weekendDays = [0, 6],
        holidays = ["5/3/2011", "5/24/2011", "5/26/2011"];

    //filter out holidays
    for (var i = 0; i < holidays.length; i = i   1) {
        if (dateStr === holidays[i]) {
            return [false];
        }
    }

    //filter out weekends (e.g. Saturday amp; Sunday)
    for (var i = 0; i < weekendDays.length; i = i   1) {
        if (day === weekendDays[i]) {
            return [false];
        }
    }
    return [true];
};


$(document).ready(function () {
    //initialize datepicker
    $("input.calendar").datepicker({
        beforeShowDay: isWorkingDay
    });
});
 

Я также собрал рабочую демонстрацию — проверьте ее здесь: http://jsfiddle.net/2uCxh /

Некоторые примечания:
Вам нужно настроить массив «праздники» по своему вкусу (в моем есть фиктивные данные)
Я не включил вашу логику ограничения времени — ее можно добавить довольно легко
Это очень ориентировано на США

Комментарии:

1. Это блестяще, именно то, что мне было нужно… Большое спасибо!