如何在选择日期后关闭日期时间选择器

How to close datetimepicker after date selection?

本文关键字：日期时间选择器选择更新时间：2024-02-11

我正在使用日期时间选择器

一旦我选择了一个日期值，我就不知道如何关闭小部件。

我的代码：

    $(settings.target).datetimepicker({
        useCurrent: "hour",
        minDate: settings.minDate,
        maxDate: settings.maxDate,
        keepOpen : false,
        locale: settings.locale
    });
   $(settings.target).on("dp.change", function (e) {
       $(settings.target).trigger("dp.hide");
    })
    $(settings.target + " .action").on("focus", function (e) {
        $(this).next().trigger("click");
    })

HTML:

                    <div class="row filterRes">
                        <div class='col-sm-6'>
                            <div class="form-group">
                                <div class='input-group date' id='datetimepickerFrom'>
                                    <input type='text' class="form-control action" placeholder="Från" />
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class='col-md-6'>
                            <div class="form-group">
                                <div class='input-group date' id='datetimepickerTo'>
                                    <input type='text' class="form-control action" placeholder="Till" />
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

尝试了其他几次，但都没搞清楚。我该怎么做？

这对我来说很好……当用户点击字段时，小部件会显示出来，当选择它显示的日期时。。。

为了参考，页面上有一条注释：

注意：所有函数都可以通过数据属性访问，例如$（"#datetimepicker"）数据（"DateTimePicker"）.FUNCTION（）

$(settings.target).on("dp.change", function (e) {
    $(this).data("DateTimePicker").hide();
});
$(settings.target).on("click", function (e) {
    $(this).data("DateTimePicker").show();
});

祝你好运。。。

<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({
                useCurrent: "hour",
                keepOpen: false,
            }).on("dp.change", function (e) {
                var widget = $(this).find(".bootstrap-datetimepicker-widget");
                if (widget.length > 0) {
                    widget.toggle("dp.hide");
                    $(this).find(".form-control").blur();
                }
            });
        });
        </script>
    </div>
</div>

这段代码适用于我。