脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JS日期时间选择器,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。
本文介绍一种日期和时间选择器的用法。此选择器由jqueryUI实现,支持精确到毫秒的时间选择。
此选择器项目地址为https://trentrichardson.COM/examples/timepicker/
Demo地址为:https://www.helloweba.com/demo/timepicker/
下载地址:https://download.csdn.net/detail/yanwushu/7721933
效果图
此控件使用非常简单,只需要引入js和css,然后在加上一句jquery代码即可。
<scripttyPE=text/javascript src=../Commons/DateTimePicker/js/jquery-1.7.2.min.js></script>
<scripttype=text/javascriptsrc=../Commons/DateTimePicker/js/jquery-ui.js></script>
<scripttype=text/javascriptsrc=../Commons/DateTimePicker/js/jquery-ui-slide.min.js></script>
<script type=text/javascriptsrc=../Commons/DateTimePicker/js/jquery-ui-timepicker-addon.js></script>
<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-p .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-p dl { text-align: left; }
.ui-timepicker-p dl dt { height: 25px; margin-bottom: -25px; }
.ui-timepicker-p dl dd { margin: 0 10px 10px 65px; }
.ui-timepicker-p 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}
$('#example_1').datetimepicker();
如果只需要显示时间,则:
$('#example_2').timepicker();
定义时间格式:
$('#example_3').datetimepicker({
showSecond: true,
showMillisec: true,
timeFormat: 'hh:mm:ss:l'
});
觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的javascript代码实例教程-JS日期时间选择器全部内容,希望文章能够帮你解决javascript代码实例教程-JS日期时间选择器所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。