Установите дату, чтобы быть изначально пустым в bootstrap-datepicker

Question

Я использую bootstrap-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(); 
    }); 

}); 

Answer 1

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

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

В поле даты я проверяю, установлена ​​ли дата (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 - ок)

заливка: функция() {

 // 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 

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

Answer 2

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

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

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

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

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

Answer 3

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

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

Answer 4

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

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

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

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

Answer 5

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

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

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

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

Answer 6

Я работаю с бутстраповской v3.1.1 и

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

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

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

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

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

Answer 7

Я выбежала в подобную проблему, и это работает для меня.

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

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

Answer 8

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

Например, переопределить это правило (использовать более сильный селектор для 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.

Answer 9

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

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

Для больше вариантов, либо проверить файл исходного кода или this ссылка

Answer 10

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

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

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