JQuery DatePicker，如何突出显示当前输入值日期？

JQuery DatePicker, how to highlight current input value date?

提问by BrynJ

I'm using the datepicker control for jquery and all is well except that I cannot get it to highlight the currently selected input value (or the current date for that matter). Even though I have s valid date value in my text input and can get the datepicker to return the correct month / year, I cannot get it to highlight that date on the calendar.

我正在使用 jquery 的 datepicker 控件，一切都很好，只是我无法让它突出显示当前选定的输入值（或当前日期）。即使我的文本输入中有 s 有效日期值并且可以让日期选择器返回正确的月/年，但我无法让它在日历上突出显示该日期。

Here is my code:

这是我的代码：

$('.date_picker').datepicker({ dateFormat: 'dd/mm/yy', duration: '', gotoCurrent: true, defaultDate: -1});

..and here is the stylesheet:

..这里是样式表：

/*datepicker*/
/* Main Style Sheet for jQuery UI date picker */
.ui-datepicker-div, .ui-datepicker-inline, #ui-datepicker-div {
    /*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none;
    font-family: Verdana, Arial, sans-serif;
    background: #ffffff url(images/ffffff_40x100_textures_01_flat_0.png) 0 0 repeat-x;
    font-size: 0.80em;
    border: 4px solid #dddddd;
    width: 15.5em;
    padding: 2.5em .5em .5em .5em;
    position: relative;
}
.ui-datepicker-div, #ui-datepicker-div {
    z-index: 9999; /*must have*/
    display: none;
}
.ui-datepicker-inline {
    float: left;
    display: block;
}
.ui-datepicker-control {
    display: none;
}
.ui-datepicker-current {
    display: none;
}
.ui-datepicker-next, .ui-datepicker-prev {
    position: absolute;
    left: .5em;
    top: .5em;
    background: #e6e6e6 url(images/e6e6e6_40x100_textures_02_glass_75.png) 0 50% repeat-x;
}
.ui-datepicker-next {
    left: 14.6em;
}
.ui-datepicker-next:hover, .ui-datepicker-prev:hover {
    background: #dadada url(images/dadada_40x100_textures_02_glass_75.png) 0 50% repeat-x;
}
.ui-datepicker-next a, .ui-datepicker-prev a {
    text-indent: -999999px;
    width: 1.3em;
    height: 1.4em;
    display: block;
    font-size: 1em;
    background: url(images/888888_7x7_arrow_left.gif) 50% 50% no-repeat;
    border: 1px solid #d3d3d3;
    cursor: pointer;
}
.ui-datepicker-next a {
    background: url(images/888888_7x7_arrow_right.gif) 50% 50% no-repeat;
}
.ui-datepicker-prev a:hover {
    background: url(images/454545_7x7_arrow_left.gif) 50% 50% no-repeat;
}
.ui-datepicker-next a:hover {
    background: url(images/454545_7x7_arrow_right.gif) 50% 50% no-repeat;
}
.ui-datepicker-prev a:active {
    background: url(images/222222_7x7_arrow_left.gif) 50% 50% no-repeat;
}
.ui-datepicker-next a:active {
    background: url(images/222222_7x7_arrow_right.gif) 50% 50% no-repeat;
}
.ui-datepicker-header select {
    border: 1px solid #d3d3d3;
    color: #555555;
    background: #e6e6e6;
    font-size: 1em;
    line-height: 1.4em;
    position: absolute;
    top: .5em;
    margin: 0 !important;
}
.ui-datepicker-header option:focus, .ui-datepicker-header option:hover {
    background: #dadada;
}
.ui-datepicker-header select.ui-datepicker-new-month {
    width: 7em;
    left: 2.2em;
}
.ui-datepicker-header select.ui-datepicker-new-year {
    width: 5em;
    left: 9.4em;
}
table.ui-datepicker {
    width: 15.5em;
    text-align: right;
}
table.ui-datepicker td a {
    padding: .1em .3em .1em 0;
    display: block;
    color: #555555;
    background: #e6e6e6 url(images/e6e6e6_40x100_textures_02_glass_75.png) 0 50% repeat-x;
    cursor: pointer;
    border: 1px solid #ffffff;
}
table.ui-datepicker td a:hover {
    border: 1px solid #999999;
    color: #212121;
    background: #dadada url(images/dadada_40x100_textures_02_glass_75.png) 0 50% repeat-x;
}
table.ui-datepicker td a:active {
    border: 1px solid #dddddd;
    color: #222222;
    background: #ffffff url(images/ffffff_40x100_textures_02_glass_65.png) 0 50% repeat-x;
}
table.ui-datepicker .ui-datepicker-title-row td {
    padding: .3em 0;
    text-align: center;
    font-size: .9em;
    color: #222222;
    text-transform: uppercase;
}
table.ui-datepicker .ui-datepicker-title-row td a {
    color: #222222;
}
.ui-datepicker-cover {
    display: none;
    display/**/: block;
    position: absolute;
    z-index: -1;
    filter: mask();
    top: -4px;
    left: -4px;
    width: 193px;
    height: 200px;
}

