美文网首页
bootstrap-datetimepicker 实现精确到秒的

bootstrap-datetimepicker 实现精确到秒的

作者: 你若像风 | 来源:发表于2019-08-14 16:47 被阅读0次

今天把项目里的时间控件更改了一下,原来是能选择到年-月-日,现在改成了 年-月-日 时:分:秒,如下图这样子:


image.png image.png
<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>
需要引入至少以下相关css 以及 js文件。
image.png
注意:使用以上代码运行之后看到的结果样式和我上面的图片会有偏差,这只是css的差别问题,实现的思路不变。

相关文章

网友评论

      本文标题:bootstrap-datetimepicker 实现精确到秒的

      本文链接:https://www.haomeiwen.com/subject/nitnjctx.html