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個輸入字段，每個都有自己的日期選擇器。爲第一個輸入選擇一個日期後，第二個輸入會自動顯示，用戶可以選擇一個日期。

功能很好，但我只想向用戶顯示一個單一的輸入，它將填入日期和日期，例如， 13-06-2013 - 15-06-2013

我不知道如何去實現這一點。有沒有人有什麼建議？

Answer 1

爲什麼不把它們作爲兩個單獨的日期選擇器，而是將它們作爲一個樣式進行設計......我將它們並排放置，並在其上設置樣式，以使左側沒有右側邊框，以及正確的沒有左邊界。

這樣，一旦提交表單，您仍然可以將兩個值作爲單獨的值傳遞。

Answer 2

你爲什麼不試試這個：

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

演示是在這裏。

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

OR 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="" />