Как изменить значение по умолчанию "сегодняшняя" дата в 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.

Ответ 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;
            }
        }
    }
}