如何更改默認突出顯示「今日」datepicker日期

Question

我使用datepicker在兩個日期字段（從日期和日期）中選擇日期。

在這些默認突出顯示的日期是今天的日期。我需要將默認突出顯示的日期更改爲第二個日期選擇器中的某一天。 （今天+ 8天爲例）。

我該如何正確地做到這一點？

以下是我datepickers，

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

感謝。

---------------------------------- Update ----------- ------------------------------------

繼Michael的屏幕截圖後，

我把下面

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

你可以看到仍然是21天（今天）是突出和23接壤帶黑線。我需要看23喜歡21喜照明。無需強調21

Answer 1

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

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

編輯：當前日期將始終被強調爲日期選擇器的一部分。沒有選項可以關閉此功能。這是爲了向用戶明確「今天」是什麼。但是你可以重寫這個圖形外觀W /一些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層日期選擇器的方法來有條件地使用新設置爲「今天」時代，而不是一個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

我是不滿意的用戶界面的核心是如何顯示與defaultDate那個脆弱的邊界和所有。經過多次試驗和錯誤之後，我在第二個datepicker中添加了一個焦點方法，並使用setDate方法。

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

這會給你選定的日期與基於主題的背景色，今天也將保留它的背景的日期選擇器打開時。這裏唯一的缺點是，如果您沒有結束從日期選擇器中選擇日期，則必須重新進入並清除輸入字段。

似乎有點散列，因爲我通常不喜歡使用焦點方法，但我堅持使用它。

Answer 4

這是在jQuery的ui.js

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

Answer 5

使用ONSELECT選項_generateHTML在不斷變化的變量可能。它應該是這樣的：

$('#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; 
 
      } 
 
     } 
 
    } 
 
}