Bootstrap组件福利篇：几款好用的组件推荐，你值得拥有！

一、时间组件

bootstrap风格的时间组件非常多，你可以在github上面随便搜索“datepicker”关键字，可以找到很多的时间组件。博主原来也用过其中的两个，发现都会有一些大大小小的问题。经过一番筛选，找到一个效果不错、能适用各种场景的时间组件，下面就来一睹它的风采吧。

1、效果展示

初始效果

组件中文化和日期格式自定义：只显示日期

显示日期和时间（手机、平板类设备可能体验会更好）

3、代码示例

首先引用需要的文件

代码语言：javascript复制

<link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/bootstrap-datetimepicker-master/build/css/bootstrap-datetimepicker.css" rel="stylesheet" />

    <script src="~/Content/jquery-1.9.1.js"></script>
    <script src="~/Content/bootstrap/js/bootstrap.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
    <script src="~/Content/bootstrap-datetimepicker-master/build/js/bootstrap-datetimepicker.min.js"></script>

JQuery和bootstrap是必须的。除此之外，还得引用 moment-with-locales.js 这个文件，当然，你也可以不用这种cdn的方式，完全可以下载这个js文件到你的本地，然后添加本地引用。

（1）初始效果

代码语言：javascript复制

    <label class="control-label col-xs-3">日期：</label>
    <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>

代码语言：javascript复制

    <script type="text/javascript">
    $(function () {
        $('#datetimepicker1').datetimepicker();
    });
    </script>

这样就能出现如上图一效果。

（2）中文化和日期格式化

html部分不变。js初始化的时候增加参数即可。

代码语言：javascript复制

    <script type="text/javascript">
    $(function () {
        $('#datetimepicker1').datetimepicker({
            format: 'YYYY-MM-DD',//日期格式化，只显示日期
            locale: 'zh-CN'      //中文化
        });
    });
    </script>

（3）显示时间

代码语言：javascript复制

    <label class="control-label col-xs-3">时间：</label>
    <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>

代码语言：javascript复制

    <script type="text/javascript">
    $(function () {
        $('#datetimepicker2').datetimepicker({
            format: 'YYYY-MM-DD HH:mm:ss',
            locale: 'zh-CN'
        });
    });
    </script>

（4）最大日期、最小日期

代码语言：javascript复制

        $('#datetimepicker1').datetimepicker({
            format: 'YYYY-MM-DD',//日期格式化，只显示日期
            locale: 'zh-CN',      //中文化
            maxDate: '2017-01-01',//最大日期
            minDate: '2010-01-01' //最小日期
        });

bootstrap

0 人点赞