日期和时间选择器：DateTime Picker日期和时间选择器：DateTime Picker一、概述

75 阅读 0 评论 50 点赞

我是靠谱客的博主烂漫星星，最近开发中收集的这篇文章主要介绍日期和时间选择器：DateTime Picker日期和时间选择器：DateTime Picker一、概述，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

日期和时间选择器：DateTime Picker

一、概述

下载：
http://www.malot.fr/bootstrap-datetimepicker/
指南：
http://www.malot.fr/bootstrap-datetimepicker/demo.php
导入css、js

<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker.zh-CN.js"></script>

基础案例一

<input type="text" id="form-date">
<script type="text/javascript">
	$("#form-date").datetimepicker();
</script>

基础案例二

<input type="text" id="form-date">
<script type="text/javascript">
	$("#form-date").datetimepicker({
		format:'yyyy-mm-dd',//日期格式,默认值：'mm / dd / yyyy'
		language:'zh-CN',//中文,默认值：'en'
		minView: 'month',//datetimepicker应该显示的最低视图,默认值：0，'hour'
		autoclose:true//是否在选择日期后立即关闭datetimipicker，默认值：false
	});
</script>

日期格式（format属性）
p：子午线（“am”或“pm”） - 根据区域设置文件
P：子午线大写（“AM”或“PM”） - 根据区域设置文件
s：没有前导零的秒
ss：秒，带前导零的2位数字
i：没有前导零的时间
ii：分钟，带前导零的2位数字
h：小时无前导零 - 24小时格式
hh：小时，2位数字带前导零 - 24小时格式
H：小时无前导零 - 12小时格式
HH：小时，2位数字带前导零 - 12小时格式
d：没有前导零的月份的日子
dd：月的日期，带前导零的2位数字
m：没有前导零的月份的数字表示
mm：月的数字表示，带前导零的2位数字
M：一个月的短文本表示，三个字母
MM：一个月的全文表示，例如1月或3月
yy：一年的两位数表示
yyyy：全年数字表示，4位数字
可用视图：
0或“hour”
1天或“day”为天视图
2或“month”视图（默认）
3年或“year”为12个月概述
4年或“decade”的10年概览。适用于生日的datetimepickers
其他属性：
1）weekStart：星期几开始。0（星期日）至6（星期六），默认值：0
2）startDate：可能选择的最早日期; 所有较早的日期将被禁用。默认值：开始时间
3）endDate：可能选择的最后日期; 所有以后的日期将被禁用。默认值：结束时间
4）daysOfWeekDisabled：应禁用的星期几。值为0（星期日）至6（星期六）。多个值应以逗号分隔。示例：禁用周末：‘0,6’或[0,6]。默认值：’’，[]
5）startView：datetimepicker在打开时应该显示的视图。默认值：2，‘month’
6）maxView：datetimepicker应该显示的最高视图。默认值：4，‘decade’
7）todayBtn：如果为true或“linked”，则在datetimimaker底部显示“Today”按钮，以选择当前日期。如果为真，“Today”按钮将仅将当前日期移动到视图中; 如果“链接”，当前日期也将被选中。默认值：false
8）todayHighlight：如果为真，则突出显示当前日期。默认值：false
9）keyboardNavigation：是否允许通过箭头键导航日期。默认值：true
10）forceParse：是否在选择器关闭时强制解析输入值。也就是说，当用户在输入字段中留下无效日期时，选择器将强制解析该值，并将输入的值设置为符合给定值的新的有效日期。默认值：true
11）minuteStep：用于构建小时视图的增量。每minuteStep分钟创建一个预设。默认值：5
12）pickerPosition：此选项目前仅在组件实现中可用。使用它，您可以将选择器放在输入字段的下方。默认值：‘bottom-right’ （支持其他值：‘bottom-left’）
13）viewSelect：使用此选项，您可以选择将从中选择日期的视图。默认情况下是最后一个，但是您可以选择第一个，因此在每次点击时都会更新日期。Default: (supported values are: ‘decade’, ‘year’, ‘month’, ‘day’, ‘hour’)
14）showMeridian：此选项将对于day和hour视图启用子视图。默认值：false
15）initialDate：您可以使用日期初始化查看器。默认是现在，所以你可以指定昨天或今天在午夜…。默认值：new Date（）
基础案例三：组件
1）需要先在WebContent目录下添加fonts文件夹，添加glyphicon字体
2）

<div class="form-horizontal" style="margin-top:20px;">     
<label class="col-md-1 control-label">组件:</label>
<div id="datetimepicker" class="input-group date col-md-2" data-date-format="yyyy-mm-dd" data-link-field="dtp_input1">
	<input class="form-control" size="16" type="text" value="" readonly >
	<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
	<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
<input type="hidden" id="dtp_input1" value="" /><br/>
</div>

3）

<script>
	$("#datetimepicker").datetimepicker({
		language:'zh-CN',
		minView:'month',
		autoclose:true
	});
</script>

基础案例三：讲解过程
1）输入框组：向基于文本的输入框添加作为前缀和后缀的文本或按钮
a）把前缀或后缀元素放在一个带有 class .input-group 的 <div> 中。

<div class="input-group">
	<input type="text" class="form-control">
</div>

b）接着，在相同的

内，在 class 为 .input-group-addon 的内放置额外的内容。

<span class="input-group-addon">$</span>

c）把该放置在元素的前面或者后面。

<div class="input-group">
	<span class="input-group-addon">$</span>
	<input type="text" class="form-control">
	<span class="input-group-addon">.00</span>
</div>

2）引用glyphicon字体

<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>

3）添加只读属性

<input type="text" class="form-control" readonly>

4）添加js

<script>
	$("#datetimepicker").datetimepicker({
		language:'zh-CN',
		minView:'month',
		autoclose:true
	});
</script>

5）在div中添加.date 样式

<div id="datetimepicker" class="input-group date col-md-2" >

6）在div中添加data-date-format属性,也可以用js设置（format:‘yyyy-mm-dd’）

<div id="datetimepicker" class="input-group date col-md-2"  data-date-format="yyyy-mm-dd">

7）div中的data-date属性，相当于js中的initialDate属性
8）镜像输入元素（在每个更新事件上，使用特定的日期格式更新辅助字段）
a）在div中添加属性data-link-field=“dtp_input1”，其属性值为另外一个文本框元素的id

<div data-link-field="dtp_input1" id="datetimepicker" class="input-group date col-md-2"  data-date-format="yyyy-mm-dd">

b）添加另外的表单元素

<input type="hidden" id="dtp_input1" value="" />

事件触发案例：

$("#datetimepicker2").datetimepicker({
		format:'yyyy-mm-dd',
		language:'zh-CN',
		minView:'month',
		autoclose:true,
		startDate:new Date()
	}).on("hide",function(){//当日期选择器被隐藏时触发。
		alert("控件被隐藏");
	}).on("changeDate",function(){//当日期更改时触发
		alert("日期被改变");
	}).on("outOfRange",function(){//当超出设定的日期范围时触发
		alert("日期超出范围");
	});