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代码：

效果如下：
参考：http://www.cnblogs.com/gscq073240/articles/6413972.html

4.补充

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