jQuery-Timepicker-Addon 日期和时分秒控件-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_11197/article/details/82609025

本文介绍如何使用 jQuery UI 和时间选择器插件配置一个具备日期和时间选择功能的输入框。详细展示了 HTML 和 JavaScript 代码，包括引入必要的 CSS 和 JS 文件、设置中文环境以及初始化时间选择器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转自：
[url]http://www.cnblogs.com/stone_w/archive/2012/11/22/2783044.html[/url]

[color=red]注意：
如果系统是内部系统，也就是系统不能访问外网，那么一般需要将css和js文件下载下来，存放在应用本地，这个时候也需要下载jquery-ui.css等文件用到的图片资源，否则样式会有问题，一些小图标显示不出来。[/color]

<html>
<head>
    <title></title>
    <link type="text/css" href="http://code.jquery.com/ui/1.9.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />

    <link href="jQuery-Timepicker-Addon/jquery-ui-timepicker-addon.css" type="text/css" />
    <link href="jQuery-Timepicker-Addon/demos.css" rel="stylesheet" type="text/css" />

    <script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script>
    <script src="jQuery-Timepicker-Addon/jquery-ui-timepicker-addon.js" type="text/javascript"></script>

    <!--中文-->
    <script src="js/jquery.ui.datepicker-zh-CN.js.js" type="text/javascript" charset="gb2312"></script>
    <script src="js/jquery-ui-timepicker-zh-CN.js" type="text/javascript"></script>
    <script type="text/javascript">
        jQuery(function () {
            // 时间设置
            jQuery('#time').datetimepicker({
                timeFormat: "HH:mm:ss",
                dateFormat: "yy-mm-dd"
            });

        });
    </script>
</head>
<body>
    <input id="time" type="text" />
</body>
</html>