JQuery Datepicker - без даты по умолчанию

Question

Я хочу удалить дату по умолчанию в моем JQuery Datepicker.

Я пробую следующий код:

$(this).datepicker({defaultDate: ''});

Но, похоже, это не работает. Сегодняшняя дата по-прежнему выбрана по умолчанию.

Answer 1

Я решил проблему, используя скрытое altField:

<div id="DatePicker"></div>
<input type="hidden" value="" name="Date" id="Date" />

и следующий скрипт:

<script>
    $(function () {

        $('#DatePicker').datepicker({
            altField: '#Date', // ID of the hidden field
            altFormat: 'dd/mm/yy'
        });

        // Remove the style for the default selected day (today)
        $('.ui-datepicker-current-day').removeClass('ui-datepicker-current-day');

        // Reset the current selected day
        $('#Date').val('');
    });
</script>

Затем я использовал скрытое поле #Date в своих процедурах проверки.

Answer 2

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

    $('.calendar').datepicker("setDate", null); // this unsets the datepicker's internal selected date; it still shows a highlight on today's date that looks like a selected date though
    $('.calendar').find(".ui-datepicker-current-day").removeClass("ui-datepicker-current-day"); // this actually removes the highlight

Answer 3

Это на самом деле открытый вопрос с jQuery UI Datepicker . Вот билет на выпуск:

Билет 8159

В основе этой проблемы лежит тот факт, что Datepicker неправильно обрабатывает defaultDate значение null . Из предложенных здесь решений мне нравится j-polfer лучшее, и поэтому я проголосовал за него. Однако это решение работает по той причине, что в метод setDate встроен патч для очистки выбора, если null передается в параметр даты. Но я хотел выяснить , почему Datepicker не отвечал правильно на defaultDate: null в опциях, и поэтому я взглянул на источник.

Я обнаружил, что мне нужно внести три изменения в исходный код Datepicker , чтобы решить эту проблему. Вот изменения, которые я сделал:

1. Метод _getDefaultDate вернул текущую дату, когда параметр defaultDate был нулевым или отсутствовал (это суть проблемы).

Я изменил этот метод из этого ...

    _getDefaultDate: function(inst) {
        return this._restrictMinMax(inst,this._determineDate(inst,this._get(inst, "defaultDate"), new Date()));
    }

к этому ....

_getDefaultDate: function(inst) {
    var def = this._get(inst, "defaultDate");
    return def !== null ? this._restrictMinMax(inst, this._determineDate(inst, def , new Date())): null;
},

2. Метод _setDate устанавливал выбранный день на текущий день, когда значение null было передано в параметр даты. Я изменил строки, чтобы исправить это:

Я изменил эту строку ...

inst.selectedDay = inst.currentDay = newDate.getDate();

к ...

inst.selectedDay = date == null? 0: inst.currentDay = newDate.getDate();

и эта строка ...

this._adjustInstDate(inst);

к ...

if (date != null) {
    this._adjustInstDate(inst);
}

3. Наконец, метод _generateHTML не обработал возвращаемое значение NULL из _getDefaultDate .

Итак, я изменил эту строку ...

    (defaultDate.getTime() === printDate.getTime() && defaultDate.getTime() === selectedDate.getTime()) ?

к ...

(defaultDate != null && (defaultDate.getTime() === printDate.getTime() && defaultDate.getTime() === selectedDate.getTime())) ?

Вот и все. Теперь опция Datepicker defaultDate более интуитивно реагирует на передаваемое значение null или на отсутствие этой опции.

$('#test').datepicker({ altField: '#alt'});  // No date selected
$('#test').datepicker({ altField: '#alt', defaultDate: null});  // No date selected
$('#test').datepicker({ altField: '#alt', defaultDate: 0});  // Today selected
$('#test').datepicker({ altField: '#alt', defaultDate: +1});  // Tomorrow selected
$('#test').datepicker({ altField: '#alt', defaultDate: -1});  // Yesterday selected

Вот демоверсия в JSFIDDLE : Демо Datepicker с defaultDate null

Обратите внимание: Эти изменения не были полностью протестированы, поэтому могут возникнуть другие проблемы, связанные с тем, что метод _getDefaultDate теперь может возвращать ноль. Поэтому сначала проведите собственное тестирование! ;)

Надеюсь, это кому-нибудь поможет! :)

Answer 4

На основании ответов, размещенных здесь, мне удалось сделать что-то, что сработало. Для моих целей у меня был всегда видимый календарь. Если вам требуется это для всплывающего календаря, вы сможете использовать существующий обработчик onSelect, чтобы выполнить нечто подобное при первом его открытии.

$("selector").datepicker(/* options */).find(".ui-state-active").removeClass("ui-state-active");

