Skip to content

前言

Note

示例使用的的版本： v4.17.50
github 地址： https://github.com/pingcheng/bootstrap4-datetimepicker/tree/v4.17.45
文档地址： https://getdatepicker.com/4/

测试还使用如下插件：

插件 版本
moment.js v2.24.0
momentjs 用的 zh-cn.js 或者 moment-with-locales v2.24.0
jquery v3.4.1
bootstrap v3.3.1

用来演示的 html 文件

下面的代码包括了可用的插件的 CDN，可以保存为 html 文件进行示例的演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-datetimepicker/4.14.45/css/bootstrap-datetimepicker.min.css"
        rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <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();
                });
            </script>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
    <script
        src="https://cdn.bootcdn.net/ajax/libs/bootstrap-datetimepicker/4.14.45/js/bootstrap-datetimepicker.min.js"></script>
</body>
</html>