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

Я использую bootstrap-datepicker на моем сайте. Элемент 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 не всплывает при нажатии на ввод текста el

$(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 datepicker javascript jquery twitter-bootstrap

10 ответов

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

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

для поля даты я проверяю, есть ли дата (это.дата) устанавливается на дату начала 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

для выпадающего календаря я также проверяю, дата (это.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

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

5

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

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

задайте пустое значение

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

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

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

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

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

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

2

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

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

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

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

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

для заполнения элемента управления datepicker

2

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

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

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

2

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

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

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

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

1

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

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

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.

1

в последних версиях bootstrap, я использую Bootstrap V3.3.6 & Boostrap-хронометр V0.5.2, следующие работы славные и просто:

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

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

$('#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})

дополнительные параметры, либо проверьте файл исходного кода или этой ссылке

1

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

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

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

1
0