Подтвердить что ты не робот

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

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

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

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

и следующие script:

<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 в моих процедурах проверки.

Ответ 2

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

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

Ответ 3

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

Ticket 8159

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

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

  • Метод _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;
},
  1. Метод _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);
}
  1. Наконец, метод _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 теперь может возвращать значение null. Так что сначала сделайте собственное тестирование!;)

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

Ответ 4

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

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

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

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

Ответ 5

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

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

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

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

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

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

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

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

Ответ 6

У меня одна и та же проблема с использованием inline datepicker. Плагин добавит сегодня cell/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

Ответ 7

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

Ответ 8

Я знаю, что это старый вопрос, и я нашел его, потому что у меня было такое же требование; не отображайте дату на входе (текстовое поле), чтобы пользователь выбирал дату из 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>

Script (в документе готов):

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

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

Ответ 9

У меня была аналогичная проблема, но с конкретным поведением.

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

Моя реализация включала встроенный календарь со скрытым входом altField. То, что я сделал, это удалить параметр altField и добавить функцию onSelect, которая его обновила. Таким образом, сегодняшний день по-прежнему выглядит выбранным, но скрытое поле, которое представляет реальное значение, остается пустым.

Ответ 10

Мое решение включает переопределение jQuery append, чтобы мы могли удалять элементы каждый раз, когда 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();

Ответ 11

Работает для меня:

$(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");
});

Ответ 12

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

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

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

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

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

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