4

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

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

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

以下是我的日期选择器，

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

谢谢。

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

在迈克尔的屏幕截图之后，

后两天日历（今天+2天）

我把以下，

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

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

4

6 回答 6

5 
    $( "#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 状态。

于 2013-02-21T14:56:29.557 回答
1

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

我已经覆盖了 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()
    /* ... */
}

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

于 2015-04-28T01:05:43.157 回答
0

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

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

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

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

于 2017-05-25T18:55:17.000 回答
0

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

于 2017-10-19T12:25:21.087 回答
0

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

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

演示 jsfiddle： http: //jsfiddle.net/0vjadze4/（突出显示today 和 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;
}

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

于 2018-06-12T14:01:20.507 回答
0

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

today = this._daylightSavingAdjust(
                new Date("Your Date Here") ), // clear time
于 2017-06-26T20:59:30.993 回答