Layui时间范围选择器,添加【本周、本月、本季度、本年等常用时间快捷键】

1. 界面实现

 <div class="layui-inline">
     <label class="layui-form-label">日期</label>
     <div class="layui-input-inline layui-input-wrap" style="width:318px!important;">
         <div class="layui-input-prefix">
             <i class="layui-icon layui-icon-date"></i>
         </div>
         <input type="text" id="ordertime" name="ordertime" autocomplete="off" value="" class="layui-input" />
         <input type="hidden" id="orderstime" name="orderstime" value="" />
         <input type="hidden" id="orderetime" name="orderetime" value="" />
     </div>
 </div>
   laydate.render({
       elem: '#ordertime',
       type: 'datetime',
       range: true,
       rangeLinked: true,
       shortcuts: [
           {
               text: '前三天',
               value: function () { return dateRange("前三天"); }()
           },
           {
               text: '昨天',
               value: function () { return dateRange("昨天"); }()
           },
           {
               text: '今天',
               value: function () { return dateRange("今天"); }()
           },
           {
               text: '上周',
               value: function () { return dateRange("上周"); }()
           },
           {
               text: '本周',
               value: function () { return dateRange("本周"); }()
           },
           {
               text: "上月",
               value: function () { return dateRange("上月"); }()
           },
           {
               text: "本月",
               value: function () { return dateRange("本月"); }()
           },
           {
               text: "上季度",
               value: function () { return dateRange("上季度"); }()
           },
           {
               text: "本季度",
               value: function () { return dateRange("本季度"); }()
           },
           {
               text: "上年",
               value: function () { return dateRange("上年"); }()
           },
           {
               text: "本年",
               value: function () { return dateRange("本年"); }()
           },
       ],
       done: function (value, date, endDate) {
           var orderstime = null;
           var orderetime = null;
           if (!!value) {
               //"2024-04-19 00:00:00 - 2024-04-22 23:59:59"
               var sp_value = value.split(' - ');
               if (sp_value.length == 2) {
                   orderstime = sp_value[0];
                   orderetime = sp_value[1];
               }
           }
           $("#orderstime").val(orderstime);
           $("#orderetime").val(orderetime);
       }
   });
//日期范围选择快捷键获取数据
function dateRange(val) {
    let value = [];
    let startTime, endTime;
    let now = new Date(); //当前日期
    let nowDayOfWeek = now.getDay() - 1; //今天本周的第几天,周日为0,但实际上平时都是以周一为一周的开始,所以周3因该为2
    let nowDay = now.getDate(); //当前日
    let nowMonth = now.getMonth(); //当前月
    let nowYear = now.getFullYear(); //当前年
    let jd = Math.ceil((nowMonth + 1) / 3);
    switch (val) {
        case "前三天":
            startTime = new Date(nowYear, nowMonth, nowDay - 3);
            endTime = new Date(nowYear, nowMonth, nowDay, 23, 59, 59)
            break;
        case "昨天":
            startTime = new Date(nowYear, nowMonth, nowDay - 1);
            endTime = new Date(nowYear, nowMonth, nowDay - 1, 23, 59, 59)
            break;
        case "今天":
            startTime = new Date(nowYear, nowMonth, nowDay);
            endTime = new Date(nowYear, nowMonth, nowDay, 23, 59, 59)
            break;
        case "明天":
            startTime = new Date(nowYear, nowMonth, nowDay + 1);
            endTime = new Date(nowYear, nowMonth, nowDay + 1, 23, 59, 59)
            break;
        case "上周":
            startTime = new Date(nowYear, nowMonth, (nowDay - nowDayOfWeek) - 7);
            endTime = new Date(nowYear, nowMonth, (nowDay + 6 - nowDayOfWeek) - 7, 23, 59, 59)
            break;
        case "本周":
            startTime = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek);
            endTime = new Date(nowYear, nowMonth, nowDay + 6 - nowDayOfWeek, 23, 59, 59)
            break;
        case "上月":
            startTime = new Date(nowYear, nowMonth - 1, 1);
            endTime = new Date(nowYear, nowMonth, 0, 23, 59, 59)
            break;
        case "本月":
            startTime = new Date(nowYear, nowMonth, 1);
            endTime = new Date(nowYear, nowMonth + 1, 0, 23, 59, 59)
            break;
        case "上季度":
            startTime = new Date(nowYear, ((jd - 1) - 1) * 3, 1);
            endTime = new Date(nowYear, (jd - 1) * 3, 0, 23, 59, 59)
            break
        case "本季度":
            startTime = new Date(nowYear, (jd - 1) * 3, 1);
            endTime = new Date(nowYear, jd * 3, 0, 23, 59, 59)
            break
        case "上年":
            startTime = new Date(nowYear - 1, 0, 1);
            endTime = new Date(nowYear - 1, 11, 31, 23, 59, 59)
            break
        case "本年":
            startTime = new Date(nowYear, 0, 1);
            endTime = new Date(nowYear, 11, 31, 23, 59, 59)
            break
    }
    value.push(startTime);
    value.push(endTime);
    return value;
};
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值