日期时间选择器:datetimepicker

2012年04月13日 16:40helloweba.com 作者:月光光 标签:jQuery 

在上一篇文章中,我们了解了jquery ui提供的日期选择器:datepicker的使用,那么我们在应用中还会遇到选择日期的同时还要选择时间情况,大多数开发人员可能会使用下拉框实现选择时分秒,而幸运的是有一个日期时间选择器:datetimepicker,它能将datepicker结合在一起,能在选择日期的同时选择时间。

日期时间选择器:datetimepicker

准备工作

Datetimepicker依赖于jquery和jquery ui,因此,您首先要获取jquery库和jquery ui以及datetimepicker,点击这里下载最新版的datetimepicker

在html页面中head中加入以下代码:

<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>

然后在body建加入一行代码:

<input type="text" id="example" />

CSS

注意,除了引入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}

jQuery

当输入框获得焦点时,调用datetimepicker。

$('#example_1').datetimepicker();

如果只需要显示时间,则:

$('#example_2').timepicker();

定义时间格式:

$('#example_3').datetimepicker({
	 showSecond: true,
	 showMillisec: true,
	 timeFormat: 'hh:mm:ss:l'
});

点击这里查看更多demo。

声明:本文为原创文章,helloweba.net和作者拥有版权,如需转载,请注明来源于helloweba.net并保留原文链接:https://www.helloweba.net/javascript/169.html

60条评论

  • niubitelei

    手机里不能拉时和分怎么解 求大佬

  • 输入昵称

    自我解答一下,jquery可以多个版本共存,可百度一下,如果只是用一下这个插件,就在最开始引用1.7 的jq,然后加上
    <script type="text/javascript">
    var _$ = jQuery.noConflict(true);
    </script>
    后面再引用其它版本的jq就ok了

  • 输入昵称

    是jquery-ui-slide.min.js:41,这个错误 Uncaught TypeError: Cannot read property 'addClass' of undefined

  • 输入昵称

    页面使用的是jquery 1.11.1,这个版本jquery-ui.js会报一个addClass的错误,这个怎么解决?

  • BiWinner

    手机触摸支持添加jquery-ui-touch-punch.js
    加载 支持加上
    $('#datetimepicker').draggable();
    就可以了.

  • ajing

    手机端不可以拉动分秒、怎么破?

  • 选择年份的select下拉框怎么才能选择更多的年份呢,默认显示的可选择范围是20年

  • 有 option 的。

  • 怎么我的 只显示日期 没有时分秒啊

  • 貌似你的压缩包缺文件了,不能用呀,大哥

  • 客气

  • 点击没反应什么的,都是jq版本的问题;那个msie的问题,是因为这个插件需要用到jQuery,而jQuery1.9.*之后的就没有用$.brower这个对象了,所以报错。我查了很多文档,找到个解决方法,加如下代码,手动定义brower.
    jQuery.browser = {};
    (function () {
    jQuery.browser.msie = false;
    jQuery.browser.version = 0;
    if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) {
    jQuery.browser.msie = true;
    jQuery.browser.version = RegExp.$1;
    }
    })();

    main.css不存在的问题,直接注释掉就行,没多大用。

  • jQuery版本高于1.9.*就不好使

  • 谢谢

  • 下載下來,怎麼沒有用的???點擊任何一個輸入框都不反應的???[抓狂]

  • 源码里没有main.css

  • 怎样可以格式化时间呢?怎样控制日历框,时间框是否显示呢?

  • 不好用。。。

  • 有一个 datepicker插件

  • 有一个 datepicker插件