Выделение дат между двумя выбранными датами jQuery UI Datepicker

  • У меня есть один datepicker с numberOfMonths, установленным на 2.
  • Дата прибытия и дата отъезда определяются с использованием этой логики (в onSelect):

if ((count % 2)==0) {
      depart = $("#datepicker-1").datepicker('getDate');
      if (arriv > depart) { temp=arriv; arriv=depart; depart=temp; }
      $("#check-in").val($.datepicker.formatDate("DD, MM d, yy",arriv)); 
      $("#check-out").val($.datepicker.formatDate("DD, MM d, yy",depart));
     } else {
      arriv = $("#datepicker-1").datepicker('getDate');
      depart = null;
      if ((arriv > depart)&&(depart!=null)) { temp=arriv; arriv=depart; depart=temp; }
      $("#day-count").val('');
      $("#check-in").val($.datepicker.formatDate("DD, MM d, yy",arriv));
      $("#check-out").val($.datepicker.formatDate("DD, MM d, yy",depart));
     }

     if(depart!=null) { 
      diffDays = Math.abs((arriv.getTime() - depart.getTime())/(oneDay)); 
      if (diffDays == 0) { $("#day-count").val((diffDays+1)+' Night/s'); } else { $("#day-count").val(diffDays+' Night/s'); }
     }
  • Получить количество дней в этих двух датах не проблема
  • Сейчас я хочу выделить эти даты, начиная с момента прибытия до отъезда.
  • Я попытался обойти onSelect, но безуспешно.
  • Сейчас я использую beforeShowDay, чтобы выделить эти даты, но я не могу понять этого
  • Получил образец из здесь
  • По сути, он настроен так, чтобы выделять 11 или 12 дней после выбранной даты (вот код из этой ссылки).

    $('#datePicker').datepicker({beforeShowDay: function(date) {
                        if (selected != null && date.getTime() > selected.getTime() &&
                            (date.getTime() - selected.getTime())
  • Поскольку я новичок в использовании пользовательского интерфейса, и логика для меня еще не ясна, я не могу понять этого. Есть какие-нибудь идеи о том, как я могу сделать эти основные даты между прибытием и отъездом, используя мою вышеупомянутую логику, использованную для определения этих двух?

javascript datepicker jquery jquery-ui-datepicker
person Ralph    schedule 16.04.2010    source источник
comment
Вы хотите выделить его во всплывающем окне календаря JQuery UI ...?   -  person SpikETidE    schedule 16.04.2010
comment
Что вы имеете в виду всплывающее окно календаря? По сути, я хочу выделить даты, начиная с первой выбранной даты до второй выбранной даты. Например, я выбрал 19 апреля 2010 года и закончил свой выбор 21 апреля. Даты с 19 апреля должны выделиться (или изменить цвет фона на какой-либо) до 21 апреля 2010 года.   -  person Ralph    schedule 19.04.2010

Ответы (3)


arrow_upward
4
arrow_downward

Супер старый вопрос, но я нашел ответ для всех, кто его нашел: http://jsfiddle.net/kVsbq/4/

JS

$(".datepicker").datepicker({
minDate: 0,
numberOfMonths: [12, 1],
beforeShowDay: function (date) {
    var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
    var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
    return [true, date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "dp-highlight" : ""];
},
onSelect: function (dateText, inst) {
    var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
    var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
    if (!date1 || date2) {
        $("#input1").val(dateText);
        $("#input2").val("");
        $(this).datepicker();
    } else {
        $("#input2").val(dateText);
        $(this).datepicker();
    }
}
});
person Mcestone    schedule 18.04.2013

arrow_upward
1
arrow_downward

ЕСЛИ это поможет .. :-)

$(function() {
     var togo=['10/25/2013']
     var datesArray=['10/27/2013','10/28/2013']
     var datesArray1=['10/25/2013','10/26/2013']
     var datesArray2=['10/24/2013']


        $( "#datepicker" ).datepicker({
            numberOfMonths: 2,

            selectMultiple:true,
            beforeShowDay: function (date) {
                var theday = (date.getMonth()+1) +'/'+ 
                            date.getDate()+ '/' + 
                            date.getFullYear();
                    return [true,$.inArray(theday, datesArray2) >=0?"specialDate":($.inArray(theday, datesArray)>=0?"specialDate2":($.inArray(theday, datesArray1)>=0?"specialDate1":''))];
                },

            onSelect: function(date){

             console.log("clicked"+date);  
            return [true,$.inArray(['10/24/2013'], togo) >=0?"specialDate":($.inArray(date, datesArray1)>=0?"specialDate1":'')] ;  

            }

        });
        //$.inArray(theday, datesArray) >=0?"specialDate":'specialDate1'
    });

http://jsfiddle.net/pratik24/Kyt2w/3/

person patz    schedule 04.10.2013

arrow_upward
0
arrow_downward

Не совсем ответ, но это может быть полезно:

http://www.eyecon.ro/datepicker/

К сожалению, назван, но похоже, что это может быть то, что вам нужно.

person Groxx    schedule 18.08.2010