Как изменить стандартную выделенную «сегодняшнюю» дату в datepicker

Question

Я использую datepicker для выбора дат в двух полях даты (от даты и до даты).

В тех, по умолчанию выделенная дата - сегодняшняя дата. Мне нужно изменить выделенную по умолчанию дату на другой день во втором datepicker. (как пример сегодня + 8 дней).

Как я могу сделать это правильно?

следующие мои datepickers,

$(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

EDIT: текущая дата всегда будет выделена в рамках DatePicker. Невозможно отключить эту функцию. Для пользователя ясно, что такое «сегодня». Однако вы можете изменить графический вид этого ж/некоторый 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 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.

Override $.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); 
}); 

Это даст вам выбранную дату с цветом фона на основе темы и сегодня также сохранит это фон при открытии DatePicker. Единственным недостатком здесь является то, что если вы не завершаете выбор даты с datepicker, вам нужно вернуться и очистить поле ввода.

Похоже на хэш, поскольку мне обычно не нравится использовать метод фокусировки, но я придерживаюсь его.

Answer 4

Это возможно путем изменения переменной при _generateHTML в Jquery-ui.js

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