我有两个日期选择器应用于我网站上的div来实现日期范围。现在我想突出显示日历中所有日期的日期(例如,在它们上面应用css类)。
我发现了这个: Select a Range of dates and Highlight in jQuery Datepicker
但是如何在阵列中插入所有选定日期?或者甚至有更好的解决方案?
我该如何管理?我找不到datepicker插件的内置解决方案。
答案 0 :(得分:0)
试试这个
<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');
}
}
}
答案 1 :(得分:0)
这是一个旧的,但我需要相同的功能,所以这是我如何做以防万一有需要。
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, ''];
}
}