input输入框输入日期之layDate日期与时间组件的使用

桃扇骨 2023-06-30 06:56 163阅读 0赞

# 先上效果图： #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9uU25t_size_16_color_FFFFFF_t_70][]

> **咱们这里 就用本地html演示，在项目里的话，导入正确路径即可**

本地构建目录：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9uU25t_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9uU25t_size_16_color_FFFFFF_t_70 2][]

# 第一步： #

> **使用lyaui当然需要下载layui组件**

[官网下载即可，点击这里][Link 1]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9uU25t_size_16_color_FFFFFF_t_70 3][]

下载完成后，只需要layui文件夹即可，放到自己的项目中。

![20200115170223320.png][]

# 第二步： #

> **下载layDate控件**

[点击这里，官网下载][Link 2]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9uU25t_size_16_color_FFFFFF_t_70 4][]

完成后，只需要laydate文件夹即可。

# 第三步：index.html（演示） #

按照文件目录 建立好项目目录。自己的项目话，引用对文件路径就ok了。

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <title>layDate日期与时间组件的使用</title>
      
        <link rel="stylesheet" href="static/laydate/theme/default/laydate.css" media="all">
    	<link rel="stylesheet" href="static/layui/layui.css">
    </head>
    <body>
    <input type="text" placeholder="请选择开始日期" id="startDate">
    
    
    <script src="static/layui/layui.js"></script>
    <script>
        layui.use('laydate', function(){
            var laydate = layui.laydate;
    
    
            //时间选择器
            laydate.render({
                elem: '#startDate'
                ,type: 'datetime'
            });
    
        });
    </script>
    
    
        <script type="text/javascript" src="static/laydate/laydate.js"></script>
        <script type="text/javascript" src="static/jquery.js"></script>
    </body>
    </html>

**完成后，双击打开index.**

![20200115170922939.png][]

**最终效果：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9uU25t_size_16_color_FFFFFF_t_70 5][]

**快加入自己的项目中使用吧！！！**

**（小白笔记，不喜勿喷）**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9uU25t_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200115164429357.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9uU25t,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9uU25t_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020011517031481.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9uU25t,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9uU25t_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200115170324420.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9uU25t,size_16,color_FFFFFF,t_70
[Link 1]: https://www.layui.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9uU25t_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200115170139287.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9uU25t,size_16,color_FFFFFF,t_70
[20200115170223320.png]: https://img-blog.csdnimg.cn/20200115170223320.png
[Link 2]: https://www.layui.com/laydate/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9uU25t_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200115170532368.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9uU25t,size_16,color_FFFFFF,t_70
[20200115170922939.png]: https://img-blog.csdnimg.cn/20200115170922939.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9uU25t_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/2020011517100044.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9uU25t,size_16,color_FFFFFF,t_70