如何让Eonasdan Bootstrap Datetimepicker始终显示，按下回车键也不关闭

我懂你现在的困扰——已经设置了keepOpen: true和inline: true让日历大部分时候保持打开，但回车键还是会触发关闭。这是因为回车键默认会触发日期选择器的确认关闭逻辑，哪怕你开了keepOpen也会生效，咱们来快速搞定它：

解决方案：拦截回车键的默认行为 #

只需要在日期选择器初始化后，给输入框加一个keydown事件监听，阻止回车键触发默认的关闭动作就行：

修改后的完整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]
  });

  // 新增：拦截回车键，阻止日历关闭
  $('#datepicker').on('keydown', function(e) {
    // 兼容不同浏览器的按键判断
    if (e.keyCode === 13 || e.key === 'Enter') {
      e.preventDefault(); // 阻止默认的确认关闭行为
    }
  });
});

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>

原理说明 #

回车键在这个日期选择器里默认绑定了“确认当前选择并关闭面板”的动作，这个逻辑优先级高于keepOpen: true的设置。通过e.preventDefault()直接阻止这个默认行为，就能让日历一直保持打开状态，不管用户按多少次回车键都不会关闭啦。

内容的提问来源于stack exchange，提问作者Ivana