我可以在标准的 Jquery UI 日期选择器中突出显示整周吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2224135/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I highlight an entire week in the standard Jquery UI date picker?
提问by MikeN
Can I highlight an entire week in the standard Jquery UI date picker?
我可以在标准的 Jquery UI 日期选择器中突出显示整周吗？
回答by AntFalco
I know this post is quite old but I just found this code on another site and thought it might help.
我知道这篇文章很旧，但我刚刚在另一个网站上找到了这段代码，并认为它可能会有所帮助。
Source code - from this post:
源代码 - 来自这篇文章：
<!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
>
>
回答by Jeremy
I wrote a solution to this, which highlights the week. It will still pick the date selected, but that is fine for my purposes. #week is the input box that has the datepicker attached.
我为此写了一个解决方案，突出显示了本周。它仍然会选择选择的日期，但这对我的目的来说很好。#week 是附有日期选择器的输入框。
$('#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');
});
}
});
}
回答by Joseph
回答by cardonator
AntFalco's answer is great, however it doesn't work well if you need to do what I did. I needed a way to select a week and have the first day of the week populate into an input box, a click on which generated the datepicker. Here is the code I used to accomplish this:
AntFalco 的回答很好，但是如果你需要做我所做的事情，它就不能很好地工作。我需要一种方法来选择一周并将一周的第一天填充到输入框中，单击生成日期选择器。这是我用来完成此操作的代码：
<!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.9.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
var startDate;
var endDate;
var selectCurrentWeek = function() {
window.setTimeout(function () {
$('#ui-datepicker-div').find('.ui-datepicker-current-day a').addClass('ui-state-active')
}, 1);
}
$('.datepicker').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;
$(this).attr("value",$.datepicker.formatDate( dateFormat, startDate, 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();
}
});
$('#ui-datepicker-div .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
$('#ui-datepicker-div .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});
</script>
</head>
<body>
<input type="text" id="from_date" name="from_date" class="datepicker" />
<input type="text" id="to_date" name="to_date" class="datepicker" />
</body>
</html>
This also has the side effect of working for multiple input values as well. This chunk of code is by far the most useful if you need some sort of "week" selector. There is very little code so making small modifications to test is quite easy. Also, it works fine with minDate/maxDate functions.
这也有处理多个输入值的副作用。如果您需要某种“周”选择器，这段代码是迄今为止最有用的。代码很少，因此对测试进行小的修改非常容易。此外，它适用于 minDate/maxDate 函数。
回答by Sander Marechal
I have created a jQuery plugin based on the top answer. Get it at https://github.com/Prezent/jquery-weekpickeror through Bower. Example usage:
我根据最佳答案创建了一个 jQuery 插件。在https://github.com/Prezent/jquery-weekpicker或通过 Bower获取。用法示例：
$('#selector').weekpicker({
startField: '#date-start',
endField: '#date-end'
});
回答by Ryley
This is incredibly late, but I was searching for the same solution and could only find reference to these types of answers (i.e. for a different date picker). In my case, I'm using it inline, so that's how this code works. If you want it to pop-up with a week highlighted, you would have to modify. Here is something that works:
这太晚了，但我正在寻找相同的解决方案，只能找到对这些类型答案的引用（即不同的日期选择器）。就我而言，我是内联使用它的，所以这就是这段代码的工作原理。如果您希望它以突出显示的一周弹出，则必须进行修改。这是有效的方法：
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,''];
}
});
Then define some CSS (I haven't really done this part myself, so this is ugly):
然后定义一些 CSS（我自己还没有真正做过这部分，所以这很难看）：
#inlineDIVdatepicker .week-highlight a {
background:none;
background-color:yellow;
}
回答by frictionlesspulley
The script highlights a week starting from the selected date.
Checkout a working example here: http://jsfiddle.net/frictionless/W5GMg/
该脚本突出显示从所选日期开始的一周。
在此处查看一个工作示例：http: //jsfiddle.net/frictionless/W5GMg/
Logic:
逻辑：
beforeShowDay: is run for each date in the calendar displayed. It is called at the time of display of the calendar and when a particular date is selected.
beforeShowDay：为显示的日历中的每个日期运行。在显示日历时和选择特定日期时调用它。
onSelect: function captures the selected week starting from the selectedDay and beforeShowDay renders the selected week
onSelect：函数从 selectedDay 开始捕获所选周，beforeShowDay 呈现所选周
Here is a snippet which works with Jquery 1.5.1 and JQuery UI 1.8.1
这是一个适用于 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());
}
}
});
});
回答by EpicVoyage
EDIT: Frictionless's answer is great, except that the question was of how to select the entire week (not the 6 days following whatever is clicked on). It was recommended that I copy my patch here.
编辑： Frictionless 的回答很好，除了问题是如何选择整周（不是点击后的 6 天）。建议我在这里复制我的补丁。
This is a simplified version of what I am using on my site. Note that the week picker is pegged to a <span> tag in order to show the first and last days of the week. This necessitates a trigger button which references /images/schedule.png.
这是我在我的网站上使用的简化版本。请注意，周选择器与 <span> 标记挂钩，以显示一周的第一天和最后一天。这需要一个引用 /images/schedule.png 的触发按钮。
Change as required:
根据需要更改：
<style type="text/css">
.highlighted-week a.ui-state-default{
background: #FFFFFF;
border: 1px solid #AAAAAA;
color: #212121;
font-weight: normal
}
</style>
<!-- include jquery and jquery-ui here -->
<script type="text/javascript">
// This $(function()) block could be moved to another file. It's what I did.
$(function() {
var internal = 0;
if (typeof SVG == 'undefined') SVG = {};
if (typeof SVG.Weekpicker == 'undefined') SVG.Weekpicker = {};
SVG.Weekpicker.GetWeek = function(_selectedDate) {
var week = new Array();
/* ***NOTE*** This is the only line required to "fix" Frictionless' code. */
_selectedDate.setDate(_selectedDate.getDate()-_selectedDate.getDay());
for (i = 0; i < 7; i++) {
var tempDate = new Date(_selectedDate.getTime());
tempDate.setDate(tempDate.getDate() + i);
week.push(tempDate.getTime());
}
return week;
};
SVG.Weekpicker.Init = function(selector) {
var elem = $(selector);
var insert = $('<input type="hidden" name="weekpicker'+(++internal)+'" value="'+elem.html()+'" />');
SVG.Weekpicker._dates = SVG.Weekpicker.GetWeek(new Date());
insert = insert.insertAfter(elem);
insert.datepicker({
beforeShowDay: function(_date) {
if ($.inArray(_date.getTime(), SVG.Weekpicker._dates) >= 0)
return [true, "highlighted-week", "Week Range"];
return [true, "", ""];
},
onSelect: function(_selectedDate) {
var _date = new Date(_selectedDate);
SVG.Weekpicker._dates = SVG.Weekpicker.GetWeek(_date);
var start = new Date(SVG.Weekpicker._dates[0]);
var end = new Date(SVG.Weekpicker._dates[6]);
$(elem).html(($.datepicker.formatDate('MM d, yy', start, '')+' — '+$.datepicker.formatDate('MM d, yy', end, ''))+' ');
},
showOn: "button",
buttonImage: "/images/schedule.png",
buttonImageOnly: false,
showAnim: "slideDown",
});
};
});
$(document).ready(function() {
// Attach a week picker to the weekpicker <span> tag.
SVG.Weekpicker.Init("#weekpicker");
}
</script>
<body>
<span id="weekpicker"></span>
</body>
回答by mrampton
I was looking to do the same thing but also wanted the input field to display the selected week range -- here's what I ended up doing (basically use the altField to store the selected date, but display a formatted week range in the input field that is replaced by the actual date using the datepicker beforeShow callback. Coffeescript is below; gist can be found here: https://gist.github.com/2048010
我想做同样的事情，但也希望输入字段显示选定的周范围 - 这就是我最终做的事情（基本上使用 altField 来存储选定的日期，但在输入字段中显示格式化的周范围使用 datepicker beforeShow 回调替换为实际日期。Coffeescript 在下面；要点可以在这里找到：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]
回答by Ricket
You may be able to follow the suggestions in this discussion to achieve your week selection feature: http://code.google.com/p/jquery-datepicker/issues/detail?id=13
您可以按照此讨论中的建议来实现您的周选择功能：http: //code.google.com/p/jquery-datepicker/issues/detail?id=13
Unfortunately, though, it looks like the jQuery datepicker can't handle picking an entire week. It'll need to be custom coded.
但不幸的是，jQuery datepicker 似乎无法处理整周的选择。它需要自定义编码。
![jQuery 选择 input[type=image] 兄弟姐妹](/res/img/loading.gif)