Keep Bootstrap-datetimepicker always open also when hitting key enter

user_6145122 0
Viewed 3307

I'm using Eonasdan bootstrap date/timepicker. I want my calendar is always shown, even if I press enter key in the input field. So far I managed showing always open the calendar except when hitting enter key by using attributes:

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

Segment of JS code 

$(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 of html code:

<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>
bootstrap-datepicker html jquery javascript
1 Answers

You need to use:

keyBinds(): allows for custom events to fire on keyboard press.

The default value for enter key is:

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

It is enough to remove such default behavior:

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

user_38805850
Related