在过去的几个月里，我一直在使用 jQuery UI 日历/日期选择器并取得了巨大的成功。我收到了一项新要求，允许选择一周（周日至周六）而不是一天。
有没有人以前完成过这个？
- 按周而不是按天突出显示
- 在文本框/标签中显示开始日期和结束日期而不是单个日期
如何在一周而不是一天中使用 jQuery UI 日历/日期选择器？
IT技术
javascript
jquery
asp.net-mvc
jquery-ui
2021-03-20 20:50:17
6个回答
使用 jQuery UI DataPicker 的内联周选择器（需要 jQuery UI 1.8+）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
var startDate;
var endDate;
var selectCurrentWeek = function() {
window.setTimeout(function () {
$('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
}, 1);
}
$('.week-picker').datepicker( {
showOtherMonths: true,
selectOtherMonths: true,
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate');
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
$('#startDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings ));
$('#endDate').text($.datepicker.formatDate( dateFormat, endDate, inst.settings ));
selectCurrentWeek();
},
beforeShowDay: function(date) {
var cssClass = '';
if(date >= startDate && date <= endDate)
cssClass = 'ui-datepicker-current-day';
return [true, cssClass];
},
onChangeMonthYear: function(year, month, inst) {
selectCurrentWeek();
}
});
$('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
$('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});
</script>
</head>
<body>
<div class="week-picker"></div>
<br /><br />
<label>Week :</label> <span id="startDate"></span> - <span id="endDate"></span>
</body>
</html>
在 JsFiddle http://jsfiddle.net/manishma/AVZJh/light/上运行它
这是另一种方法。- 用 showWeek 显示周。- 定义 beforeShow 以使用 live() 附加事件处理程序，以便突出显示周行（包括周数）。- 使用 die() onclose 分离事件处理程序。当您在代码中的其他地方使用普通日期选择器时，这特别方便。
$( ".week-picker" ).datepicker({
dateFormat: "yy-mm-dd",
showOtherMonths: true,
selectOtherMonths: true,
changeMonth: true,
changeYear: true,
showWeek: true,
beforeShow: function(dateText, inst) {
// for week highighting
$(".ui-datepicker-calendar tr").live("mousemove", function() {
$(this).find("td a").addClass("ui-state-hover");
$(this).find(".ui-datepicker-week-col").addClass("ui-state-hover");
});
$(".ui-datepicker-calendar tr").live("mouseleave", function() {
$(this).find("td a").removeClass("ui-state-hover");
$(this).find(".ui-datepicker-week-col").removeClass("ui-state-hover");
});
},
onClose: function(dateText, inst) {
var wk = $.datepicker.iso8601Week(new Date(dateText));
if (parseInt(wk) < 10) {
wk = "0" + wk;
}
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
if (isNaN(wk)) {
$(this).val("");
} else {
$(this).val(year + ";" + wk);
}
// disable live listeners so they dont impact other instances
$(".ui-datepicker-calendar tr").die("mousemove");
$(".ui-datepicker-calendar tr").die("mouseleave");
}
});
我根据接受的答案创建了一个 jQuery 插件。在https://github.com/Prezent/jquery-weekpicker或通过 Bower获取。用法示例：
$('#selector').weekpicker({
startField: '#date-start',
endField: '#date-end'
});
您需要以下依赖项：
- jQuery.js
- jquery-ui.min.js
- jquery-ui.css
var startDate;
var endDate;
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate');
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
$('#startDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings ));
$('#endDate').text($.datepicker.formatDate( dateFormat, endDate, inst.settings ));
$(this).val($.datepicker.formatDate( dateFormat, startDate, inst.settings ) + " - " + $.datepicker.formatDate( dateFormat, endDate, inst.settings ));
}
});.ui-datepicker-calendar tr:hover {
background-color:#808080;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
</head>
<body>
<label for="startDate">Date :</label>
<input name="startDate" class="date-picker" />
<label>Week :</label> <span id="startDate"></span> - <span id="endDate"></span>
</body>
</html>我在第 8123 行修改了 jqueryui-1.10.2.js：
（我不记得我在哪里见过这个）
case 'W':
output += this.iso8601Week(new Date(date.getFullYear(), date.getMonth(), date.getDate()));
break;
然后你可以在日期格式中选择带有 W 的周 ==> dateFormat: 'yy-W'
$("#your_datepicker").datepicker ({ firstDay: 1, showWeek: true, showOtherMonths: true, dateFormat: 'yy-W'});
如果您有以前版本的 jqueryui，请在文件中搜索“@”（也搜索引号）并添加这 3 行。