2010-09-30 6 views
2

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

+0

вот аналогичный вопрос: http://stackoverflow.com/questions/330737/jquery-datepicker-2-inputs-textboxes-and-restricting-range – lock

ответ

11
$(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 

     }; 
    } 

}​ 

crazy demo

+0

Работает как шарм. Бесконечно благодарен! – Andrew

+0

Reigel, ваш код отлично работает, но какую строку я должен изменить, поэтому он отлично работает с испанским форматом даты, например dd/mm/yyyy? спасибо – Enrique

+0

Решенный! altFormat и свойства altField. благодаря! – Enrique

1
$('#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 

     }); 
     } 
    }); 
0
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) {} 
} 
2

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

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

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