К счастью, это действительно так просто с последней версией jQuery UI (1.10.2 на момент написания статьи). Кажется, это не мешает правильному функционированию виджета. Единственное предостережение состоит в том, что использование getDate приводит к тому, что обычно было бы выбранной по умолчанию датой.

Для целей моего кода это приемлемо, поскольку мои пользователи не могут продолжить (у них даже нет кнопки продолжения), пока они не нажмут на действительную дату в средстве выбора. Если это не так, то что-то вроде ответ Флориана Пешки должно дать вам то, что вам нужно.

Answer 5

Чтобы открыть диалоговое окно DatePicker, оно должно быть открыто через месяц или год. Я имею в виду, вы хотите отобразить это диалоговое окно и быть пустым? ...

Я думаю, что если вы не хотите передавать какую-либо дату по умолчанию, лучшее, что вы можете сделать, это получить текущую дату с помощью:

$(document).ready(function() {
  $('#datepicker').datepicker();
});

Передача этого не удастся из-за заданной defaultDate, не нулевой, а пустой

$(this).datepicker({defaultDate: ''});

Это то, что будет делать то, что предполагалось в предыдущем коде

$(this).datepicker({defaultDate: null});

но его поведение совпадает с первым блоком кода в этом ответе.

Answer 6

У меня та же проблема с использованием inline datepicker. Плагин добавляет в сегодняшнюю ячейку / тд класс .ui-datepicker-current-day и .ui-state-active. Мое решение состоит в том, чтобы использовать пользовательский класс, такой как .ui-datepicker-selected-day, и реализует beforeShowDay для управления отображением выбранного дня. Примерно так:

$("datepicker").datepicker({
  beforeShowDay: function(date) {
  var dateIso = $.datepicker.formatDate("yy-mm-dd", date);
  var dateSelected = $("input").val();
  var classDate = "";
  if(dateSelected === dateIso){
    return [false,"ui-datepicker-selected-day"];
  }else{
    return [true];
  }
}

Образец CSS, чтобы поместить в «выделение» ячейку:

.ui-widget-content .ui-datepicker-selected-day .ui-state-active{
  background-color: red;
}
+ disable some css from the plugin

Answer 7

Я знаю, что это старый вопрос, и я нашел его, потому что у меня было такое же требование; не отображать дату во вводе (текстовое поле), заставьте пользователя выбрать дату из средства выбора даты.

Наценка (MVC)

<div class="leftContent">
     @Html.TextBox("DateShipOn", Nothing, New With {.class = "DateShipOn", .readonly = "readonly"})
</div>

Вывод HTML:

<div class="leftContent">
    <input id="DateShipOn" class="DateShipOn hasDatepicker" type="text" value="" readonly="readonly" name="DateShipOn">
</div>

Сценарий (в документе готово):

$('.DateShipOn').datepicker({
    constrainInput: true,
    display: true,
    border: true,
    background: true,
    maxDate: "+1m",
    minDate: new Date('@minDate')
});

$('.DateShipOn').datepicker("setDate", new Date());

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

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

Разрешение:

В моем случае все, что мне нужно было сделать, это прокомментировать / удалить строку:

$('.DateShipOn').datepicker("setDate", new Date());

Результат:

Эффект на дисплее;

• Нет значения даты по умолчанию во входных данных (текстовое поле)
• Пользователь не может ввести данные (текстовое поле)
• Выбор даты выпадает без выбора даты по умолчанию
• minDate предотвращает выбор дат до выбора значения minDate
• maxDate предотвращает выбор даты после значения maxDate

Примечание. По моему требованию «+ 1 м» для maxDate ограничивает выбор даты только 30 днями от значения minDate.

Надеюсь, это кому-нибудь поможет.

Answer 8

Я использовал $('.datefield').val(''), чтобы показывать пустое вместо отображения даты по умолчанию.

Answer 9

у меня работает:

$(document).ready(function() {
    $("#datepicker .ui-state-active").removeClass("ui-state-active");
    $("#datepicker .ui-state-highlight").removeClass("ui-state-highlight");
    $("#datepicker .ui-datepicker-today").removeClass("ui-datepicker-today");
});

Answer 10

Мое решение включает в себя переопределение добавления jQuery, чтобы мы могли удалять элементы каждый раз, когда HTML-код создается заново и добавляется в div.Это исправляет мигание даты по умолчанию при переключении месяцев, а также очищает наведение.

(function($) {
    var origAppend = $.fn.append;

    $.fn.append = function () {
        return origAppend.apply(this, arguments).trigger("append");
    };
})(jQuery);

var datePickerDiv = $("#date-picker");
datePickerDiv.bind("append", function() {
  $(this).find(".ui-datepicker-days-cell-over").removeClass("ui-datepicker-days-cell-over");
  $(this).find(".ui-datepicker-today a ").removeClass("ui-state-highlight ui-state-active ui-state-hover");
});

datePickerDiv.datepicker();