2022-05-12 23:14:28
722
layui 默认的日期控件很好,今天丰富一下这个功能,网上搜索了下有可以在日期空间下拉里实现这个功能,但是不太明显,先看下我做的效果:
其实很简单就是jquery然后赋值到layui,直接上代码:
html
<div class="layui-inline"> <label class="layui-form-label">下单日期</label> <div class="layui-inline" id="test6"> <div class="layui-input-inline"> <input type="text" autocomplete="off" name="startDate" id="startDate" class="layui-input" placeholder="开始日期"> </div> <div class="layui-input-inline"> <input type="text" autocomplete="off" name="endDate" id="endDate" class="layui-input" placeholder="结束日期"> </div> </div> <div class="layui-input-inline"> <a href="javascript:;" class="today">今天</a> <a href="javascript:;" class="yesterday">昨天</a> <a href="javascript:;" class="week">7天内</a> <a href="javascript:;" class="month">30天内</a> </div> </div>
jq
let d = new Date() , year = d.getFullYear() , month = d.getMonth() + 1 , day = d.getDate() , today = year + '-' + Appendzero(month) + '-' + Appendzero(day); $('.today').click(function (e) { $('#startDate').val(today); $('#endDate').val(today); }); $('.yesterday').click(function (e) { let n = new Date(d.getTime() - 86400000*1) , endyear = n.getFullYear() , endmonth = n.getMonth() + 1 , endday = n.getDate(); let enddate = endyear + '-' + Appendzero(endmonth) + '-' + Appendzero(endday); $('#startDate').val(enddate); $('#endDate').val(enddate); }); $('.week').click(function (e) { let n = new Date(d.getTime() - 86400000*7) , endyear = n.getFullYear() , endmonth = n.getMonth() + 1 , endday = n.getDate(); let enddate = endyear + '-' + Appendzero(endmonth) + '-' + Appendzero(endday); $('#startDate').val(enddate); $('#endDate').val(today); }); $('.month').click(function (e) { let n = new Date(d.getTime() - 86400000*30) , endyear = n.getFullYear() , endmonth = n.getMonth() + 1 , endday = n.getDate(); let enddate = endyear + '-' + Appendzero(endmonth) + '-' + Appendzero(endday); $('#startDate').val(enddate); $('#endDate').val(today); }); // 日期自动补零 function Appendzero (obj) { if (obj < 10) return "0" + obj; else return obj; } //日期范围 laydate.render({ elem: '#test6' ,range: ['#startDate', '#endDate'] });
通过点击事件,获取相应的时间然后通过val()赋值到相应的input就可以了,大佬勿喷,欢迎交流!
09
2022-12
24
1991-02
19
1970-03
08
1972-02
12
2022-05
12
2022-05