好的,所以我到处找这个,但因为找不到它而感到惊讶。
我知道 jQuery Datepicker API 只允许使用输入标签或在 span 或 div 标签内实现它。
我使用日期选择器作为 3 个下拉菜单的辅助功能。
我有:
<select name="dateSelect-day" id="dateSelect-day">
<option value="01">01</option>
.....
</select>
<select name="dateSelect-month" id="dateSelect-month">
<option value="01">01</option>
.....
</select>
<select name="dateSelect-year" id="dateSelect-year">
<option value="01">01</option>
.....
</select>
它定义了我的三个下拉菜单来选择日期。本质上,表单提交操作将从这些下拉选择中发送值。
但我还需要一个已经像这样实现的日期选择器:
标记:
<input type="text" size="35" id="singleDate" name="singleDate" />
JS:
<script>
$(function() {
var dateFrom = $( "#dateFrom" );
var dateTo = $("#dateTo");
var singleDate = $("#singleDate");
var formatter = $("#format");
dateFrom.datepicker({
dateFormat: "dd/mm/yy" ,
// defaultDate: "+1w" , //1 week after today
firstDay: 1 , //Monday is set as the first day of the week
// minDate: "-3m" , //Minimum date is 3 months from today, use "y", "m","w","d"
showOn: "both",
buttonImage: "./calendar.png",
buttonImageOnly: true,
buttonText: "Pick a Date",
numberOfMonths: 1,
changeMonth: true,
changeYear: true,
// beforeShowDay: $.datepicker.noWeekends,
beforeShowDay: $.datepicker.noWeekends,
onClose: function( selectedDate ) {
dateTo.datepicker("option", "minDate", selectedDate );
}
});
dateTo.datepicker({
dateFormat: "dd/mm/yy" ,
firstDay: 1 , //Monday is set as the first day of the week
// minDate: "-3m" , //Minimum date is 3 months from today, use "y", "m","w","d"
showOn: "both",
buttonImage: "./calendar.png",
buttonImageOnly: true,
buttonText: "Pick a Date",
numberOfMonths: 1,
changeMonth: true,
changeYear: true,
beforeShowDay: $.datepicker.noWeekends,
onClose: function (selectedDate) {
dateFrom.datepicker("option", "maxDate", selectedDate);
}
});
singleDate.datepicker({
dateFormat: "dd/mm/yy" ,
// defaultDate: "+1w" , //1 week after today
firstDay: 1 , //Monday is set as the first day of the week
// minDate: "-3m" , //Minimum date is 3 months from today, use "y", "m","w","d"
showOn: "both",
buttonImage: "./calendar.png",
buttonImageOnly: true,
buttonText: "Pick a Date",
numberOfMonths: 1,
changeMonth: true,
changeYear: true
});
formatter.change(function() {
dateFrom.datepicker( "option", "dateFormat", $( this ).val() );
dateTo.datepicker( "option", "dateFormat", $( this ).val() );
singleDate.datepicker( "option", "dateFormat", $( this ).val() );
});
$("body").on('hover', function() {
$('#val1').html($("#dateFrom").val());
$('#val2').html($("#dateTo").val());
$('#val3').html($("#singleDate").val());
});
});
</script>
所以目前我有 3 个不同的日期选择器。前两个用于选择日期范围..但我需要帮助的是最后一个名为 singleDate 的日期选择器。
我需要日期选择器在被选中后自动从下拉菜单中选择值。