Установить дату, чтобы быть изначально пустой в 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();
    });

});

Ответ 1

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

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

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

(строка: 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 

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

Ответ 2

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

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

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

$('#listing_filter_available').datepicker();
$('#listing_filter_available').val('');

Ответ 3

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

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

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

Ответ 4

В последних версиях бутстрапа я использую 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})

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

Ответ 5

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

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

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

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

Я не так уверен в jQuery UI datePicker, так как там несовместимость с twitter boostrap https://github.com/twitter/bootstrap/issues/156

Ответ 6

Я работаю с bootstrap v3.1.1 и

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

не работал у меня.

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

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

чтобы заполнить элемент управления datepicker

Ответ 8

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

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

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

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

Ответ 9

Если вы не можете найти такую ​​функциональность, не редактируйте источники. Быть умным. Найдите "активный" класс 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.

Ответ 11

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

$('#datetimepicker').datetimepicker({
   defaultDate:'',     
});

Ответ 12

<input type="text" name="datefilter" value="" />


<script type="text/javascript">
$(function() {

  $('input[name="datefilter"]').daterangepicker({
      autoUpdateInput: false,
      locale: {
          cancelLabel: 'Clear'
      }
  });

  $('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
      $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
  });

  $('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
      $(this).val('');
  });

});
</script>