Как изменить значение по умолчанию "сегодняшняя" дата в 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");
});
Спасибо.
---------------------------------- Обновление ------------ -----------------------------------
Следуя снимку экрана для Майкла,
![Calender for two days after (today+2 days)]()
Я ставлю следующее,
$( "#datepicker2" ).datepicker("option", "defaultDate", +2);
Вы можете видеть, что 21 день (сегодня) - это выделение, а 23 - черная линия. Мне нужно, чтобы 23 выглядели как 21 с подсветкой. Не нужно выделять 21.
Ответы
Ответ 1
$( "#datepicker" ).datepicker("option", "defaultDate", +8);
Источник: http://api.jqueryui.com/datepicker/#option-defaultDate
EDIT: текущая дата всегда будет выделена как часть даты. Невозможно отключить эту функцию. Для пользователя ясно, что такое "сегодня". Однако вы можете переопределить графический вид этого w/some 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.
Ответ 2
Небольшое исправление выбранного ответа в jQuery UI DatePicker change подсвечивается "сегодня" дата
// 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()
/* ... */
}
Здесь demo, который показывает полный код и использование: http://jsfiddle.net/NAzz7/5/
Ответ 3
Я не был доволен тем, как UI Core отображает defaultDate с этой неудобной границей и всеми. После долгих проб и ошибок, я добавил метод фокуса ко второму datepicker и использовал метод setDate.
$('#datepicker2').datepicker().focus(function(){
$(this).datepicker('setDate',+2);
});
Это даст вам выбранную дату с фоновым цветом, основанным на теме, и сегодня также сохранит ее фон при открытии datepicker. Единственным недостатком здесь является то, что если вы не завершаете выбор даты с datepicker, вам нужно вернуться и очистить поле ввода.
Похоже на хэш, поскольку мне обычно не нравится использовать метод фокуса, но я придерживаюсь его.
Ответ 4
Это возможно, изменив переменную в _generateHTML в jquery-ui.js
today = this._daylightSavingAdjust(
new Date("Your Date Here") ), // clear time
Ответ 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;
}
}
}
}