首页 > 代码库 > jquery UI datepicker 添加时间的选择。
jquery UI datepicker 添加时间的选择。
仅有日期的原始效果图:
支持时间选择的目标效果图:
第一步:引入几个重要的jquery UI 文件,其中zh-CN.js是支持中文的
<script href=http://www.mamicode.com/"Js/Jquery/jquery.js"/><script/> <script href=http://www.mamicode.com/"Js/jqueryui/jquery.ui.js"/><script/> <script href=http://www.mamicode.com/"Js/jqueryui/i18n/zh-CN.js"/><script/> <css href=http://www.mamicode.com/"Js/jquery.ui/themes/ui-lightness/jquery.ui.css" />
第一步完成后,支持日期选择的图1效果出来了,但是不支持时间选择,接下来需要导入另一个js ,那就是jquery-ui-timepicker-addon.js 这是一个国外作者写的datepicker的扩展,可以完美支持时间的选择,依附于datepicker 。
官网说明:http://trentrichardson.com/examples/timepicker/
第二步:导入 jquery-ui-timepicker-addon.js
<script href="http://www.mamicode.com/Js/Jquery/jquery-ui-timepicker-addon.js"/><script/>
第三步:给目标元素绑定js 函数,形成选择框
1)仅支持日期选择的绑定方式:
$(‘#add_time_from‘).datepicker({dateFormat: ‘yy-mm-dd‘});
2)支持日期 时间选择的绑定方式:
$("#add_time_from").datetimepicker({ timeText: ‘时间‘, hourText: ‘小时‘, minuteText: ‘分钟‘, secondText: ‘秒‘, currentText: ‘现在‘, closeText: ‘完成‘, showSecond: true, //显示秒 timeFormat: ‘hh:mm:ss‘//格式化时间 });
HTML
开始时间:<input type="text" value="{$query.add_time_from}" id="add_time_from" name="add_time_from" class="pick_date" />
第四步:css 修饰一下,不然出现错位的现象,官网中有详细的说明:
<style> .ui-timepicker-div .ui-widget-header { margin-bottom: 8px; } .ui-timepicker-div dl { text-align: left; } .ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; } .ui-timepicker-div dl dd { margin: 0 10px 10px 40%; } .ui-timepicker-div td { font-size: 90%; } .ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; } .ui-timepicker-rtl{ direction: rtl; } .ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; } .ui-timepicker-rtl dl dt{ float: right; clear: right; } .ui-timepicker-rtl dl dd { margin: 0 40% 10px 10px; } .queryInput2{padding-left:8px;width:130px;} </style>
到此图2中的目标效果达到了,
注:如果选择框不出来什么的 可能是导入的jquery 版本老了,可以下载最新版本的jquery UI 和最新版本的Jquery.js 。
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。