Question

我正在使用Eonasdan bootstrap date/timepicker。我希望我的日历始终显示，即使我在输入字段中按Enter键。到目前为止，我设法显示始终打开日历，除非通过使用属性按Enter键：

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>

Answer 1

您需要使用：

keyBinds()：允许自定义事件在键盘按下时触发。

Enter键的默认值为：

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>

按下Enter键时，也始终保持Bootstrap-datetimepicker处于打开状态

1 个答案: