bootstrap-datepicker очищает поле после выбора текущей даты

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

Посмотрите демонстрацию для примера, http://eternicode.github.io/bootstrap-datepicker/?markup=input&format=&weekStart=&startDate=&endDate=&startView=0&minViewMode=0&todayBtn=false&language=en&orientation=auto&multidate=&multidateSeparator=&autoclose=on&keyboardNavigation=on&forceParse=on#sandbox

  1. убедитесь, что автозамыкание
  2. выберите дату.
  3. снова откройте окно выбора даты и снова выберите текущую выбранную дату.
  4. поле снова пусто

Спасибо

4 8
javascript jquery datepicker twitter-bootstrap bootstrap-datepicker

4 ответа:

Bootstrap Datepicker предоставляетсобытия , которые вы можете использовать для достижения своей цели.

Вот один из способов сделать это: 

$('#sandbox-container input').datepicker({
    autoclose: true
});

$('#sandbox-container input').on('show', function(e){
    if ( e.date ) {
         $(this).data('stickyDate', e.date);
    }
    else {
         $(this).data('stickyDate', null);
    }
});

$('#sandbox-container input').on('hide', function(e){
    var stickyDate = $(this).data('stickyDate');

    if ( !e.date && stickyDate ) {
        $(this).datepicker('setDate', stickyDate);
        $(this).data('stickyDate', null);
    }
});

Не обязательно самый элегантный, но, как вы можете видеть здесь, он делает трюк:

Http://jsfiddle.net/klenwell/LcqM7/ (проверено в Chrome)

11

Это, кажется, самое общее решение, поскольку была проблема, когда мы нажимаем на входной текст и нажимаем на какой-то другой компонент на веб-странице, кроме выбора даты: 

//Date picker 
$('#datepickerInputId').datepicker({
    autoclose : true,
}).on('show', function(e){
    if ( e.date ) {
        $(this).data('stickyDate', e.date);
    } else if($(this).val()){
        /**auto-populate existing selection*/
        $(this).data('stickyDate', new Date($(this).val()));
        $(this).datepicker('setDate', new Date($(this).val()));
    } else {
        $(this).data('stickyDate', null);
    }
}).on('hide', function(e){
    var stickyDate = $(this).data('stickyDate');
    if ( !e.date && stickyDate ) {
        $(this).datepicker('setDate', stickyDate);
        $(this).data('stickyDate', null);
    }
});

Любезно предложите, если требуется какая-либо Модификация

3

Быстрое Исправление: В строке defaults @ 1394 добавьте новый параметр allowDeselection 

var defaults = $.fn.datepicker.defaults = {
    allowDeselection: false,
    ...
};

В функции _toggle_multidate @ строка 1015 измените оператор "else if (ix !== -1)" на: 

else if (ix !== -1 && this.o.allowDeselection){
            this.dates.remove(ix);
        }

Ссылка: https://github.com/eternicode/bootstrap-datepicker/issues/816

2

На всякий случай, если кто-то хочет реализовать все события в "одной строке", я делюсь здесь кодом, который я использую в ASP.NET проект MVC .

И спасибо @klenwell за его решение!

$('#ExpectedEndingTimeDataPicker').datepicker({
    startDate: "@Model.ExpectedEndingTimeAsString",
    language: "@Model.CurrentCultere2Letters",
    autoclose: true,
    todayHighlight: true,
    format: "@Model.CurrentDateFormat"
}).on('changeDate', function (e) {          
    RecalculateEstimationDate();
}).on('show', function (e) {
    if (e.date) {
        $(this).data('stickyDate', e.date);
    }
    else {
        $(this).data('stickyDate', null);
    }
}).on('hide', function (e) {
    var stickyDate = $(this).data('stickyDate');
    if (!e.date && stickyDate) {
        $(this).datepicker('setDate', stickyDate);
        $(this).data('stickyDate', null);
    }
});

Обратите внимание, что Model является ASP.NET модель MVC.

Вы можете прочитать больше об этих событиях здесь http://bootstrap-datepicker.readthedocs.org/en/release/events.html

И о bootstrap-datepicker.js

1