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内选择日期了,其他年份的日期都是禁用选择的;
Layui的日期与时间插件
最新推荐文章于 2024-08-22 17:29:05 发布