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

Jquery 如何更改突出显示的默认值";“今天”;日期选择器中的日期,jquery,datepicker,Jquery,Datepicker,我使用datepicker在两个日期字段(from date和to date)中选择日期 其中,突出显示的默认日期为今天日期。我需要在第二个日期选择器中将默认突出显示的日期更改为其他日期。(例如今天+8天) 如何才能正确地执行此操作 以下是我的约会选择者 $(function() { $( "#datepicker" ).datepicker(); $( "#datepicker" ).datepicker("option", "dateFormat", "yy-mm-dd"); // ISO

我使用datepicker在两个日期字段(from date和to date)中选择日期

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

如何才能正确地执行此操作

以下是我的约会选择者

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

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

在Michael的屏幕截图之后

我提出以下建议:

$( "#datepicker2" ).datepicker("option", "defaultDate", +2);
你仍然可以看到21天(今天)被突出显示,23天被黑线包围。我需要看到23看起来像21与高照明。不需要突出显示21

    $( "#datepicker" ).datepicker("option", "defaultDate", +8);
资料来源:

编辑:当前日期将始终作为日期选择器的一部分突出显示。没有关闭此功能的选项。这是为了让用户清楚“今天”是什么。但是,您可以使用某些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;
    }
工作区:


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

对中选定的答案进行小调整

我已经重写了2个datepicker方法,有条件地为“今天”日期使用新设置,而不是
new date()
。新设置称为
localToday

重写
$.datepicker.\u gotoday
$.datepicker.\u generateHTML
如下所示:

$.datepicker._gotoToday = function(id) {
    /* ... */
    var date = inst.settings.localToday || new Date()
    /* ... */
}

$.datepicker._generateHTML = function(inst) {
    /* ... */
    tempDate = inst.settings.localToday || new Date()
    /* ... */
}

下面是一个示例,显示了完整的代码和用法:我对UI核心如何显示带有脆弱边框的defaultDate以及所有内容感到不满意。经过多次尝试和错误,我在第二个日期选择器中添加了一个focus方法,并使用了setDate方法

$('#datepicker2').datepicker().focus(function(){
   $(this).datepicker('setDate',+2);
});
这将为您提供基于主题的背景颜色的选定日期,并且今天在日期选择器打开时也将保留其背景。这里唯一的缺点是,如果没有从日期选择器中选择日期,则必须返回并清除输入字段


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

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

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

使用onSelect选项。应该是这样的:

$.datepicker._gotoToday = function(id) {
    /* ... */
    var date = inst.settings.localToday || new Date()
    /* ... */
}

$.datepicker._generateHTML = function(inst) {
    /* ... */
    tempDate = inst.settings.localToday || new Date()
    /* ... */
}
$('#datepickerID')。日期选择器({
onSelect:函数(日期文本,inst){
$('ui datepicker div').addClass(“日历图片”);
},
showButtonPanel:是的,
gotoCurrent:对
});
#日期选择器ID{
&.日历图片{
.ui日期选择器今天{
a{
背景:#f6f6f6;
边框:1px实心#C5C5;
颜色:#4545;
}
}
}

}
突出显示
defaultDate
的另一个解决方案是重写与所选
defaultDate
对应的CSS类:

.ui-datepicker td.ui-datepicker-days-cell-over a {
    background: #7ca600;
}
演示JSFIDLE:(突出显示今天的

当然,您可以将其与组合,以仅突出显示
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;
}

演示JSFIDLE:(仅突出显示
defaultDate

可能重复:您需要更改开始日期,还是根据用户选择的开始日期更改结束日期?设置默认日期选项将突出显示您想要的日期这很好。但突出显示的日期仍然是今天的日期。今天+8的日期以黑线为界。我需要将默认选择的日期从今天更改为今天+8。你能发布一些它正在做什么和你想要它做什么的截图吗。“我认为你实际上问的问题有点混乱。@MichaelMarr我试着在jQuery中这样做,结果得到了与你一样的css。这个答案涉及到深入的分析!在“onSelect”中定义了一个函数,在选择日期时将调用该函数。在选择某个日期之后,我为datepicer的包装器添加了类。然后使用css/sass更改链接的样式