jQuery 如何在日期选择器中更改默认突出显示的“今天”日期
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15005263/
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
How to change default highlighted "today" date in datepicker
提问by Chamith Malinda
I'm using datepicker for selecting dates in two date fields (from date and to date).
我正在使用 datepicker 在两个日期字段中选择日期（从日期到日期）。
In those, the default highlighted date is today date. I need to change the default highlighted date to some other day in the second datepicker. (as a example today + 8 days).
在那些中，默认突出显示的日期是今天的日期。我需要在第二个日期选择器中将默认突出显示的日期更改为其他日期。（例如今天 + 8 天）。
How can I do this correctly ?
我怎样才能正确地做到这一点？
following are my datepickers,
以下是我的日期选择器，
$(function() {
$( "#datepicker" ).datepicker();
$( "#datepicker" ).datepicker("option", "dateFormat", "yy-mm-dd"); // ISO 8601
$( "#datepicker2" ).datepicker();
$( "#datepicker2" ).datepicker("option", "dateFormat", "yy-mm-dd");
});
Thanks.
谢谢。
---------------------------------- Update -----------------------------------------------
- - - - - - - - - - - - - - - - - 更新 - - - - - - - - --------------------------------
Following the screen shot for Michael,
在迈克尔的屏幕截图之后，
I put the following,
我提出以下，
$( "#datepicker2" ).datepicker("option", "defaultDate", +2);
You can see still the 21 day (today) is Highlighting and 23 is bordered with black line. I need see 23 looks like 21 with hi lighting. No need to highlight 21.
您仍然可以看到第 21 天（今天）是突出显示的，而第 23 天是黑色边框。我需要看到 23 看起来像 21 与 hi 照明。无需强调 21。
回答by Michael Marr
$( "#datepicker" ).datepicker("option", "defaultDate", +8);
Source: http://api.jqueryui.com/datepicker/#option-defaultDate
来源：http: //api.jqueryui.com/datepicker/#option-defaultDate
EDIT: The current date will always be highlighted as part of the datepicker. There is no option to turn off this feature. It is to make clear to the user what "today" is. You can however override the graphical appearance of this w/ some CSS:
编辑：当前日期将始终作为日期选择器的一部分突出显示。没有关闭此功能的选项。就是让用户清楚什么是“今天”。但是，您可以使用一些 CSS 覆盖此图形的外观：
.ui-datepicker-today a.ui-state-highlight {
border-color: #d3d3d3;
background: #e6e6e6 url(/themeroller/images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;;
color: #555555;
}
.ui-datepicker-today.ui-datepicker-current-day a.ui-state-highlight {
border-color: #aaaaaa;
background: #ffffff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x;
color: #212121;
}
Working jsfiddle: http://jsfiddle.net/EpWud/
工作 jsfiddle：http: //jsfiddle.net/EpWud/
This assumes you're using the default theme - but you can do this same practice for any theme. Just override the styles like the code above. This CSS is incomplete, however. You'll need to make overrides for other cases, like the :hover state.
这假设您使用的是默认主题 - 但您可以对任何主题执行相同的练习。只需像上面的代码一样覆盖样式即可。然而，这个 CSS 是不完整的。您需要为其他情况进行覆盖，例如 :hover 状态。
回答by Cory Danielson
A small tweak to the selected answer in jQuery UI DatePicker change highlighted "today" date
对jQuery UI DatePicker 中所选答案的小调整突出显示“今天”日期
// Get users 'today' date
var localToday = new Date();
localToday.setDate(tomorrow.getDate()+1); // tomorrow
// Pass the today date to datepicker
$( "#datepicker" ).datepicker({
showButtonPanel: true,
localToday: localToday // This option determines the highlighted today date
});
I've overridden 2 datepicker methods to conditionally use a new setting for the "today" date instead of a new Date(). The new setting is called localToday.
我已经覆盖了 2 个 datepicker 方法来有条件地使用“今天”日期的新设置而不是new Date(). 新设置称为localToday。
Override $.datepicker._gotoTodayand $.datepicker._generateHTMLlike this:
覆盖$.datepicker._gotoToday并$.datepicker._generateHTML像这样：
$.datepicker._gotoToday = function(id) {
/* ... */
var date = inst.settings.localToday || new Date()
/* ... */
}
$.datepicker._generateHTML = function(inst) {
/* ... */
tempDate = inst.settings.localToday || new Date()
/* ... */
}
Here's a demowhich shows the full code and usage: http://jsfiddle.net/NAzz7/5/
这是一个演示，显示了完整的代码和用法：http: //jsfiddle.net/NAzz7/5/
回答by jdp
I wasn't happy with how the UI Core displays the defaultDate with that flimsy border and all. After much trial and error, I added a focus method to the second datepicker and used the setDate method.
我对 UI 核心如何显示带有脆弱边框和所有内容的 defaultDate 不满意。经过多次反复试验，我向第二个日期选择器添加了一个焦点方法并使用了 setDate 方法。
$('#datepicker2').datepicker().focus(function(){
$(this).datepicker('setDate',+2);
});
This will give you the selected date with a background color based on the theme and today will also retain it's background when the datepicker opens. The only downside here is if you don't wind up selecting a date from the datepicker, you've got to go back in and clear the input field.
这将为您提供具有基于主题的背景颜色的选定日期，并且当日期选择器打开时，今天也将保留它的背景。这里唯一的缺点是，如果您没有从日期选择器中选择日期，则必须返回并清除输入字段。
Seems like a bit of a hash as I generally don't like using the focus method but I'm sticking with it.
看起来有点像散列，因为我通常不喜欢使用 focus 方法，但我坚持使用它。
回答by Greg Ford
This is possible by changing the variable under _generateHTML in jquery-ui.js
这可以通过更改 jquery-ui.js 中 _generateHTML 下的变量来实现
today = this._daylightSavingAdjust(
new Date("Your Date Here") ), // clear time
回答by 0smir
Use onSelect option. It should looks like this:
使用 onSelect 选项。它应该是这样的：
$('#datepickerID').datepicker({
onSelect: function(dateText, inst) {
$('#ui-datepicker-div').addClass("calendar-piced");
},
showButtonPanel: true,
gotoCurrent: true
});#datepickerID{
&.calendar-piced{
.ui-datepicker-today{
a{
background: #f6f6f6;
border: 1px solid #c5c5c5;
color: #454545;
}
}
}
}回答by Pierre
Another solution to highlight the defaultDateis to override a CSS class which corresponds to the chosen defaultDate:
另一个突出显示 的解决方案defaultDate是覆盖与所选 相对应的 CSS 类defaultDate：
.ui-datepicker td.ui-datepicker-days-cell-over a {
background: #7ca600;
}
Demo jsfiddle: http://jsfiddle.net/0vjadze4/(highlight both todayanddefaultDate)
演示 jsfiddle：http: //jsfiddle.net/0vjadze4/（突出显示today和defaultDate）
Of course, you can combine that with the answer provided by Mickael, to highlight only defaultDate:`
当然，您可以将其与Mickael 提供的答案结合起来，仅突出显示defaultDate：`
.ui-datepicker td.ui-datepicker-days-cell-over a {
background: #7ca600;
}
.ui-datepicker-today a.ui-state-highlight {
border-color: #d3d3d3;
background: #e6e6e6 url(/themeroller/images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;;
color: #555555;
}
.ui-datepicker-today.ui-datepicker-current-day a.ui-state-highlight {
border-color: #aaaaaa;
background: #ffffff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x;
color: #212121;
}
Demo jsfiddle: http://jsfiddle.net/43svpe80/1/(highlight only defaultDate)
演示 jsfiddle：http: //jsfiddle.net/43svpe80/1/（仅突出显示defaultDate）