I'm using IE7 to test, but I see the same behaviour in Firefox.

我正在使用 IE7 进行测试，但我在 Firefox 中看到了相同的行为。

Any ideas as to the problem?

关于这个问题的任何想法？

回答by Russ Cam

First of all, which browser(s) are you viewing the datepicker in? I have noticed that some colouring of dates/sections within the datepicker look different in IE6compared to later browsers (Firefox 3, Chrome, IE7).

首先，您在哪个浏览器中查看日期选择器？我注意到，与较新的浏览器（Firefox 3、Chrome、IE7）相比，日期选择器中日期/部分的某些颜色在IE6 中看起来有所不同。

For example, IE6 appears to ignore the background colour for weekend days.

例如，IE6 似乎会忽略周末的背景颜色。

The background colour of the currently selected date and today's date are both controlled through CSS. The default CSS for the last datepickeris the main flora style sheet, although I see that there is a new version/stylesheet of the datepicker(I haven't had a proper read yet, I believe it may be a new version) on the jQuerysite this week.

当前选定日期和今天日期的背景颜色都是通过 CSS 控制的。最后一个 datepicker的默认 CSS是主要的 flora 样式表，虽然我看到datepicker有一个新版本/样式表（我还没有正确阅读，我相信它可能是一个新版本）在本周jQuery网站。

The relevant default names of the classes within the stylesheet that you would need to change the background colours for are -

您需要更改背景颜色的样式表中类的相关默认名称是 -

 /* current input value background color */
.ui-datepicker-current-day
{
    background: #83C948
}
/* today's background color */
.ui-datepicker-today 
{
    background: #83C948
}

EDIT:

编辑：

If you are using the old Datepicker as is, then these are the relevant lines in the plugin js file-

如果您按原样使用旧的 Datepicker，那么这些是插件 js 文件中的相关行 -

this._currentClass = 'ui-datepicker-current-day'; 
// The name of the current day marker class


(printDate.getTime() == today.getTime() ? ' ui-datepicker-today' : '')) + '"' + ...
// highlight today (if different)

Therefore, you will either

因此，您要么

• need these CSS classes in your CSS stylesheet to highlight today and currently selected date

• 需要在您的 CSS 样式表中使用这些 CSS 类来突出显示今天和当前选定的日期

or

或者

• you will need to change the names in the plugin js file and use the same names for classes in your CSS stylesheet

• 您需要更改插件 js 文件中的名称，并对 CSS 样式表中的类使用相同的名称

Personally, I would opt for the former as they are they are the commonly known class names.

就个人而言，我会选择前者，因为它们是众所周知的类名。

EDIT 2:

编辑2：

It appears that the new datepickeruses slightly different CSS to colour current selected date and today's date. Whereas the previous version styled the table cell (td) element, the new version styles the anchor (a) element inside the cell.

新的日期选择器似乎使用稍微不同的 CSS 来为当前选定的日期和今天的日期着色。先前版本为表格单元格 ( td) 元素设置样式，而新版本为单元格内的锚 ( a) 元素设置样式。

Using Firebugin Firefox 3 (highly recommended), the CSS to colour today appears to be

在 Firefox 3 中使用Firebug（强烈推荐），今天要着色的 CSS 似乎是

.ui-state-highlight, .ui-widget-content .ui-state-highlight 
{
    background:#FFE45C url(../images/?new=ffe45c&w=1&h=100&f=png&q=100&fltr[]=over|textures/03_highlight_soft.png|0|0|75) repeat-x scroll 50% top;
    border:1px solid #FED22F;
    color:#363636;
}

and for the current selected date in the input, it is

对于输入中当前选定的日期，它是

.ui-state-active, .ui-widget-content .ui-state-active 
{
    background:#FFFFFF url(../images/?new=ffffff&w=1&h=400&f=png&q=100&fltr[]=over|textures/02_glass.png|0|0|65) repeat-x scroll 50% 50%;
    border:1px solid #FBD850;
    color:#EB8F00;
    font-weight:bold;
    outline-color:-moz-use-text-color;
    outline-style:none;
    outline-width:medium;
}

These both come from the jQuery UI CSS Framework

这些都来自jQuery UI CSS 框架

回答by Glenson Atillo Rosos

This is the best solution :

这是最好的解决方案：

input field, select week.

输入字段，选择星期。

https://github.com/Prezent/jquery-weekpicker

https://github.com/Prezent/jquery-weekpicker