如何使用jQuery UI Calendar / Date PIcker一周而不是一天？
在过去的几个月里，我一直在使用jQuery UI Calendar / Date Picker取得了巨大的成功。 我有一个新的要求，允许选择一周（周日 – 周六）而不是一天。
有没有人以前完成过这个？
- 按周而不是白天突出显示
- 在文本框/标签中显示开始日期和结束日期而不是单个日期
使用jQuery UI DataPicker的内联周选择器（需要jQuery UI 1.8+）：
- 这是另一种方式。 – 用showWeek显示一周。 – 使用live（）定义beforeShow以附加事件处理程序，以便突出显示周行（包括周数）。 – 使用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; }
-
我在第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行。
我使用了上面的一些示例，但采用了不同的方法，因为我需要支持选择一周但是一周可以在一周的任何一天开始，并且需要根据变量进行更改。 我设置了一个类，用每周课程对每个td进行分组，这样我就可以轻松地突出显示与tr重叠的一周。 在此示例中，datepickerStartWeekDay可以是0到6，表示从星期日到星期六开始的一周。
这是我的代码：
var $elem = $("input.my-date-picker"); var weekCounter = 1; var datepickerStartWeekDay = 1; options = { changeMonth: true, changeYear: true, showOtherMonths: true, selectOtherMonths: true, onClose: function (dateText, inst) { weekCounter = 1; }, onSelect: function(dateText, inst) { if (datepickerStartWeekDay != null) { var elem = $(this); var date = elem.datepicker('getDate'); var curDayNum = date.getDay(); var offset; if (curDayNum > datepickerStartWeekDay) { offset = -(curDayNum - datepickerStartWeekDay); } else { offset = -(7 - (datepickerStartWeekDay - curDayNum)); } var wkStartDate = new Date(date.addDays(offset)); elem.val(wkStartDate); } }, beforeShowDay: function(date) { var retClass; // datepickerStartWeekDay: 0 = Sunday.. 6 = Saturday // Set up weeks based on the start day with classes. // week1, week2, week3, etc based on the start day of the week if (datepickerStartWeekDay != null) { if (date.getDay() == datepickerStartWeekDay) { weekCounter += 1; } retClass = [true, 'week' + weekCounter]; } else { retClass = [true, '']; } return retClass; }, onChangeMonthYear: function(year, month, inst) { weekCounter = 1; } }; $elem.datepicker(options); // Event to list for mouseover for week selection $(".ui-datepicker-calendar td").live('mouseover', function (ev) { var targetElem = $(ev.currentTarget); targetElem.closest("tbody").find(".ui-week-hover").removeClass("ui-week-hover"); for (var i = 0; i < 8; i++) { if (targetElem.hasClass("week" + i)) { targetElem.closest("tbody").find(".week" + i).addClass("ui-week-hover"); continue; } } });`
// CSS
.ui-week-hover a { background-color: #eef6f9 !important; }
如果有人仍然感兴趣我做了这个： Week Picker Converter 。
是一个小型字段转换器，可将文本或隐藏转换为周选择器。 如果有人使用它来打印表（来自数据库），那么在SQL查询选择中使用以下模式也是可用的：
select '' || week_field || '' || '' as "WeekPicker" from dual