使用layui中layDate时间组件

清疚 2023-07-13 03:55 43阅读 0赞

普通的input框中的type="data"可以是选择时间 年月日，具体的时间时没有办法选择的，不知道怎么调，改动起来比较费事 也没有什么样式效果，  
![在这里插入图片描述][2020031013412028.png]  
因为项目中使用layuid的组件比较多我就直接使用layDate组件了，  
时间格式号调节，格式很多需要什么自己改动就行（根据自己需要来）。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQxMTU2OQ_size_16_color_FFFFFF_t_70]

### 使用方法（很简单，引入调用即可） ###

**1、首先下载layDate的js文件，用线上的也可以 但不建议使用（测试的还可**以）  
[点击到下载页面][Link 1]，或者访问`https://www.layui.com/laydate/`  
下载好了根据自己情况引入到项目中即可，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQxMTU2OQ_size_16_color_FFFFFF_t_70 1]  
我把他放到了框架静态资源处，

**2、显示控件**

//控件
    <input type="text" name="pizhuntime" id="test" >
    
    <script>
    //日期时间选择器
    laydate.render({  
      elem: '#test'
      ,type: 'datetime'
      ,trigger: 'click'
    });
    </script>

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQxMTU2OQ_size_16_color_FFFFFF_t_70 2]

=========================================================  
[点击查看控件格式][Link 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQxMTU2OQ_size_16_color_FFFFFF_t_70 3]

**3、也可以自定义时间格式，需要什么格式根据样式代码更改就好了**

//自定义日期格式
    laydate.render({  
      elem: '#test'
      ,format: 'yyyy年MM月dd日' //可任意组合
    });

例如：

<table> 
 <thead> 
  <tr> 
   <th>页面格式</th> 
   <th>示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>yyyy-MM-dd HH:mm:ss</td> 
   <td>2017-08-18 20:08:08</td> 
  </tr> 
  <tr> 
   <td>yyyy年MM月dd日 HH时mm分ss秒</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>dd/MM/yyyy</td> 
   <td>02/03/2020</td> 
  </tr> 
  <tr> 
   <td>yyyy年M月</td> 
   <td>2020年3月</td> 
  </tr> 
  <tr> 
   <td>北京时间：HH点mm分</td> 
   <td>北京时间：19点10分</td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQxMTU2OQ_size_16_color_FFFFFF_t_70 4]

[2020031013412028.png]: https://img-blog.csdnimg.cn/2020031013412028.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQxMTU2OQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200310134352299.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQxMTU2OQ==,size_16,color_FFFFFF,t_70
[Link 1]: https://www.layui.com/laydate/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQxMTU2OQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200310135330286.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQxMTU2OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQxMTU2OQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200310143949809.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQxMTU2OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQxMTU2OQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200310142545472.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQxMTU2OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQxMTU2OQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200310143534436.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQxMTU2OQ==,size_16,color_FFFFFF,t_70