bootstrap之datetimepicker(日期时间选择器)插件详细使用方法

1.介绍

datetimepicker是bootstrap中的一款日期和时间选择器，其使用和配置方法较为简单
2.首先需要引入的js和css文件：
  
  

   
   css：
  
  
  
  

   
   
   
   

    
    bootstrap.min.css（含有bootstrap 所有css）
   
   
   
   

    
    bootstrap-datetimepicker.min.css（日期控件所需的样式表）
   
   
   
   

    
    js：
   
   
   
   

    
    jquery-1.11.1.min.js（其他版本的jquery也可以）
   
   
   
   

    
    bootstrap.min.js（含有bootstrap 所有js）
   
   
   
   

    
    bootstrap-datetimepicker.js（日期控件所需的js）
   
   
   
   

    
    bootstrap-datetimepicker.zh-CN.js（日期控件中文文件）
   
   
   
   

    
    说明：引入js时，
    
    jquery-1.11.1.min.js必须在bootstrap.min.js之前。后者依托前者。

    
    
3.使用方法
   
   
   
   
3.1普通日期选择
添加选择器的input输入框
   
   
<input id="datetimeStart" value="2016-09-14">
   
   
js文件中的配置：
$('#datetimeStart').datetimepicker({
	format: 'yyyy.mm',  //显示格式可为yyyymm/yyyy-mm-dd/yyyy.mm.dd
	weekStart: 1,  	//0-周日,6-周六 。默认为0
	autoclose: true,  
	startView: 3,  	//打开时显示的视图。0-'hour' 1-'day' 2-'month' 3-'year' 4-'decade' 
	minView: 3,  	//最小时间视图。默认0-'hour'
// 	maxView: 4, 	//最大时间视图。默认4-'decade'
// 	todayBtn:true, 	//true时"今天"按钮仅仅将视图转到当天的日期。如果是'linked'，当天日期将会被选中。 
// 	todayHighlight:true,	//默认值: false,如果为true, 高亮当前日期。
	initialDate: new Date(),	//初始化日期.默认new Date()当前日期
	forceParse: false,  	//当输入非格式化日期时，强制格式化。默认true
	bootcssVer:3,	//显示向左向右的箭头
	language: 'zh-CN' //语言
});
效果如下：
	其他属性可到官网查看  http://www.bootcss.com/p/bootstrap-datetimepicker
3.2两个日期控件。使得开始日期与结束日期之间建立相互约束关系。即开始日期不能大于结束日期，结束日期不能小于开始日期。
   
   
html代码：
<input size="16" type="text" id="datetimeStart" readonly class="form_datetime">
--
<input size="16" type="text" id="datetimeEnd" readonly class="form_datetime">

js代码：
<script type="text/javascript">
    $("#datetimeStart").datetimepicker({
        format: 'yyyy-mm-dd',
        minView:'month',
        language: 'zh-CN',
        autoclose:true,
        startDate:new Date()
    }).on("click",function(){
        $("#datetimeStart").datetimepicker("setEndDate",$("#datetimeEnd").val())
    });
    $("#datetimeEnd").datetimepicker({
        format: 'yyyy-mm-dd',
        minView:'month',
        language: 'zh-CN',
        autoclose:true,
        startDate:new Date()
    }).on("click",function(){
        $("#datetimeEnd").datetimepicker("setStartDate",$("#datetimeStart").val())
    });
</script>

效果如下：

参考：http://www.cnblogs.com/gscq073240/articles/6413972.html

4.补充

效果图在官网下载的演示文件中。