日期和时间选择器:DateTime Picker
目录结构:
1.bootstrap-datetimepicker-master.zip:源文件
2.bootstrap_datetimepicker_demo:自己编写的案例项目
一、概述
1.下载:
http://www.malot.fr/bootstrap-datetimepicker/
2.指南:
http://www.malot.fr/bootstrap-datetimepicker/demo.php
3.导入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>
4.基础案例一
<input type="text" id="form-date">
<script type="text/javascript">
$("#form-date").datetimepicker();
</script>
5.基础案例二
<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>
6.日期格式(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位数字
7.可用视图:
0或“hour”
1天或“day”为天视图
2或“month”视图(默认)
3年或“year”为12个月概述
4年或“decade”的10年概览。适用于生日的datetimepickers
8.其他属性:
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()
9.基础案例三:组件
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>
10.基础案例三:讲解过程
1)输入框组:向基于文本的输入框添加作为前缀和后缀的文本或按钮
a)把前缀或后缀元素放在一个带有 class .input-group 的 <div> 中。
<div class="input-group">
<input type="text" class="form-control">
</div>
b)接着,在相同的 <div> 内,在 class 为 .input-group-addon 的 <span> 内放置额外的内容。
<span class="input-group-addon">$</span>
c)把该 <span> 放置在 <input> 元素的前面或者后面。
<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="" />
11.事件触发案例:
$("#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("日期超出范围");
});
没有合适的资源?快使用搜索试试~ 我知道了~
时间选择器bootstrap-datetimepicker
共30个文件
js:6个
css:4个
map:2个
需积分: 50 54 下载量 97 浏览量
2018-11-05
10:09:48
上传
评论 1
收藏 780KB RAR 举报
温馨提示
时间选择器bootstrap-datetimepicker,包含有演示代码和使用到的相关资料
资源推荐
资源详情
资源评论
收起资源包目录
时间选择器bootstrap-datetimepicker.rar (30个子文件)
DateTime Picker 教案.txt 8KB
bootstrap_datetimepicker_demo
WebContent
css
bootstrap.css.map 380KB
bootstrap.min.css 118KB
bootstrap.css 143KB
bootstrap-datetimepicker.min.css 11KB
bootstrap-datetimepicker.css 12KB
bootstrap.min.css.map 529KB
META-INF
MANIFEST.MF 39B
WEB-INF
web.xml 672B
lib
fonts
glyphicons-halflings-regular.woff 23KB
glyphicons-halflings-regular.woff2 18KB
glyphicons-halflings-regular.ttf 44KB
glyphicons-halflings-regular.eot 20KB
glyphicons-halflings-regular.svg 106KB
index.html 3KB
js
jquery.min.js 94KB
bootstrap-datetimepicker.zh-CN.js 813B
bootstrap.min.js 36KB
bootstrap-datetimepicker.js 68KB
bootstrap-datetimepicker.min.js 38KB
bootstrap.js 68KB
.settings
org.eclipse.wst.jsdt.ui.superType.name 6B
org.eclipse.wst.common.project.facet.core.xml 345B
org.eclipse.wst.common.component 539B
org.eclipse.wst.jsdt.ui.superType.container 49B
.jsdtscope 503B
org.eclipse.jdt.core.prefs 364B
src
.project 1KB
.classpath 842B
build
classes
bootstrap-datetimepicker-master.zip 469KB
共 30 条
- 1
资源评论
老实先生
- 粉丝: 125
- 资源: 17
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 基于SSM写的停车场管理系统,加入了车牌识别和数据分析+源码+文档说明
- stream-response.txt
- Python库d和OpenCV来实现眼部闭合检测,主要用于评估用户是否眨眼
- 使用Python库dlib和OpenCV来实现面部特征点的检测和标注
- 强大好用的人体关键点标注工具
- mmexport1713375197200.png
- LP.mlx
- 17期基础网络笔记.one
- bugreport-venus-TKQ1.220829.002-2024-04-18-00-45-35.zip
- bitnami-redmine-4.1.1-2-linux-x64-installer.run(实测可用)
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功