Le Bootstrap-datetimepicker reste toujours ouvert, même lorsque l'on appuie sur la touche Entrée.

Question

J'utilise Eonasdan bootstrap date/timepicker . Je veux que mon calendrier soit toujours affiché, même si j'appuie sur la touche entrée dans le champ de saisie. Jusqu'à présent, j'ai réussi à afficher toujours le calendrier sauf lorsque j'appuie sur la touche Entrée en utilisant les attributs :

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

Segment de code 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]

            });

Segment de code 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>

Answer 1

Vous devez utiliser :

keyBinds() : permet de déclencher des événements personnalisés en cas d'appui sur le clavier.

La valeur par défaut de la touche d'entrée est :

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

Il suffit de supprimer ce comportement par défaut :

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