我正在使用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个输入字段，每个字段都有自己的日期选择器。选择第一个输入的日期后，将自动显示第二个日期，用户可以选择日期。
功能很好，但我想只向用户显示一个输入，该输入将填充from和to日期，例如13-06-2013 - 15-06-2013
我不知道如何实现这个。有没有人有任何建议？
答案 0 :(得分：1)
为什么不将它们留作两个单独的日期选择器，但将它们设置为一样......我将它们并排放置并在它们上设置样式，使左边的没有右边框，并且右边没有左边界。
这样，一旦表单提交，您仍然会将两个值作为单独的值传递。
答案 1 :(得分：1)
这是一个工作示例，但使用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="" />
答案 2 :(得分：0)