基于JQuery的时间选择器（支持中文）

最新推荐文章于 2024-05-11 09:56:24 发布

han_mj

最新推荐文章于 2024-05-11 09:56:24 发布

阅读量1.2k

点赞数

分类专栏：前端文章标签： jquery html javascript

本文链接：https://blog.csdn.net/qq_41726230/article/details/105961988

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

因为毕业设计的项目中需要用到时间选择器，然而基于Bootstrap的时间选择器时能精确到5min，所以就做了一个基于JQuery的时间选择器demo。

一、demo展示
在这里插入图片描述

二、项目结构

其中css/images中的两张图片是必须要的，它是选择月份的两个箭头图标所必需的。jquery-ui中本身就有日期选择器，这里通过jquery-ui-timepicker-addon来将日期选择器扩展成日期时间选择器。

三、index.html文件如下

<html>
<head>
    <link rel="stylesheet" href="./css/jquery-ui.css">
    <link rel="stylesheet" href="./css/jquery-ui-timepicker-addon.css">
    <title>index</title>

</head>
<body>
    <input type="text" id="start_time" />

    <script src="./js/jQuery-2.2.0.min.js"></script>
    <script src="./js/jquery-ui.js"></script>
    <script src="./js/jquery-ui-timepicker-addon.js"></script>
    <script src="js/jquery.ui.datepicker-zh-CN.js" type="text/javascript" charset="gb2312"></script>
    <script src="js/jquery-ui-timepicker-zh-CN.js" type="text/javascript" charset="utf8"></script>

    <script type="text/javascript">
    $(function(){
        $("#start_time").datetimepicker({
            timeFormat: "HH:mm:ss",
            dateFormat: "yy-mm-dd"
        });


    });
    
    </script>
</body>

</html>