2 datepickers на один поле ввода

Question

Я использую this plugin

У меня есть следующий HTML и JavaScript:

<div> 
    <div> 
     <div>Departure:</div> 
     <div><input name="departureDateInput" value="#{bean.getFormattedFromDate()}" class="datepicker datepicker1"></input></div> 
    </div> 

    <div> 
     <div>Return:</div> 
     <div><input name="returnDateInput" value="#{bean.getFormattedToDate()}" class="datepicker datepicker2"></input></div> 
    </div> 
</div> 

<script> 
    var $input2 = $(".datepicker1").pickadate({ 
     format: 'dd-mm-yyyy', 
     min: 1, 
     today: '', 
     onClose: function() { 
      var picker = $input.pickadate("picker"); 

      picker.set("select", this.component.item.select.pick); 
      picker.open(); 

     } 
    }); 

    var $input = $('.datepicker2').pickadate({ 
     format: 'dd-mm-yyyy', 
     min: 1, 
     today: '', 
     onClose: function() { 
      $("#departureDateInput").text($input2.val()); 
      $("#returnDateInput").text($input.val()); 
     } 
    }); 
</script> 

Визуализированное результат из выше 2 поля ввода, которые имеют свои собственные DatePicker. После выбора даты для первого ввода автоматически отображается вторая, и пользователь может выбрать дату.

Функциональность прекрасна, но я хочу показать пользователю только один вход, который будет заполнен данными от и до дат, например. 13-06-2013 - 15-06-2013

Я понятия не имею, как это осуществить. У кого-нибудь есть предложения?

Answer 1

Почему бы не оставить их как два отдельных сборщика даты, но нарисуйте их так, как если бы они были такими ... Я наложил их бок о бок и установил на них стиль, поэтому левая сторона не имеет правой границы и у правой нет левой границы.

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

Answer 2

Почему бы вам не попробовать это:

http://www.benknowscode.com/2012/11/selecting-ranges-jquery-ui-datepicker.html

Demo здесь.

http://bseth99.github.io/projects/jquery-ui/4-jquery-ui-datepicker-range.html

ИЛИ http://multidatespickr.sourceforge.net/

Answer 3

Вот рабочий пример, но с использованием JQuery UI: http://jsfiddle.net/kcCUD/10/

$(function() { 
    var date1 = $('#date1'); 
    var date2 = $('#date2'); 
    date1.datepicker({ 
     defaultDate: "+1w", 
     changeMonth: true, 
     numberOfMonths: 1, 
     onClose: function(selectedDate) { 
      var date = $(this).datepicker("getDate"); 

      date2.datepicker("setDate", date); 
      date2.datepicker("show"); 

     } 
    }); 
    date2.datepicker({ 
     defaultDate: "+1w", 
     changeMonth: true, 
     numberOfMonths: 1, 
     onClose: function(selectedDate) { 
      var date = $(this).datepicker("getDate"); 
      var formattedDate = $.datepicker.formatDate('mm/dd/yy', date); 

      date1.val(date1.val() + " - " + formattedDate); 
     } 
    }); 
}); 

HTML:

<input id="date1" value="" size="30" /> 
<input id="date2" style="visibility:hidden" value="" />