Установить дату как изначально пустую в bootstrap-datepicker

Я использую bootstrap-datepicker на моем сайте. Datepicker будет использоваться для определения поисковых фильтров. Мне нужно, чтобы начальное значение элемента ввода datepicker было пустым, чтобы оно не вводило фильтр даты для результатов поиска. Когда пользователь нажимает на ввод текста, связанный с Datepicker, всплывающее окно Datepicker должно выбрать первый день следующего месяца.

Проблема: Если бы я должен был установить начальную дату (как показано ниже), ввод текста будет заполнен сегодняшней датой, а не тем, что я хочу. Однако, если я не установлю начальную дату, средство выбора даты покажет 1970-е годы. Что я должен делать?

Аналогично: Демонстрация для jQueryUI Datepicker

Код JS

var now = new Date();
var nextMonth = new Date();
nextMonth.setDate(1);
nextMonth.setMonth(now.getMonth() + 1);
var prettyDate =  nextMonth.getMonth() + '/' + nextMonth.getDate() + '/' + nextMonth.getFullYear();
$('#listing_filter_available').val(prettyDate);
$('#listing_filter_available').datepicker();

HTML-код

<input type="text" id="listing_filter_available" class="input-small" placeholder="Date Available" />

Неудачная попытка

Datepicker не выскакивает при нажатии на ввод текста

$(function() {

    var now = new Date();
    var nextMonth = new Date();
    nextMonth.setDate(1);
    nextMonth.setMonth(now.getMonth() + 1);
    var prettyDate =  nextMonth.getMonth() + '/' + nextMonth.getDate() + '/' + nextMonth.getFullYear();
    $('#listing_filter_available').val('');  // clear the date filter
    $('#listing_filter_available').click( function() {
        $('#listing_filter_available').val(prettyDate);
        $('#listing_filter_available').datepicker();
    });

});
Источник

10 ответов

Решение

Я только что столкнулся с очень похожим вариантом использования. С парой настроек в bootstrap-datepicker.js, я думаю, у меня все получилось.

Вам нужно будет отредактировать скрипт в двух местах.

Для поля даты я проверяю, установлена ​​ли дата (this.date) на дату начала Unix (.eg blank date). Если это так, выйдите и оставьте поле пустым.

(строка: 95 - прим.)

    setValue: function () {
        // EDIT - Don't setValue if date = unix date start
        if (DPGlobal.formatDate(this.date, this.format) == DPGlobal.formatDate(new Date(1970, 1, 1, 0, 0, 0), this.format)) return false;
        // END EDIT

Для раскрывающегося календаря я также проверяю, установлена ​​ли дата (this.date) на дату начала Unix. Если это так, установите дату на сегодня. Я делаю это так, чтобы, когда пользователь нажимает на поле даты, он отображал текущий месяц, а не февраль 1970 года.

(строка: 144 - прим.)

fill: function () {

      //  EDIT - Set date in fill to today if date is "blank" (eg Unix start date)
            var d = ((DPGlobal.formatDate(this.date, this.format) == DPGlobal.formatDate(new Date(1970, 1, 1, 0, 0, 0), this.format))) ? new Date() : new Date(this.viewDate),
      //  original code
            //    var d = new Date(this.viewDate),
      //  END EDIT

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

Источник

Существует гораздо более простой способ сделать это! Чтобы установить значение

$('#listing_filter_available').datepicker();
$('#listing_filter_available').datepicker('setValue', nextMonth);

Чтобы установить пустое значение

$('#listing_filter_available').datepicker();
$('#listing_filter_available').val('');
Источник

Я столкнулся с подобной проблемой, и это работает для меня.

$(".date-picker").datepicker("setDate", "");

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

Источник

В последних версиях начальной загрузки я использую Bootstrap V3.3.6 и Boostrap-timepicker V0.5.2, следующее работает хорошо и просто:

$('#txtTimepicker').timepicker().val('');

В моем личном случае я делаю проверку условий внутри набора val, используя синтаксис бритвы MVC, чтобы различать "добавить" и "редактировать" следующим образом:

$('#txtTimepicker').timepicker().val('@(Model.Created_Date == null ? "" : Model.Created_Date.ToString("H:mm tt"))');

Чтобы моя работа работала на 100%, я явно установил входное значение и следующие параметры:

.timepicker({ format: 'HH:mm:ss', 'defaultTime' : 'value', 'showMeridian': false, 'showSeconds': true, 'disableFocus' : false})

Для получения дополнительных опций, проверьте файл с исходным кодом или эту ссылку

Источник

Для последней версии

$("input[type=date]").datepicker({ defaultViewDate: {} });

Источник: http://bootstrap-datepicker.readthedocs.io/en/latest/options.html

Источник

Это не будет возможно без редактирования bootstrap-datepicker.js

дата по умолчанию берется из value=, и если вы оставите ее пустой, она будет соответствовать 01-01-1970 (начало даты unix).

Даже если вы поставите на вопрос большую жирную награду, работы будет слишком много.

Я рекомендую вам найти другой плагин.

Я не очень уверен насчет datePicker для пользовательского интерфейса jQuery, так как есть несовместимость с надстройкой Twitter https://github.com/twitter/bootstrap/issues/156

Источник

Я работаю с начальной загрузкой v3.1.1 и

$('#listing_filter_available').datepicker('setValue', nextMonth);

не работал для меня

Вы должны использовать

$('#listing_filter_available').datepicker('setDate', nextMonth);

заполнить элемент управления DatePicker

Источник

У меня была та же проблема, я вышел с этим обходным путем, я сделал функцию для получения даты:

getDate: function (input) {
  if ($(input).val() == '') {
    return '';
  }

  return $(input).data('datepicker').date;
}

Примечание: я пытаюсь стандартизировать каждый метод получения и установки, чтобы иметь возможность изменить плагин datepicker в будущем

Источник

Если вы не можете найти такую ​​функциональность, не редактируйте источники. Быть умным. Найдите класс CSS "активный" и удалите его динамически или переопределите правило в таблице стилей.

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

datepicker td.active, .datepicker td.active:hover {
    background-color: #006dcc;
    background-image: linear-gradient(to bottom, #0088cc, #0044cc);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

или динамически удалить этот класс, используя js.

Источник

Попробуй это...

http://aymkdn.github.com/Datepicker-for-Bootstrap/

Источник

Это мой любимый

$('#datetimepicker').datetimepicker({
   defaultDate:'',     
});
Источник
Другие вопросы по тегам