Как показать календарь datepicker, когда ввод получает фокус и обновляет календарь

У меня есть пример календаря, основанный на этом URL: http://eonasdan.github.io/bootstrap-datetimepicker

Это HTML-код:

<div class="form-group col-xs-2 col-md-2">
    <label for="datebirth" class="control-label">Date of Birth</label>
    <div class="input-group date" id="datetimepicker1">
        <input type="text" class="form-control" id="date-birth" maxlength="10" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>                      
</div>

Это код JS:

moment.locale('en', {
  week: { dow: 1 } // Monday is the first day of the week
});     

$("#datetimepicker1").datetimepicker({
    format: 'DD/MM/YYYY'
});

$("#date-birth").on("focus", function() {
    //open calendar
});

Мой календарь должен открываться при нажатии на значок календаря (это нормально) и когда дата ввода находится в фокусе, а после, если я напишу fecha в поле ввода даты, окно календаря должно обновиться автоматически.

В URL-адресе есть пример без значка (только поле ввода):, но я не могу его разрешить.

Спасибо за помощь.


twitter-bootstrap twitter-bootstrap-3 bootstrap-datetimepicker
person Eladerezador    schedule 18.12.2015    source источник

Ответы (2)


arrow_upward
7
arrow_downward

Вы можете инициализировать свой календарь, добавив параметр allowInputToggle, чтобы он открывался также, когда ввод получает фокус:

$("#datetimepicker1").datetimepicker({
    format: 'DD/MM/YYYY',
    allowInputToggle: true
});

Вы также можете добавить useCurrent: false, если хотите, чтобы поле ввода было пустым при первом открытии календаря.

Вы можете использовать список keyup для автоматического обновления календаря при вводе даты:

$("#date-birth").on("keyup", function() {
    var dt = moment(this.value, 'DD/MM/YYYY', true);
    if( dt.isValid() ){
        $('#datetimepicker1').data("DateTimePicker").date(dt);
    }
});
person VincenzoC    schedule 19.12.2015

arrow_upward
0
arrow_downward

Я думаю, вам нужно изменить свой css для datetimepicker. просто добавьте одну строку, как показано ниже

ИЗ

.bootstrap-datetimepicker-widget {
  list-style: none;
}

TO

.bootstrap-datetimepicker-widget {
  list-style: none;
  display: block;
}
person Vishal Rambhiya    schedule 30.01.2020