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

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

在那些中，默认突出显示的日期是今天的日期。 我需要在第二个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

编辑：当前日期将始终作为日期选择器的一部分突出显示。 没有选项可以关闭此function。 这是为了向用户说明“今天”是什么。 但是，您可以使用某些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中所选答案的一个小调整突出显示“今天”日期

 // 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/

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

演示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 ）