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

Question

我不知道如何在选择日期值后关闭小部件。

我的代码：

    $(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>

尝试了其他几次尝试，但无法弄清楚。我该怎么做？

Answer 1

<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>

这段代码适合我。

Answer 2

这对我来说非常有用...当用户在字段中单击时小部件会显示，当 select 一个日期时它会消失...

仅供参考，页面开头有注释：

Note All functions are accessed via the data attribute e.g. $('#datetimepicker').data("DateTimePicker").FUNCTION()

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

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

祝你好运...

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

How to close datetimepicker after date selection?

javascript

jquery

datetimepicker