18910140161

layui 日期范围怎么 做今天 昨天 7天前 30天前

2022-05-12 23:14:28

722

layui 默认的日期控件很好,今天丰富一下这个功能,网上搜索了下有可以在日期空间下拉里实现这个功能,但是不太明显,先看下我做的效果:

 QQ截图20220512231628.png

其实很简单就是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就可以了,大佬勿喷,欢迎交流!

相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航