前CCIE考官建议: CCIE技术理论学习建议
2011-05-20 19:03
176 查看
原文地址:http://yanwushu.sinaapp.com/js_date_time_picker/本文介绍一种日期和时间选择器的用法。此选择器由jqueryUI实现,支持精确到毫秒的时间选择。此选择器项目地址为http://trentrichardson.com/examples/timepicker/Demo地址为:http://www.helloweba.com/demo/timepicker/下载地址:http://download.csdn.net/detail/yanwushu/7721933
![](http://img.blog.csdn.net/20140806152424421?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWFud3VzaHU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
效果图另外关于js时间选择器还可以参考其他项目http://www.bootcss.com/p/bootstrap-datetimepicker//content/2573607.html
效果图另外关于js时间选择器还可以参考其他项目http://www.bootcss.com/p/bootstrap-datetimepicker//content/2573607.html
大体使用步骤
此控件使用非常简单,只需要引入js和css,然后在加上一句jquery代码即可。引入js库
<scripttype="text/javascript" src="../Commons/DateTimePicker/js/jquery-1.7.2.min.js"></script><scripttype="text/javascript"src="../Commons/DateTimePicker/js/jquery-ui.js"></script><scripttype="text/javascript"src="../Commons/DateTimePicker/js/jquery-ui-slide.min.js"></script><script type="text/javascript"src="../Commons/DateTimePicker/js/jquery-ui-timepicker-addon.js"></script>引入样式
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery-ui.js"></script> <script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script> 除了引入jquery ui的样式外,还需额外加入以下样式,用于控制时间控件的外观。.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; } .ui-timepicker-div dl { text-align: left; } .ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; } .ui-timepicker-div dl dd { margin: 0 10px 10px 65px; } .ui-timepicker-div td { font-size: 90%; } .ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; } .ui_tpicker_hour_label,.ui_tpicker_minute_label,.ui_tpicker_second_label, .ui_tpicker_millisec_label,.ui_tpicker_time_label{padding-left:20px}初始化控件
<input type="text" id="example" /> $('#example_1').datetimepicker(); 如果只需要显示时间,则:$('#example_2').timepicker(); 定义时间格式:$('#example_3').datetimepicker({ showSecond: true, showMillisec: true, timeFormat: 'hh:mm:ss:l' });相关文章推荐
- 针对任何想学习技术的朋友的建议
- 分布式架构基础理论(学习大型网站技术架构)
- 机器学习、深度学习的理论与实战入门建议整理(二)
- 机器学习、深度学习的理论与实战入门建议整理(二)
- 学习网络技术的建议:磨剑何须十年?
- 专家建议:五种最值得学习的JAVA开发技术
- 某运营商高级网络工程师的CCIE学习建议
- 机器学习、深度学习的理论与实战入门建议整理(一)
- 机器学习、深度学习的理论与实战入门建议整理(一)
- 机器学习、深度学习的理论与实战入门建议整理(一)
- 学习技术的10个建议
- 『应用机器学习的建议』的学习笔记 2015/04/12 · IT技术 · 机器学习 分享到: 45 本文由 伯乐在线 - mathshelly 翻译,toolate 校稿。未经许可,禁止转载! 英
- 我将要学习的.NET技术列表,欢迎大家给我提建议!
- 改善C++ 程序的150个建议学习之建议35:使用内存池技术提高内存申请效率与性能
- 机器学习、深度学习的理论与实战入门建议整理(三)
- 技术人员学习新技术的 10 个建议
- 机器学习、深度学习的理论与实战入门建议整理(二)
- 机器学习、深度学习的理论与实战入门建议整理(一)
- 深度学习理论与技术的重点研究方向
- Spark 专题理论学习与技术实践