Layui的日期与时间插件

ゞ浴缸里的玫瑰 2022-01-12 15:29 587阅读 0赞

1：先去官网下载layui，下载layui后，引用layui的layui.css和layui,js：

然后打开浏览器看看是否完成效果，打开浏览器效果截图： !\[在这里插入图片描述\](https://img-blog.csdnimg.cn/20190618082243199.png) 3：从上图中可以看出，这个input通过ID赋值layui日期是赋值成功了的， 你现在可以选择的年到日，那input也有一个自带的date也能完成这个功能，你是不是觉得还不如用自带的呢！那你这样想就大错特错了，上面的那个只是最简单的laydate基础功能，接下来再来看看更加厉害的功能： 比如：‘type’（控件选择类型），通过type来选择你需要的日期类型，当type=‘year’时，那么就只提供年列表选择； 当type=‘month’时，那么只提供年、月选择，那么type=‘date’时就是上图那种了，年到日选择； type=‘time’时就是只提供时、分、秒选择；最后一个type=‘datetime’就是年到秒的选择了，最精准的就是这个datetime了；那么我们也可以先设置一个datetime等下来看看效果； 4：layui的format就代表日期的格式，日期格式的话就差不多一样的了，比如yyyy代表至少4位数的年份，mm代表至少两位数的月份等等； 5：接下来就是一个很实用的东西了，初始值，就是页面一加载的时候就会有一个初始值，比如你给初始值为当前时间，那么页面一加载时input里面就是当前时间值：value：new Date() 初始值和选择年到秒截图：（设置了type=“datetime”和value：new Date（）） !\[在这里插入图片描述\](https://img-blog.csdnimg.cn/20190618082231476.png?x-oss-process=image/watermark,type\_ZmFuZ3poZW5naGVpdGk,shadow\_10,text\_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ==,size\_16,color\_FFFFFF,t\_70) 6：当然，肯定还不止这些，还有什么只能选择你设置的最大最小范围内的日期，比如你把日期设置只能在2019年内选择：mix：‘2019-1-1’，max：‘2019-12-31’，这样的话就只能在2019内选择日期了，其他年份的日期都是禁用选择的；