非常强大的时间日期插件 --- JeDate.js

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

百世经纶『一页書』

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

阅读量3.6k

点赞数

分类专栏： Front Springboot 文章标签： js

本文链接：https://blog.csdn.net/weixin_43916074/article/details/124326043

版权

Springboot 同时被 2 个专栏收录

24 篇文章 1 订阅

订阅专栏

Front

17 篇文章 1 订阅

订阅专栏

非常强大的时间日期插件 --- JeDate.js

- 1.下载Jedate包
- 2.整合到自己的项目

1.下载Jedate包

http://www.jemui.com/jedate/ .

1.先点击链接，进入JeDate网站

2.双击index.html,见识到JeDate的强大

2.整合到自己的项目

1.在自己的html页面导入这几个包

2.代码如下

<!doctype html>
<html >
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>jeDate日期控件(原生JS) - 演示</title>
    <link type="text/css" rel="stylesheet" href="../static/jedate/test/jeDate-test.css">
    <link type="text/css" rel="stylesheet" href="../static/jedate/skin/jedate.css">
    <script type="text/javascript" src="../static/jedate/src/jedate.js"></script>
</head>
<body>
<div class="jebody">
    <div class="jewarp">
        <h3 class="gray">有效、无效日期限制</h3>
        <div class="content">
            <div class="jeitem">
                <label class="jelabel">有效日期正向限制</label>
                <div class="jeinpbox"><input type="text" class="jeinput" id="test20" placeholder="YYYY年MM月DD日"></div>
            </div>
            <div class="jeitem">
                <label class="jelabel">无效日期正向限制</label>
                <div class="jeinpbox"><input type="text" class="jeinput" id="test22" placeholder="YYYY年MM月DD日"></div>
            </div>
            <div class="jeitem">
                <label class="jelabel">指定日期正向限制</label>
                <div class="jeinpbox"><input type="text" class="jeinput" id="test24" placeholder="YYYY年MM月DD日"></div>
            </div>
            <div class="jeitem">
                <label class="jelabel">有效日期反向限制</label>
                <div class="jeinpbox"><input type="text" class="jeinput" id="test21" placeholder="YYYY年MM月DD日"></div>
            </div>
            <div class="jeitem">
                <label class="jelabel">无效日期反向限制</label>
                <div class="jeinpbox"><input type="text" class="jeinput" id="test23" placeholder="YYYY年MM月DD日"></div>
            </div>
            <div class="jeitem">
                <label class="jelabel">指定日期反向限制</label>
                <div class="jeinpbox"><input type="text" class="jeinput" id="test25" placeholder="YYYY年MM月DD日"></div>
            </div>
        </div>
    </div>
    <div class="jewarp">
        <h3 class="gray">直接展示日历</h3>
        <div class="content">
            <div class="jefixeitem" id="show01"></div>
            <div class="jefixeitem" id="show02"></div>
            <div class="jefixeitem" id="show03"></div>
            <div class="jefixeitem" id="show04"></div>
        </div>
    </div>
</div>
<script type="text/javascript" >
    jeDate("#show01",{
        isShow:false,
        format: "YYYY-MM-DD hh:mm:ss"
    });
    jeDate("#show02",{
        isShow:false,
        format: "YYYY-MM"
    });
    jeDate("#show03",{
        isShow:false,
        format: "YYYY"
    });
    jeDate("#show04",{
        isShow:false,
        format: "hh:mm:ss"
    });

</script>
</body>
</html>