jQuery UI Datepicker-如何在选择时突出显示特定日期范围? [英] jQuery UI Datepicker - How can i, on select, highlight a particular range of dates?
问题描述
我想在用户选择日期时突出显示接下来的11天.目的是根据所选日期显示所选的12天范围.
I want to, when the user selects a date, highlight the following 11 days. The intention is to show a 12-day range selected depending on whatever day was chosen.
我从 http://www.filamentgroup.com/建议,但这并不能真正为我提供所需的可视化效果,它只是让用户根据我的理解选择一个范围(从/到).
I've seen the "date range picker" from http://www.filamentgroup.com/ suggested, but this doesnt really give me the visualization i want, it just lets a user pick a range (from/to) as i understand it.
关于我如何实现这一点的任何建议?
Any suggestion on how i can realize this?
欢呼
推荐答案
您可以使用 beforeShowDay 事件,为您需要突出显示的日期提供CSS样式.
You can use the beforeShowDay event to give a CSS style for the dates you need to highlight.
代码:
$(document).ready(function(){
var selected = null;
$('#datePicker').datepicker({beforeShowDay: function(date) {
if (selected != null && date.getTime() > selected.getTime() &&
(date.getTime() - selected.getTime()) < 12*24*3600*1000) {
return [true, "highlighted"];
}
return [true, ""];
}});
$("#datePicker").datepicker( 'option' , 'onSelect', function() {
str = $(this).val().toString();
selected=$.datepicker.parseDate('mm/dd/yy', str);
console.log(selected);
});
});
这篇关于jQuery UI Datepicker-如何在选择时突出显示特定日期范围?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!