Дата по умолчанию для средства выбора даты jQuery-UI - PullRequest
50 голосов
/ 30 сентября 2010

У меня проблема с датщиком jQuery-UI, я искал и искал, но не нашел ответа. У меня есть следующий код:

<script type="text/javascript">
$(function() {               
    $("#birthdate" ).datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: '1920:2010',
        dateFormat : 'dd-mm-yy',
        defaultDate: '01-01-1985'
    });
});
</script>

Я хочу, чтобы, когда пользователь нажимал на входе #birthdate текущую дату, выбранную как 01-01-1985, теперь она устанавливала текущую дату.

Ответы [ 7 ]

48 голосов
/ 30 сентября 2010

Попробуйте вместо этого передать объект Date. Я не понимаю, почему он не работает в формате, который вы ввели:

<script type="text/javascript">
$(function() {               
    $("#birthdate" ).datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: '1920:2010',
        dateFormat : 'dd-mm-yy',
        defaultDate: new Date(1985, 00, 01)
    });
});
</script>

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

Укажите либо фактическую дату через Объект Date или в виде строки в текущая датаформат или число дней с сегодняшнего дня (например, +7) или строка значений и периодов ('y' для лет, 'm' на месяцы, 'w' на недели, 'd' на дни, например '+ 1m + 7d') или ноль для сегодня.

13 голосов
/ 30 сентября 2010

Вы можете попробовать использовать код, приведенный ниже.

Дата по умолчанию станет датой, которую вы ищете.

$('#birthdate').datepicker("setDate", new Date(1985,01,01) );
11 голосов
/ 30 сентября 2010

Видя, что:

Установите дату, которая будет выделена при первом открытии, если поле пустое.Укажите либо фактическую дату через объект Date, либо в виде строки в текущем dateFormat, либо количество дней с сегодняшнего дня (например, +7), либо строку значений и периодов («y» для лет, «m» для месяцев,'w' для недель, 'd' для дней, например, "+ 1m + 7d"), или ноль для сегодняшнего дня.

Если текущий dateFormat не распознан, вы все равно можете использовать объект Dateиспользование new Date(year, month, day)

В вашем примере это должно работать (я не проверял):

<script type="text/javascript">
$(function() {               
    $("#birthdate" ).datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: '1920:2010',
        dateFormat : 'dd-mm-yy',
        defaultDate: new Date(1985,01,01)
    });
});
</script>
1 голос
/ 11 марта 2016

Jquery Datepicker defaultDate ТОЛЬКО установить дату по умолчанию, которую вы выбрали в календаре, который появляется, когда вы щелкаете по полю.Если вы хотите, чтобы по умолчанию дата вводилась в поле ввода до того, как пользователь щелкнет по полю, вы должны указать val () для этого поля.Как то так:

$("#searchDateFrom").datepicker({ defaultDate: "-1y -1m -6d" });
$("#searchDateFrom").val((date.getMonth()) + '/' + (date.getDate() - 6) + '/' + (date.getFullYear() - 1));
1 голос
/ 28 апреля 2015

Если вы хотите обновить выделенный день на другой день на основе некоторого времени сервера, вы можете переопределить код выбора даты, чтобы разрешить новую настраиваемую опцию с именем localToday или как хотите, чтобы она называлась.

Небольшая настройка выбранного ответа в 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 метода выбора даты, чтобы условно использовать новую настройку для даты «сегодня» вместо 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/

1 голос
/ 29 июля 2014

jQuery UI Datepicker закодирован, чтобы всегда выделять локальную дату пользователя, используя класс ui-state-highlight. Нет встроенной опции, чтобы изменить это.

Один метод, описанный аналогично в других ответах на связанные вопросы, состоит в переопределении CSS для этого класса, чтобы он соответствовал ui-state-default вашей темы, например:

.ui-state-highlight {
    border: 1px solid #d3d3d3;
    background: #e6e6e6 url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
    color: #555555;
}

Однако это не очень полезно, если вы используете динамические темы или если вы хотите выделить другой день (например, чтобы «сегодня» было основано на часах вашего сервера, а не на клиентских часах).

Альтернативный подход - переопределить прототип средства выбора даты, который отвечает за выделение текущего дня.

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


Если ваша цель состоит в том, чтобы вообще не выделять текущий день:

// copy existing _generateHTML method
var _generateHTML = jQuery.datepicker.constructor.prototype._generateHTML;
// remove the string "ui-state-highlight"
_generateHtml.toString().replace(' ui-state-highlight', '');
// and replace the prototype method
eval('jQuery.datepicker.constructor.prototype._generateHTML = ' + _generateHTML);

Это изменяет соответствующий код (не минимизированный для удобства чтения) с:

[...](printDate.getTime() == today.getTime() ? ' ui-state-highlight' : '') + [...]

до

[...](printDate.getTime() == today.getTime() ? '' : '') + [...]

Если ваша цель состоит в том, чтобы изменить определение datepicker «сегодня»:

var useMyDateNotYours = '07/28/2014';
// copy existing _generateHTML method
var _generateHTML = jQuery.datepicker.constructor.prototype._generateHTML;
// set "today" to your own Date()-compatible date
_generateHTML.toString().replace('new Date,', 'new Date(useMyDateNotYours),');
// and replace the prototype method
eval('jQuery.datepicker.constructor.prototype._generateHTML = ' + _generateHTML);

Это изменяет соответствующий код (не минимизированный для удобства чтения) с:

[...]var today = new Date();[...]

до

[...]var today = new Date(useMyDateNotYours);[...]
// Note that in the minimized version, the line above take the form `L=new Date,`
// (part of a list of variable declarations, and Date is instantiated without parenthesis)

Вместо useMyDateNotYours вы, конечно, также можете вместо этого ввести строку, функцию или что-то еще, что вам подходит.

0 голосов
/ 30 ноября 2017
$("#birthdate" ).datepicker("setDate", new Date(1985,01,01))
...