如何为 Bootstrap datetimepicker 保留键盘输入？答案

【问题标题】：How to keep keyboard input for Bootstrap datetimepicker?如何为 Bootstrap datetimepicker 保留键盘输入？
【发布时间】：2019-08-26 16:46:39
【问题描述】：

我正在尝试使用 Bootstrap datetimepicker，它运行良好，但是，我需要解决一个问题。当已经选择了日期时，我希望能够键入键盘输入并保留它，即使它不是焦点丢失的有效日期。

这是一个最小的可重现示例：

<link rel="stylesheet" type="text/css" media="screen" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet">
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//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 type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker({
                    format: "MM/DD/YYYY hh:mm A",
                    keepOpen: false,
                });
            });
        </script>
    </div>
</div>

小提琴：https://jsfiddle.net/qfn6mz9t/2/

复制步骤： - 选择一个日期 - 点击输入 - 输入任何文本，例如“example” - 在输入之外单击 - 输入的值不同于我输入的值

即使失去焦点，如何确保我的输入保持不变？

【问题讨论】：

标签： bootstrap-datetimepicker

【解决方案1】：

我已经设法解决了这个问题。这就是我初始化 datetimepicker 的方式：

$('#start_date').datetimepicker({
    format: "MM/DD/YYYY hh:mm A",
    keepOpen: false,
    useCurrent: false,
    keepInvalid: true,
    useStrict: true
});

keepInvalid 部分在这里很有帮助。我还需要用datetimepicker 类替换datetimepicker-input 类，因为由于某种原因，无效日期会导致引发stackoverflow 异常。现在，新问题是在焦点丢失时datetimepicker 不会关闭，所以我必须以编程方式确保它关闭：

function hideDateTimePicker() {
    $("#" + this.id).datetimepicker("hide");
}

和

$("#start_date, #end_date").on("focusout", hideDateTimePicker);

【讨论】：