bootstrap日期控件的使用

最新推荐文章于 2024-09-03 09:28:59 发布

zh_s_z

最新推荐文章于 2024-09-03 09:28:59 发布

阅读量2.7k

点赞数

分类专栏： html 文章标签： bootstrap日期控件

本文链接：https://blog.csdn.net/zh_s_z/article/details/80408740

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用控件：
bootstrap-3.3.7-dist.zip              下载地址：http://www.bootcss.com/
bootstrap-datetimepicker-master.zip   下载地址：https://codeload.github.com/Eonasdan/bootstrap-datetimepicker/zip/master
jquery-3.3.1.min.js                   下载地址：https://code.jquery.com/jquery-3.3.1.min.js
moment-with-locales.min.js            下载地址：http://momentjs.com/downloads/moment-with-locales.min.js

注意：script的引入顺序 jquery、moment必须放在最前面。经测试，只保留build也可以。

1、把 bootstrap-datetimepicker-master.zip解压的文件改名为 bootstrap-date

2、把jquery-3.3.1.min.js、moment-with-locales.min.js放到bootstrap-date/build/js中

3、把bootstrap-3.3.7-dist.zip 解压出来的bulid拷贝到bootstrap-date/build中。

4、在bootstrap-date同等目录创建个test.html,内容如下：

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script rel="stylesheet" src="./bootstrap-date/build/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="./bootstrap-date/build/js/moment-with-locales.min.js"></script>
    <link rel="stylesheet" href="./bootstrap-date/build/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="./bootstrap-date/build/css/bootstrap-datetimepicker.min.css"/>
    <script type="text/javascript" src="./bootstrap-date/build/js/bootstrap-datetimepicker.min.js" ></script>
    <script type="text/javascript" src="./bootstrap-date/build/js/bootstrap.min.js" ></script>
    <script>
        $(function () {
            var picker1 = $('#datetimepicker1').datetimepicker({
                format: 'YYYY-MM-DD',
                locale: moment.locale('zh-cn'),
                //minDate: '2016-7-1'
            });
            var picker2 = $('#datetimepicker2').datetimepicker({
                format: 'YYYY-MM-DD',
                locale: moment.locale('zh-cn')
            });
            //动态设置最小值
            picker1.on('dp.change', function (e) {
                picker2.data('DateTimePicker').minDate(e.date);
            });
            //动态设置最大值
            picker2.on('dp.change', function (e) {
                picker1.data('DateTimePicker').maxDate(e.date);
            });
        });
    </script>
</head>
<body>
<div class="row">
    <div class='col-sm-6'>
        <div class="form-group">
            <label>选择开始时间：</label>
            <!--指定 date标记-->
            <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>
    <div class='col-sm-6'>
        <div class="form-group">
            <label>选择结束时间：</label>
            <!--指定 date标记-->
            <div class='input-group date' id='datetimepicker2'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
</div>
</body>
</html>

参考文档：

https://blog.csdn.net/u011127019/article/details/51725081

特此感谢