datetimepicker 在选择时消失

Question

我有一个日期时间选择器。

<input id="all-day-event-date" type="text">

这是一个输入文本框。我在文档加载时触发它聚焦：

$('#all-day-event-date').trigger("focus");

然后我的输入字段和日历/选择器按预期出现了。

$("#all-day-event-date").datetimepicker({
    timepicker: false,
    onChangeDateTime: function(dp, $input) {
        var datetime = $input.val();
        var date = datetime.split(" ")[0];
        $input.val(date);
    }
});

看起来像这样：

但是，一旦我选择了一个日期，日历就会消失：

我如何让它留下来？

这个问题与之前提出的问题不同。当我尝试内联解决方案时：

<div style="overflow:hidden;">
    <div class="form-group">
        <div class="row">
            <div class="col-md-8">
                <div id="datetimepicker12"></div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $('#datetimepicker12').datetimepicker({
                inline: true,
                sideBySide: true
            });
        });
    </script>
</div>

会发生什么：

当我按下主页按钮时，它会正常在线显示：

这不是我想要的行为。我希望日历在加载后立即出现，并且之后永远不会消失，让用户选择和重新选择而无需单击其他框。

Answer 1

添加焦点输出以在选择日期时从日期选择器输入框中移除焦点

$('#all-day-event-date').focusout();

现在，日期选择器应该会在您关注输入后再次出现。

这是一个我觉得很有帮助的小提琴JSFiddle

编辑：如果您希望您的日期选择器根本不消失，请阅读此answer

通过 altField 使用内联日历

<input type="text" id="alternate" size="30" />
<div id="datepicker"></div>

<script>
   $("#datepicker").datepicker({
      altField: "#alternate"
   });
</script>