学习使用bootstrap之datetimepicker插件

Everyday都不同

浏览: 722656 次
性别:
来自: 宇宙

最近访客更多访客>>

gaoshaoye

hbzyb

loginboot

u012363178

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

bootstrap

bootstrap datetimepicker 时间控件

最近因为要做平台的移植，不能使用之前封装的时间插件。但可以用开源的bootstrap，为了方便自己以后万一还有时间控件的需求，特此记录一下吧。虽然可能大家觉得简单，但是我着实费了一番功夫，话不多少，begin！

做时间控件可以使用bootstrap的datetimepicker插件（如果只需要日期的话直接用datepicker，如果是需要起始、结束日期的范围用daterangepicker就OK），该插件是基于纯js驱动的，跟highcharts类似的原理。

首先，必要的一些css和js必须引入：

bootstrap.min.css：bootstrap的基本样式

bootstrap-datetimepicker.min.css：datetimepicker插件的样式

jquery-1.x.x.min.js：jquery，必须引入，可能不同的bootstrap需要的jquery版本不同

bootstrap.min.js：bootstrap的必要的js

bootstrap-datetimepicker.js：datetimepicker插件必须的js文件

bootstrap-datetimepicker.zh-CN.js：所支持的语言版本插件（一般在bootstrap的local目录下，这里把它单独抽出来~）

好了，我们在开始前，必须要注意：fonts（不能随意改名）目录是必须的，用来存放datetimepicker插件的一些小图片，且必须跟页面所在的目录同级。否则会出现插件的前后箭头等无法显示，如：

页面具体写法如下：（仅供参考）

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <link rel="stylesheet" href="../css/bootstrap.min.css" />
        <link rel="stylesheet" href="../css/bootstrap-datetimepicker.min.css" />
        
        <script type="text/javascript" src="../js/jquery-1.8.3.min.js" charset="UTF-8"></script>
        <script type="text/javascript" src="../js/bootstrap.min.js" ></script>
        
        <script type="text/javascript" src="../js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
        <script type="text/javascript" src="../js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
         <script type="text/javascript">
            $(function() {
                $('.col-md-5').datetimepicker({
                   language: 'zh-CN',
                   format:'yyyy-mm-dd HH:mm',//选择完日期后，input框里的时间值的格式
                   startDate:new Date(),//开始日期时间，在此之前的都不可选，同理也有endDate
		   weekStart: 1,
		   todayBtn:  1,
		   autoclose: 1,
		   todayHighlight: 1,
		   startView: 2,
		   forceParse: 0,
		   showMeridian: 1
               });
            });
        </script>
        
       
    </head>
    <body>
        <div class="form-group">
                <label for="dtp_input2" class="col-md-2 control-label">时间选择</label>
                <div class="input-group date form_date col-md-5" data-date="" data-date-format="" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd" style="padding-right:500">
                    <input class="form-control" size="16" type="text" value="" readonly style="width:150px">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
					<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                </div>
				<input type="hidden" id="dtp_input2" value="" /><br/>
            </div>
      
    </body>
</html>

注意：

$(function(...))里的选择器不能使用id选择器，最好使用class选择器。（因为你在同一个页面中可能不止需要一次时间控件，所以不能写死一个id）；

dateformat属性决定了你input框中的值的格式。

如果你想显示中文，那么必须引入bootstrap-datetimepicker.zh-CN.js，同时language: 'zh-CN'属性也必须指定，才能显示中文。

format属性里面的格式字符串必须要用引号围起来，否则会报yyyy未定义的错误，小细节同样很重要。

选择比较【靠谱儿】的bootstrap版本也很重要，我就因为在这上面选择了不太靠谱的js版本，导致无法如愿加载出时间控件。

效果：