Держите Bootstrap-datetimepicker всегда открытым даже при нажатии клавиши ввода - PullRequest
Новая
       32

Держите Bootstrap-datetimepicker всегда открытым даже при нажатии клавиши ввода

1 голос
/ 19 июня 2019

Я использую Eonasdan bootstrap date / timepicker . Я хочу, чтобы мой календарь всегда отображался, даже если я нажму клавишу ввода в поле ввода. До сих пор мне удавалось показывать всегда открытый календарь, кроме случаев нажатия клавиши ввода с помощью атрибутов: 

keepOpen: true, 
inline: true, 
debug: true.

Сегмент кода JS 

$(function () {

            $('#datepicker').datetimepicker({
              format: 'DD.MM.YYYY',
              keepOpen: true,
              inline: true,
              debug: true,
              icons:{
                    date: 'fa fa-calendar',
                    up: 'fa fa-chevron-up',
                    down: 'fa fa-chevron-down',
                    previous: 'fa fa-chevron-left',
                    next: 'fa fa-chevron-right',
                    today: 'fa fa-screenshot',
                    clear: 'fa fa-trash',
                    close: 'fa fa-remove'
                }
               //beforeShowDay: 

                    // daysOfWeekDisabled: [0,6]



            });

Сегмент HTML-кода: 

<div class="input-group date" data-provide="datepicker"> 

    <input  id="datepicker" type="text" name="date" class="form-control input-md">

    <div class="input-group-addon dt-cal">

        <span class="fa fa-calendar"></span>

    </div>

</div>

1 Ответ

1 голос
/ 19 июня 2019

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

keyBinds () : позволяет запускать пользовательские события при нажатии клавиатуры.

Значение по умолчанию для клавиши ввода: 

enter: function () {
    this.hide();  // exactly what you don't want...
},

Достаточно удалить такое поведение по умолчанию: 

$('#datepicker').data("DateTimePicker").keyBinds({'enter': null});


$('#datepicker').datetimepicker({
    format: 'DD.MM.YYYY',
    keepOpen: true,
    inline: true,
    debug: true,
    icons:{
        date: 'fa fa-calendar',
        up: 'fa fa-chevron-up',
        down: 'fa fa-chevron-down',
        previous: 'fa fa-chevron-left',
        next: 'fa fa-chevron-right',
        today: 'fa fa-screenshot',
        clear: 'fa fa-trash',
        close: 'fa fa-remove'
    }
    //beforeShowDay:
    // daysOfWeekDisabled: [0,6]
});
$('#datepicker').data("DateTimePicker").keyBinds({'enter': null});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>


<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input id="datepicker" type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>
...