Jquery 日历控件(可以设置时、分、秒)

最新推荐文章于 2014-10-27 17:26:47 发布

doubleicon

最新推荐文章于 2014-10-27 17:26:47 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签：日历控件设置时分秒的日历控件

本文链接：https://blog.youkuaiyun.com/u011872945/article/details/24720621

jquery 专栏收录该内容

16 篇文章

订阅专栏

该博客介绍了如何使用Jquery实现一个日历控件，并且详细说明了如何添加设置时、分、秒的功能，帮助开发者创建更全面的时间选择体验。

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

Jquery 日历控件，可以设置时、分、秒。

首先引入js:

<script src="scripts/jquery2.0.2.js" type="text/javascript"></script>
    <link href="scripts/jquery-ui/css/smoothness/jquery-ui-1.10.2.custom.css" rel="stylesheet"
        type="text/css" />
    <script src="scripts/jquery-ui/js/jquery-ui-1.10.2.custom.js" type="text/javascript"></script>
    <script src="scripts/jquery-ui/js/jquery-ui-timepicker-addon.js" type="text/javascript"></script>

    <!--设置语言 如果不引入 默认是英文-->
    <script src="scripts/jquery-ui/js/jquery-ui-datepicker-zh_CN.js" type="text/javascript"></script>

调用代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="scripts/jquery2.0.2.js" type="text/javascript"></script>
    <link href="scripts/jquery-ui/css/smoothness/jquery-ui-1.10.2.custom.css" rel="stylesheet"
        type="text/css" />
    <script src="scripts/jquery-ui/js/jquery-ui-1.10.2.custom.js" type="text/javascript"></script>
    <script src="scripts/jquery-ui/js/jquery-ui-timepicker-addon.js" type="text/javascript"></script>

    <!--设置语言 如果不引入 默认是英文-->
    <script src="scripts/jquery-ui/js/jquery-ui-datepicker-zh_CN.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function () {
            $("#begin_date").datetimepicker({
                defaultDate: "+7d",
                dateFormat: "yy-mm-dd",
                timeFormat: "HH:mm:ss",
                changeYear: true,
                changeMonth: true,
                numberOfMonths: 1
            });
            $("#end_date").datepicker({
                dateFormat: "yy-mm-dd",
                changeYear: true,
                changeMonth: true,
                numberOfMonths: 1,
                onClose: function (selectedDate) {
                }
            });
        });
    </script>
</head>
<body>
 <input type="text" id="begin_date" />
  <input type="text" id="end_date" />
</body>
</html>

示例下载地址：http://download.youkuaiyun.com/detail/u011872945/7271039