擴展jquery的Datepicker成爲可選擇時間的Timepicker

在有些需求中是需要選擇時間的而jquery ui的Datepicker是不能選擇時間的,現在找一個擴展了的插件非常好用,在附件中,使用截圖如下:
[img]http://dl.iteye.com/upload/attachment/282058/054f7d8b-175f-3e20-96a5-6ea810b786fa.jpg[/img]
[img]http://dl.iteye.com/upload/attachment/282060/2b600ee6-affb-3dab-a2e6-fe25f2eb86ee.jpg[/img]
1.在使用時需要導入的jquery ui js 文件
jquery.ui.datepicker.js
jquery.ui.slider.js
jquery-ui-timepicker-addon-0.5.js
以及一些ui的必須包。
2.在頁面中加入Timepicker的css

#ui-timepicker-div dl{ text-align: left; }
#ui-timepicker-div dl dt{ height: 25px; }
#ui-timepicker-div dl dd{ margin: -25px 0 10px 65px; }

使用示例如下:

$('#example2').datetimepicker({
ampm: false,//上午下午是否顯示
timeFormat: 'hh:mm',//時間模式
stepHour: 1,//拖動時間時的間隔
stepMinute: 5,//拖動分鐘時的間隔
dateFormat:"yy-mm-dd", //日期格式設定
showHour: true,//是否顯示小時,默認是true
showMinute true//是否顯示分鐘,默認是true
});
<input type="text" name="example2" id="example2" value="" />
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章