Question

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

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

我该如何正确地做到这一点？

以下是我的日期选择，

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

感谢。

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

继迈克尔的屏幕截图后，

Calender for two days after (today+2 days)

我提出以下内容，

$( "#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不完整。您需要为其他情况进行覆盖，例如：悬停状态。

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个datepicker方法，有条件地使用“今天”日期的新设置而不是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 Core如何使用该脆弱边框显示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;
}

Demo 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;
}

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

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

6 个答案: