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



Answers

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

    $('.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
Question

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

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

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

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




У меня та же проблема, что и inline datepicker. Плагин добавляет к сегодняшней ячейке / td класс .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



Мое решение включает в себя переопределение добавления 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();



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

Разметка (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».

Примечание. Мы не разрешаем ввод вручную, это причина атрибута «readonly».

Разрешение:

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

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

Результат:

Эффект заключается в том, что на дисплее;

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

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

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




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

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

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

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




Что вы подразумеваете под желанием «удалить» дату по умолчанию?

Как вы думаете, датапикер откроется, когда у него не будет месяца, чтобы начать? У вас должна быть дата по умолчанию.

Изменить комментарий

Установите дату по умолчанию так, как вы хотите, и проверьте, изменился ли пользователь. Если это так, он выбрал специальную дату.

Другим подходом было бы создание переменной, для которой установлено значение true как только пользователь нажимает на поле datepicker.

Если пользователь отправляет форму, вы проверяете эту переменную. Если это true , пользователь выбрал дату. Если нет, он не коснулся поля datepicker.




Links