我有两个日期选择器应用于我网站上的 div 以实现日期范围。现在我想突出显示日历中的所有日期,这些日期在所选范围内(例如在它们上应用 css 类)。
我发现了这个: 在 jQuery Datepicker 中选择日期范围并突出显示
但是如何在数组中插入所有选定的日期?还是有更好的解决方案?
我该如何管理?我找不到 datepicker 插件的内置解决方案。
我有两个日期选择器应用于我网站上的 div 以实现日期范围。现在我想突出显示日历中的所有日期,这些日期在所选范围内(例如在它们上应用 css 类)。
我发现了这个: 在 jQuery Datepicker 中选择日期范围并突出显示
但是如何在数组中插入所有选定的日期?还是有更好的解决方案?
我该如何管理?我找不到 datepicker 插件的内置解决方案。
这是一个旧的,但我需要相同的功能,所以这就是我如何做到的,以防有人需要它。
jQuery(document).ready(function(){
jQuery( "#start_date" ).datepicker({
dateFormat:'yy-mm-dd',
changeMonth: true,
numberOfMonths: 3,
rangeSelect:true,
beforeShowDay: customRange,
onClose: function( selectedDate ) {
jQuery( "#end_date" ).datepicker( "option", "minDate", selectedDate );
}
});
jQuery( "#end_date" ).datepicker({
dateFormat:'yy-mm-dd',
changeMonth: true,
numberOfMonths: 3,
rangeSelect:true,
beforeShowDay: customRange,
onClose: function( selectedDate ) {
jQuery( "#start_date" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
function customRange(date) {
if(date >= jQuery('#start_date').datepicker('getDate') && date <= jQuery('#end_date').datepicker('getDate')) {
return [true, 'highlight'];
} else {
return [true, ''];
}
}
尝试这个
<input type="text" id="from">
<input type="text" id="to">
<script type="text/javascript">
$(function(){
$("#to").datepicker();
$("#from").datepicker().bind("change",function(){
var minValue = $(this).val();
minValue = $.datepicker.parseDate("mm/dd/yy", minValue);
minValue.setDate(minValue.getDate()+1);
$("#to").datepicker( "option", "minDate", minValue );
})
});
</script>
示例:http: //jsfiddle.net/dW4n8/2/
$("#input-service_date_leave, #input-service_date_return").datepicker({
rangeSelect: true,
beforeShow: customRange,
onSelect: customRange,
});
function customRange(input) {
if (input.id == "input-service_date_leave") {
$("#ui-datepicker-div td").die();
if (selectedDate != null) {
$('#input-service_date_return').datepicker('option', 'minDate', selectedDate).datepicker('refresh');
}
}
if (input.id == "input-service_date_return") {
$("#ui-datepicker-div td").live({
mouseenter: function() {
$(this).parent().addClass("finalRow");
$(".finalRow").prevAll().find("td:not(.ui-datepicker-unselectable)").addClass("highlight");
$(this).prevAll("td:not(.ui-datepicker-unselectable)").addClass("highlight");
},
mouseleave: function() {
$(this).parent().removeClass("finalRow");
$("#ui-datepicker-div td").removeClass("highlight");
}
});
var selectedDate = $("#input-service_date_leave").datepicker("getDate");
if (selectedDate != null) {
$('#input-service_date_return').datepicker('option', 'minDate', selectedDate).datepicker('refresh');
}
}
}