JQuery DatePicker пользовательские правила, помогите, пожалуйста - PullRequest
Новая
       6

JQuery DatePicker пользовательские правила, помогите, пожалуйста

3 голосов
/ 16 апреля 2011

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

Исключает сегодня, если после 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>

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

Ответы [ 3 ]

7 голосов
/ 16 апреля 2011

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

/* 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 голосов
/ 10 мая 2011

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

Тест будет выполняться для этого массива, преобразует значения массива в объекты Date и использует 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 Demo .Успешно протестировано на Chrome и FF4.

1 голос
/ 07 мая 2011

Как вы уже видели, datePicker пользовательского интерфейса jQuery может использовать вспомогательную функцию, чтобы выяснить, может ли быть выбрана данная дата.Функция-помощник получает одну дату.Затем вы можете применить любую выбранную вами логику к этой дате, если вы возвращаете массив с одним значением 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 & 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/

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

...