jQuery日期和时间插件（jquery-ui-timepicker-addon.js）新

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

菜鸟小窝

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

阅读量789

点赞数 1

分类专栏： Web前端

本文链接：https://blog.csdn.net/qq_25775675/article/details/107565787

版权

Web前端专栏收录该内容

27 篇文章 2 订阅

订阅专栏

案例效果

在这里插入图片描述

案例源码

<!DOCTYPE html>
<head>
    <title>日期控件jquery-ui-timepicker-addon</title>
    <link href="jquery-ui-1.12.1/jquery-ui.css" rel="stylesheet">
    <link href="jQuery-Timepicker-Addon/jquery-ui-timepicker-addon.css" rel="stylesheet" type="text/css"/>

    <script src="jquery/3.3.1/jquery.js" type="text/javascript"></script>
    <script src="jquery-ui-1.12.1/jquery-ui.js" type="text/javascript"></script>
    <script src="jQuery-Timepicker-Addon/jquery-ui-timepicker-addon.js" type="text/javascript"></script>
    <script src="jQuery-Timepicker-Addon/i18n/jquery-ui-timepicker-zh-CN.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //日期
            var dayNamesMin = ["日", "一", "二", "三", "四", "五", "六"];
            var monthNamesShort = ["01月", "02月", "03月", "04月", "05月", "06月", "07月", "08月", "09月", "10月", "11月", "12月"];
            $("#time").datetimepicker({
                controlType: "select",
                dayNamesMin: dayNamesMin,
                monthNamesShort: monthNamesShort,
                changeMonth: true,
                changeYear: true,
                yearRange: "c-30:c+10",
                showSecond: true,
                dateFormat: "yy-mm-dd",
                timeFormat: "HH:mm:ss"
            });
        });
    </script>
</head>
<body>
<input id="time" type="text"/>
</body>
</html>

案例下载

https://gitee.com/cnxw/jQuery-Timepicker-Addon-Use.git

文档

https://trentrichardson.com/examples/timepicker/

文档中有的参数可能找不到，我们可以debug找一下。
例如：yearRange: “c-30:c+10”, 这个设置可选年份的参数，文档中就没有找到。

1、先找下年份选择框的class。

在这里插入图片描述

2、然后看到以下代码，就可以找到我们想要的参数了。

在这里插入图片描述

参考

https://blog.csdn.net/x1207008324/article/details/80439507
https://blog.csdn.net/hongwangzhang/article/details/48714575

菜鸟小窝

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
jQuery日期和时间插件（jquery-ui-timepicker-addon.js）新

案例效果案例源码<!DOCTYPE html><head> <title>日期控件jquery-ui-timepicker-addon</title> <link href="jquery-ui-1.12.1/jquery-ui.css" rel="stylesheet"> <link href="jQuery-Timepicker-Addon/jquery-ui-timepicker-addon.css" r
复制链接

扫一扫