1、layui 日期选择器

laydate日期选择器
<div class="layui-input-inline">
    <input class="layui-input" id="dateTime" placeholder="日期范围">
</div>

<script>
layui.use(['laydate'], function () {
    laydate.render({
        elem: '#dateTime',
        type: 'date',
        format: 'yyyy-MM-dd',
        range: true,
        trigger: 'click',
        done: function (val, stdate, ovdate) {
        }
    });
});

正常显示

2、自定义laydate.js

文件下载地址
链接：https://pan.baidu.com/s/1-revW0FTwOprM361e-1eLw 
提取码：qknt

var startDate1 = new Date(new Date().setDate(1));
//定义接收上个月的第一天和最后一天
var startDate2 = new Date(new Date(new Date().setMonth(new Date().getMonth() - 1)).setDate(1));
var endDate2 = new Date(new Date().setDate(0));
var now = new Date(); //今日
var nowDayOfWeek = now.getDay(); //今天本周的第几天
laydate.render({
	elem: this, //指定元素
	range: true,
	type: 'date',
	format: 'yyyy-MM-dd',
	trigger: 'click', //采用click弹出
	value: '',
	extrabtns: [
        {id: 'today', text: '今日', range: [now, now]},
        {id: 'yesterday',	text: '昨日', range: [new Date(new Date().setDate(new  Date().getDate() - 1)), new Date(new Date().setDate(new Date().getDate() - 1))]},
        {id: 'week',text: '本周',range: [new Date(new Date().setDate(new Date().getDate() - nowDayOfWeek + 1)), new Date()]},
        {id: 'lastday-7',text: '过去7天',range: [new Date(new Date().setDate(new Date().getDate() - 7)), new Date(new Date().setDate(new Date().getDate() - 1))]},
        {id: 'lastday-30',text: '过去30天',range: [new Date(new Date().setDate(new Date().getDate() - 30)), new Date(new Date().setDate(new Date().getDate() - 1))]},
        {id: 'thismonth', text: '本月', range: [startDate1, now]},
        {id: 'lastmonth', text: '上个月', range: [startDate2, endDate2]}],
    done: function (val, stdate, ovdate) {
    // 确认选择事件后调用
    }
});

效果图