如何在日期选择器中更改默认突出显示的“今天”日期

Question

我正在使用 datepicker 在两个日期字段（从日期和到日期）中选择日期。

在这些中，默认突出显示的日期是今天的日期。我需要在第二个日期选择器中将默认突出显示的日期更改为其他日期。 （例如今天 + 8 天）。

我怎样才能正确地做到这一点？

以下是我的日期选择器，

$(function() {
$( "#datepicker" ).datepicker();
$( "#datepicker" ).datepicker("option", "dateFormat", "yy-mm-dd"); // ISO 8601
$( "#datepicker2" ).datepicker();
$( "#datepicker2" ).datepicker("option", "dateFormat", "yy-mm-dd");
});

谢谢。

---------------------- 更新 ------------ ----------------------------------

按照迈克尔的屏幕截图，

我把下面的，

$( "#datepicker2" ).datepicker("option", "defaultDate", +2);

您仍然可以看到第 21 天（今天）是突出显示的，并且 23 以黑线为边界。我需要看到 23 看起来像 21 与高照明。无需强调 21。

Answer 1

    $( "#datepicker" ).datepicker("option", "defaultDate", +8);

来源：http://api.jqueryui.com/datepicker/#option-defaultDate

编辑：当前日期将始终作为日期选择器的一部分突出显示。没有关闭此功能的选项。就是要让用户明白什么是“今天”。但是，您可以使用一些 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;
    }

工作 jsfiddle：http://jsfiddle.net/EpWud/

这假设您使用的是默认主题 - 但您可以对任何主题执行相同的做法。只需像上面的代码一样覆盖样式。然而，这个 CSS 是不完整的。您需要对其他情况进行覆盖，例如 :hover 状态。

Answer 2

对jQuery UI DatePicker change highlighted "today" date中选定答案的小调整

// 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
});

我已经覆盖了 2 个日期选择器方法，以有条件地为“今天”日期使用新设置，而不是 new Date()。新设置称为localToday。

像这样覆盖 $.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()
    /* ... */
}

这是一个demo，它显示了完整的代码和用法：http://jsfiddle.net/NAzz7/5/

Answer 3

我对 UI 核心如何显示带有脆弱边框的 defaultDate 和所有内容不满意。经过多次试验和错误，我在第二个日期选择器中添加了一个焦点方法并使用了 setDate 方法。

$('#datepicker2').datepicker().focus(function(){
   $(this).datepicker('setDate',+2);
});

这将为您提供基于主题背景颜色的选定日期，并且当日期选择器打开时，今天也将保留其背景。唯一的缺点是，如果您最终没有从日期选择器中选择日期，则必须返回并清除输入字段。

看起来有点乱，因为我通常不喜欢使用焦点方法，但我坚持使用它。

Answer 4

这可以通过更改 jquery-ui.js 中 _generateHTML 下的变量来实现

today = this._daylightSavingAdjust(
                new Date("Your Date Here") ), // clear time

Answer 5

使用 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;
            }
        }
    }
}

Answer 6

另一种突出显示defaultDate 的解决方案是覆盖对应于所选defaultDate 的CSS 类：

.ui-datepicker td.ui-datepicker-days-cell-over a {
    background: #7ca600;
}

演示 jsfiddle：http://jsfiddle.net/0vjadze4/（突出显示 today 和 defaultDate）

当然，您可以将其与the answer provided by 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;
}

演示 jsfiddle：http://jsfiddle.net/43svpe80/1/（仅突出显示 defaultDate）