App下載

HTMLbootstrap時間選擇器控件精確到秒 datetimepicker控件怎么精確到秒？

猿友 2021-03-12 10:28:22 瀏覽數(shù) (6229)
反饋

在使用 HTML 中的 bootstrap datetimepicker 選擇器控件時會發(fā)現(xiàn)，該插件不能精確到秒鐘，那么 bootstrap 時間選擇器控件精確到秒能否實現(xiàn)呢？

datetimepicker控件精確到秒

其實可以進行簡單的修改，原來只能選擇年月日，現(xiàn)在可以選取年月日時分秒，代碼如下：

<html>

    <title>bootstrap-datetimepicker</title>

    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">

    <link rel="stylesheet" type="text/css" href="bootstrap-datetimepicker.min.css">

    <script type="text/javascript" src="jquery.min.js"></script>

    <script type="text/javascript" src="bootstrap.min.js"></script>

    <script type="text/javascript" src="bootstrap-datetimepicker.min.js"></script>

    <script type="text/javascript" src="bootstrap-datetimepicker.zh-CN.js"></script>

    <body>

        <label>選擇時間</label>

        <input type="text" id="begin_date" readonly placeholder="點擊選擇時間" value="">

        <script type="text/javascript">

            var utils = {

                bindTimePicker: function ($controls, opt) {

                    $controls.each(function (i, e) {

                        var $control = $(e),

                            options = $.extend({

                                language:  'zh-CN',

                                autoclose: true,

                                format: "yyyy-mm-dd hh:ii:ss"

                            }, opt);

                        $control.datetimepicker(options);

                    });

                },

            }

            utils.bindTimePicker($("#begin_date, #end_date"), {format: "yyyy-mm-dd hh:ii:ss"});

            $("#begin_date").datetimepicker().on("changeDate", refreshDate);

            var refreshDate = function () {

                var start = $("#begin_date").val();

                $("#end_date").datetimepicker("setStartDate", start);

            };

        </script>

    </body>

</html>

看到這里想解決 datetimepicker 控件怎么精確到秒的朋友，是否已經(jīng)得到自己想要的答案了呢？還有其他想學習的內(nèi)容可自行在 HTML 欄目中查找。


HTML

0 人點贊