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