Layui日期插件

我不是女神ヾ 2022-01-22 02:57 455阅读 0赞

Layui日期插件  
开发工具与关键技术： Visual Studio 2015 – Layui日期插件  
作者：廖亚星  
撰写时间：2019年 6 月1日

Layui中的日期插件中包含很多样式，我们可以自己去选入设定  
elem-绑定元素  
类型：string/DOM  
必填项，用于绑定执行日期渲染的元素，值一般为选择器，或DOM对象

1.  laydate.render(\{
2.  elem: ‘\#test’ //或 elem: document.getElementById(‘test’)、elem: lay(’\#test’) 等
3.  \});  
    type-控件选择类型  
    类型：String,默认值date  
    用于单独提供不同的选择器类型，可选值如下:  
    type可选值 名称 用途  
    year 年选择器 只提供年列表选择  
    month 年月选择器 只提供年、月选择  
    date 日期选择器 可选择：年、月、日。type默认值，一般可不填  
    time 时间选择器 只提供时、分、秒选择  
    datetime 日期时间选择器 可选择：年、月、日、时、分、秒  
    range-开启左右面板范围选择  
    类型：Boolean/String，默认值：false，如果设置 true，将默认采用 “ - ” 分割
4.  //年月范围选择
5.  laydate.render(\{
6.  elem: ‘\#test’
7.  ,type: ‘month’
8.  ,range: true //或 range: ‘~’ 来自定义分割字符
9.  \});

format - 自定义格式  
类型：String，默认值：yyyy-MM-dd  
通过日期时间各自的格式符和长度，来设定一个你所需要的日期格式：  
yyyy 年份，至少四位数。如果不足四位，则前面补零  
y 年份，不限制位数，即不管年份多少位，前面均不补零  
MM 月份，至少两位数。如果不足两位，则前面补零。  
M 月份，允许一位数。  
dd 日期，至少两位数。如果不足两位，则前面补零。  
d 日期，允许一位数。  
HH 小时，至少两位数。如果不足两位，则前面补零。  
H 小时，允许一位数。  
mm 分钟，至少两位数。如果不足两位，则前面补零。  
m 分钟，允许一位数。  
ss 秒数，至少两位数。如果不足两位，则前面补零。  
s 秒数，允许一位数。

1.  //自定义日期格式
2.  laydate.render(\{
3.  elem: ‘\#test’
4.  ,format: ‘yyyy年MM月dd日’
5.  \});  
    下面我们运用Layui中的日期插件，可以在页面中轻松显示时间，不需要繁杂的自己写入代码  
    首先我们要引用Layui的CSS及JS插件  
    ![在这里插入图片描述][20190604214146215.PNG]  
    ![在这里插入图片描述][20190604214157682.PNG]  
    现在我们在代码要给它一个ID  
    ![在这里插入图片描述][20190604214208402.PNG]  
    JS代码  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDY4MQ_size_16_color_FFFFFF_t_70]  
    这样一个简单，并带有节日的日期就做好了  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDY4MQ_size_16_color_FFFFFF_t_70 1]

[20190604214146215.PNG]: /images/20220122/12f49e5da1634fd3ab3f5629f4966a27.png
[20190604214157682.PNG]: /images/20220122/31892501c26b4aabb9f68f5947de23f4.png
[20190604214208402.PNG]: /images/20220122/20670726a00f4327b58899245e3d0842.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDY4MQ_size_16_color_FFFFFF_t_70]: /images/20220122/10d558f48c0043fa97a98a56757ad99b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDY4MQ_size_16_color_FFFFFF_t_70 1]: /images/20220122/ab1142ca5df1431ea7c6e7b5e8e13e12.png