效果：
结构：
样式：
引入：
js:（rqs：开始日期、rqz:结束日期）
var dateList = [{
"name":"昨日",
"rqs":moment().add('-1','days').format('YYYY-MM-DD'),
"rqz":moment().add('-1','days').format('YYYY-MM-DD')
},{
"name":"本周",
"rqs":moment().subtract(moment().format('E') -1 , 'days').format('YYYY-MM-DD'),
"rqz":moment().format('YYYY-MM-DD')
},{
"name":"本月",
"rqs":moment().format('YYYY-MM') + '-01',
"rqz":moment().format('YYYY-MM-DD')
},{
"name":"今年",
"rqs":moment().format('YYYY') + '-01-01',
"rqz":moment().format('YYYY-MM-DD')
},{
"name":"近7天",
"rqs":moment().add('-6','days').format('YYYY-MM-DD'),
"rqz":moment().format('YYYY-MM-DD')
},{
"name":"近1月",
"rqs":moment().add('-1','months').format('YYYY-MM-DD'),
"rqz":moment().format('YYYY-MM-DD')
},{
"name":"近1年",
"rqs":moment().add('-1','year').format('YYYY-MM-DD'),
"rqz":moment().format('YYYY-MM-DD')
},
{
"name":"后2月",
"rqs":moment().format('YYYY-MM-DD'),
"rqz":moment().add('2','months').format('YYYY-MM-DD')
}
// {
// "name":"下一周",
// "rqs":moment().subtract(moment().format('E') -1 , 'days').add('7','days').format('YYYY-MM-DD'),
// "rqz":moment().subtract(moment().format('E') -1 , 'days').add('13','days').format('YYYY-MM-DD')
// }
// {
// "name":"本周后",
// "rqs":moment().format('YYYY-MM-DD'),
// "rqz":moment().subtract(7 - moment().format('E'), 'days').format('YYYY-MM-DD')
// }
]
var index = 2;//修改默认选项只需要改数组索引
var rqs = dateList[index].rqs;
var rqz = dateList[index].rqz;
$("#jsDate").val(rqs + ' - ' + rqz);
var $html = "<div class='laydate-custom' id='laydateCustom'></div>";
var $spanHtml = ""
if(dateList && dateList.length>0){
for(var i=0; i< dateList.length; i++){
$spanHtml += "<span class='jsCustomBtn' data-rqs='"+ dateList[i].rqs +"' data-rqz='"+ dateList[i].rqz +"'>"+ dateList[i].name +"</span>"
}
}
// 年月日范围
laydate.render({
elem: '#jsDate', //指定元素
range: true,
// btns:[],
ready: function(date){
$('.layui-laydate-footer').append($html);
$('#laydateCustom').html($spanHtml);
$('#laydateCustom .jsCustomBtn').eq(index).addClass('active').siblings('.jsCustomBtn').removeClass('active');
$('#laydateCustom').on('click','.jsCustomBtn',function(){
index = $(this).index();
rqs = $(this).attr('data-rqs') || '';
rqz = $(this).attr('data-rqz') || '';
$("#jsDate").val(rqs + ' - ' + rqz);
$("#layui-laydate1").remove();
})
}
});