首页 > 代码库 > 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 。