jQuery UI Datepicker Range

Question

Я задал довольно похожий вопрос несколько дней назад, но этот настолько отличается, что я не чувствовал, что схожу с ума от другой полезной темы.Я в основном хочу настроить два поля ввода текста и соединить их оба с DatePicker пользовательского интерфейса jQuery, чтобы они действовали как диапазон ... Я хочу, чтобы дата начала второго поля ввода зависела от того, что вы выбрали в первом вводеполе.Например, если я выберу 10-25-2010 для первого поля, то самый ранний день, который вы можете выбрать во втором поле, должен быть 10-26-2010.Любая помощь или направление по этой теме будет принята с благодарностью!

Answer 1

$(function() {

    $('#txtStartDate, #txtEndDate').datepicker({
        showOn: "both",
        beforeShow: customRange,
        dateFormat: "dd M yy",
    });

});

function customRange(input) {

    if (input.id == 'txtEndDate') {
        var minDate = new Date($('#txtStartDate').val());
        minDate.setDate(minDate.getDate() + 1)

        return {
            minDate: minDate

        };
    }

}​

сумасшедшая демонстрация

Answer 2

Документация по датчику JQuery UI сама по себе является хорошим примером того, как связать два средства выбора даты, чтобы обеспечить допустимые диапазоны дат.

См. Пример здесь: http://jqueryui.com/datepicker/#date-range

Дополнительный плагин не требуется, хотя, если вы хотите создать простое, которое будет брать идентификаторы полей начальной и конечной даты и вставлять необходимые биты в блок кода, который они дают в документах, это было бы довольно просто.

Answer 3

onSelect: function(dateText, inst) {
  try {
    var date = $.datepicker.parseDate("dd/mm/yy", dateText);
      if (date) {
        date.setDate(date.getDate() + 1);
        $("#secondDatePicker").datepicker("setDate", date);
      }
    }
    catch(e) {}
}

Answer 4

$('#firstinputfield').datepicker({

    //your other configurations.     

     onSelect: function(){
     var start = $('#firstinputfield').val();
     var days = parseInt('1');
     var date = new Date(start);
     var d = date.getDate();
     var m = date.getMonth();
     var y = date.getFullYear();
     var edate= new Date(y, m, d+days);
     $('#secondinputfield').datepicker({

        //Your other configurations.

        minDate:edate

        });
        }
     });