bootstrap-datetimepicker时间控件的使用

引入js

<link href="/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/bootstrap-datetimepicker.min.css">
<script src="js/bootstrap-datetimepicker.min.js" type="text/javascript" /></script>
<script src="js/bootstrap-datetimepicker.zh-CN.js" type="text/javascript" /></script>

<div class="form-group row">
	<div class="left col-xs-3 text-right">
		<label for="">*时间:</label>
	</div>
	<div class="right col-xs-6 text-left">
	    <div class="input-group">
		 <input type="text" class="form-control form_datetime" id="time" name="time"  placeholder="">
		 <span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-time" aria-hidden="true"></span></span>
	    </div>
	</div>
</div>
<script>

$('.form_datetime').datetimepicker({
	/* minView: "month",  *///选择日期后，不会再跳转去选择时分秒 
	language:  'zh-CN',
	dateFormat: 'yyyy-mm-dd',//日期显示格式
	timeFormat:'HH:mm:ss',//时间显示格式
	todayBtn:  1,
	autoclose: 1,
	minView:0,  //0表示能够选择小时、分钟   1只能够选择小时
	minuteStep:1,//分钟间隔1分钟
});

</script>

format

String. 默认值: 'mm/dd/yyyy'

日期格式， p, P, h, hh, i, ii, s, ss, d, dd, m, mm, M, MM, yy, yyyy 的任意组合。

这个是扯淡的，就是个意思，你能够本身设计样式，可是里面的字母都表明不一样属性：

符号	意义
p	12小时制且小写(‘am’ or ‘pm’)
P	12小时制且大写(‘AM’ or ‘PM’)
s	秒，前面不补0
ss	秒，前面补0
i	分，前面不补0
ii	分，前面补0
h	时，24小时制，前面不补0
hh	时，24小时制，前面补0
H	时，12小时制，前面不补0
HH	时，12小时制，前面补0
d	日，前面不补0
dd	日，前面补0
m	月，数字表示，前面不补0 如：4
mm	月，数字表示，前面补0 如：04
M	月，缩写表示，前面补0 如：Apr
MM	月，全称表示，前面补0 如：April
yy	年，后两位 如：16
yyyy	年，所有 如：2016

 minView — 最精确的时间

Number, String类型 
默认值：0, ‘hour’

日期时间选择器所可以提供的最精确的时间选择视图。

可接受的值：

值	意义
0	从小时视图开始，选分
1	从天视图开始，选小时
2	从月视图开始，选天
3	从年视图开始，选月
4	从十年视图开始，选年

startDate — 开始时间

Date类型 
默认值：开始时间

以前的日期都不能选择，这个时间以后的时间才能选择。

我们作一个经常使用的Demo，就是只能选如今以后的时间：

例如：

var date = new Date();
$("#demo").datetimepicker({
        startDate: date 
        });

endDate— 结束时间

Date类型 
默认值：结束时间

这个时间后面的不能再选择。 
用法同上，再也不赘述。

 

daysOfWeekDisabled — 一周的周几不能选

String, Array类型 
默认值：”, []

0（星期日）到6（星期六） 
能够有多个。

例如：

$("#demo").datetimepicker({
        daysOfWeekDisabled: [0,4,6]
        });

 

autoclose — 选完时间后是否自动关闭

Boolean类型 
默认值：false

当选择一个日期以后是否当即关闭此日期时间选择器。

minView — 最精确的时间

Number, String类型 
默认值：0, ‘hour’

日期时间选择器所可以提供的最精确的时间选择视图。

可接受的值：

值	意义
0	从小时视图开始，选分
1	从天视图开始，选小时
2	从月视图开始，选天
3	从年视图开始，选月
4	从十年视图开始，选年

例如：

$("#demo").datetimepicker({
        minView : 2
        });

 

maxView — 最高能展现的时间

Number, String类型 
默认值：4, ‘decade’

日期时间选择器最高能展现的选择范围视图。

 

todayBtn — 当天日期按钮

Boolean, “linked”类型 
默认值：false’

若是此值为true 或 “linked”，则在日期时间选择器组件的底部显示一个 “Today” 按钮用以选择当前日期。若是是true的话，”Today” 按钮仅仅将视图转到当天的日期，若是是”linked”，当天日期将会被选中。

例如：

$("#demo").datetimepicker({
        todayBtn : true
        });

 

initialDate — 初始化日期时间

 

todayHighlight — 当天日期高亮

Boolean类型 
默认值：false

若是为true, 高亮当前日期。

再也不举例。

keyboardNavigation — 方向键改变日期

Boolean类型 
默认值：false

是否容许经过方向键改变日期。

再也不举例。

language — 语言

String类型 
默认值：’en’

中文：’zh-CN’ (设置中文的时候要引用到中文的js)

forceParse — 强制解析

Boolean类型 
默认值：true

就是你输入的可能不正规，可是它胡强制尽可能解析成你规定的格式（format）

minuteStep — 步进值

Number类型 
默认值：5

此数值被当作步进值用于构建小时视图。就是最小的视图是每5分钟可选一次。是以分钟为单位的。

pickerPosition — 选择框位置

String类型 
默认值：’bottom-right’

还支持 : ‘bottom-left’，’top-right’，’top-left’

能够试试看，他拿出位置会发生变化。

showMeridian — 是否显示上下午

Boolean类型  默认值：false