我可以在标准的Jquery UI日期选择器中突出整整一周吗？
我可以在标准的Jquery UI日期选择器中突出整整一周吗？
我知道这篇文章已经很老了，但我刚刚在另一个网站上发现了这个代码并认为它可能有所帮助。
源代码 – 来自这篇文章 ：
- >
我写了一个解决方案，突出了本周。 它仍然会选择所选的日期，但这对我来说是好的。 #week是附加了datepicker的输入框。
$('#week').datepicker({ beforeShowDay: $.datepicker.noWeekends, duration : 0, onChangeMonthYear: function() { setTimeout("applyWeeklyHighlight()", 100); }, beforeShow: function() { setTimeout("applyWeeklyHighlight()", 100); } }).keyup(function() { setTimeout("applyWeeklyHighlight()", 100); }); function applyWeeklyHighlight() { $('.ui-datepicker-calendar tr').each(function() { if($(this).parent().get(0).tagName == 'TBODY') { $(this).mouseover(function() { $(this).find('a').css({'background':'#ffffcc','border':'1px solid #dddddd'}); $(this).find('a').removeClass('ui-state-default'); $(this).css('background', '#ffffcc'); }); $(this).mouseout(function() { $(this).css('background', '#ffffff'); $(this).find('a').css('background',''); $(this).find('a').addClass('ui-state-default'); }); } }); }
这是一篇文章 ，其中有一个如何使用datepicker选择整周的示例。
$(function() { $('.date-pick').datePicker({selectWeek:true,closeOnSelect:false}); });
AntFalco的答案很棒，但如果你需要做我做的事情，它就不会很好用。 我需要一种方法来选择一周，让一周的第一天填充到一个输入框中，点击一下就可以生成datepicker。 这是我用来完成这个的代码：
这也具有为多个输入值工作的副作用。 如果你需要某种“周”选择器，那么这段代码是最有用的。 代码非常少，因此对测试进行小的修改非常容易。 此外，它适用于minDate / maxDate函数。
您可以按照此讨论中的建议来实现您的周选择function： http ： //code.google.com/p/jquery-datepicker/issues/detail？id = 13
不幸的是，看起来jQuery datepicker无法处理整整一周。 它需要自定义编码。
这是非常晚，但我正在寻找相同的解决方案，只能找到这些类型的答案的参考（即对于不同的日期选择器）。 就我而言，我正在使用内联，所以这就是代码的工作原理。 如果您希望弹出一周突出显示，则必须进行修改。 这是有效的：
var selectedWeek;//remember which week the user selected here $("#inlineDIVdatepicker").datepicker({ firstDay:1, showOtherMonths:true, onSelect: function(dateText){ selectedWeek = $.datepicker.iso8601Week(new Date(dateText)); } , //set the class 'week-highlight' for the whole week beforeShowDay: function(d){ if (!selectedWeek) { return [true,''];} if (selectedWeek == $.datepicker.iso8601Week(d)){ return [true,'week-highlight']; } return [true,'']; } });
然后定义一些CSS（我自己没有真正完成这部分，所以这很难看）：
#inlineDIVdatepicker .week-highlight a { background:none; background-color:yellow; }
该脚本突出显示从所选日期开始的一周。
在这里查看一个工作示例： http ： //jsfiddle.net/frictionless/W5GMg/
逻辑：
beforeShowDay ：为显示的日历中的每个日期运行。 在显示日历时以及选择特定日期时调用它。
onSelect ：函数捕获从selectedDay开始的所选周，并且beforeShowDay呈现所选周
这是一个与Jquery 1.5.1和JQuery UI 1.8.1一起使用的代码片段
$(function () { var _dates=new Array(); $('#datepicker').datepicker({ beforeShowDay:function(_date){ if($.inArray(_date.getTime(),_dates)>=0) return [true,"highlighted-week","Week Range"]; return[true,"",""]; }, onSelect:function(_selectedDate){ var _date=new Date(_selectedDate); _dates=new Array(); for(i=0;i<7;i++){ var tempDate=new Date(_date.getTime()); tempDate.setDate(tempDate.getDate()+i); _dates.push(tempDate.getTime()); } } }); });
编辑：Frictionless的答案很棒，除了问题是如何选择整个星期（不是点击后的6天）。 建议我在这里复制我的补丁。
这是我在我的网站上使用的简化版本。 请注意，周选择器与标记挂钩，以显示一周的第一天和最后一天。 这需要一个引用/images/schedule.png的触发按钮。
根据需要更改：
我希望做同样的事情，但也希望输入字段显示所选的周范围 – 这是我最终做的事情（基本上使用altField来存储所选日期，但在输入字段中显示格式化的周范围，使用datepicker beforeShow回调替换为实际日期.Coffeescript在下面; gist可以在这里找到： https ：//gist.github.com/2048010
weekchooser = -> $('#datepicker').datepicker({ dateFormat: "M d, yy", altFormat: "M d, yy", altField: "#actualdate", selectWeek: true, firstDay: 1, showOtherMonths: true, selectOtherMonths: true, beforeShow: -> $('#datepicker').val($('#actualdate').val()) onClose: (date) -> reformatWeek(date) this.blur() }).click -> currentDay = $('.ui-datepicker-current-day') currentDay.siblings().find('a').addClass('ui-state-active') calendarTR = $('.ui-datepicker .ui-datepicker-calendar tr'); calendarTR.live 'mousemove', (event) -> $(this).find('td a').addClass('ui-state-hover'); calendarTR.live 'mouseleave', (event) -> $(this).find('td a').removeClass('ui-state-hover'); reformatWeek = (dateText) -> $('#datepicker').datepicker('refresh') current = parseInt($('.ui-datepicker-current-day').find('a').html()) weekstart = parseInt($('.ui-datepicker-current-day').siblings().find('a').first().html()) weekend = parseInt($('.ui-datepicker-current-day').siblings().find('a').last().html()) pattern = /// ^([a-zA-Z]+)\s+([0-9]{1,2})(,.*) /// [month, day, year] = dateText.match(pattern)[1..3] date = if weekstart > current first_month = relativeMonth(month, -1) "#{first_month} #{weekstart} - #{month} #{weekend}#{year}" else if weekend < current last_month = relativeMonth(month, 1) "#{month} #{weekstart} - #{last_month} #{weekend}#{year}" else "#{month} #{weekstart} - #{weekend}#{year}" $('#datepicker').val( date ) relativeMonth = (month, c) -> monthArray = $('#datepicker').datepicker('option', "monthNamesShort") index = monthArray.indexOf(month) if c > 0 return if index + c > monthArray.length - 1 then monthArray[0] else monthArray[index + c] else return if index + c < 0 then monthArray[monthArray.length - 1] else monthArray[index + c]
我已经根据最佳答案创建了一个jQuery插件。 在https://github.com/Prezent/jquery-weekpicker或通过Bower获取。 用法示例：
$('#selector').weekpicker({ startField: '#date-start', endField: '#date-end' });
您可以在下面的链接中查看已回答的问题
如何使用jQuery UI Calendar / Date PIcker一周而不是一天？
$(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'); });
}）;
不使用多个选择器/最后jquery.ui。 试试这个小改写：
jQuery(function() { var startDate; // closure var endDate; var baseAttachHandler = jQuery.datepicker._attachHandlers; jQuery.datepicker._attachHandlers = function(inst) { baseAttachHandler.apply(this, [inst]); var element_data = jQuery._data(inst.dpDiv.get(0)); var ori_handler_mouseover = element_data.events.mouseover[0].handler; var ori_handler_mouseout = element_data.events.mouseout[0].handler; // remove handlers inst.dpDiv.undelegate("button, .ui-datepicker-prev, .ui-datepicker-next, .ui-datepicker-calendar td a", 'mouseover'); inst.dpDiv.undelegate("button, .ui-datepicker-prev, .ui-datepicker-next, .ui-datepicker-calendar td a", 'mouseout'); inst.dpDiv.undelegate("button, .ui-datepicker-prev, .ui-datepicker-next", 'mouseover'); inst.dpDiv.undelegate("button, .ui-datepicker-prev, .ui-datepicker-next", 'mouseout'); inst.dpDiv.find(".ui-datepicker-calendar tr").unbind('mouseover'); inst.dpDiv.find(".ui-datepicker-calendar tr").unbind('mouseout'); // attach proper ones if (this._get(inst, "weekSelector")) { inst.dpDiv.delegate("button, .ui-datepicker-prev, .ui-datepicker-next", 'mouseover', ori_handler_mouseover); inst.dpDiv.delegate("button, .ui-datepicker-prev, .ui-datepicker-next", 'mouseout', ori_handler_mouseout); inst.dpDiv.find(".ui-datepicker-calendar tr").bind('mouseover', function() { jQuery(this).find('td a').addClass('ui-state-hover'); }); inst.dpDiv.find(".ui-datepicker-calendar tr").bind('mouseout', function() { jQuery(this).find('td a').removeClass('ui-state-hover'); }); } else { inst.dpDiv.delegate("button, .ui-datepicker-prev, .ui-datepicker-next, .ui-datepicker-calendar td a", 'mouseover', ori_handler_mouseover); inst.dpDiv.delegate("button, .ui-datepicker-prev, .ui-datepicker-next, .ui-datepicker-calendar td a", 'mouseout', ori_handler_mouseout); } }; jQuery.datepicker.calcWeekBoundaries = function () { var date = jQuery(this).datepicker('getDate'); if (date) { var tmp = date.getDay(); if (tmp == 0) { // starting with monday, i'm italian ;-) endDate = date; startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - 6); } else { startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - tmp + 1); endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - tmp + 7); } } }; jQuery("#yourcontrol").datepicker( jQuery.extend({}, jQuery.datepicker.regional["yourlanguage"], { showOtherMonths: true , selectOtherMonths: true , changeMonth: true , changeYear: true , onSelect: function(dateText, inst) { if (jQuery.datepicker._get(inst, "weekSelector")) { jQuery.datepicker.calcWeekBoundaries.apply(this, []); jQuery(this).datepicker('setDate', startDate); } inst.input.trigger("change"); } , beforeShowDay: function(date) { var inst = jQuery.data(this, "datepicker"); var cssClass = ''; if (jQuery.datepicker._get(inst, "weekSelector") && date) { if(date >= startDate && date <= endDate) { cssClass = 'ui-state-active'; } } return [true, cssClass]; } , beforeShow: function(input, inst) { jQuery.datepicker.calcWeekBoundaries.apply(this, []); } , weekSelector: true // the magic is here }) ); });