laydate自定义范围选择

grapelet_kmw

已于 2024-06-24 09:08:01 修改

阅读量334

点赞数 5

文章标签： layui.js javascript

于 2024-06-20 15:57:44 首次发布

本文链接：https://blog.csdn.net/qq_41964720/article/details/139797831

版权

项目场景：

项目是以周的形式进行填报，查询筛选的时候，希望以周为范围进行筛选查询

问题描述

问题一：laydate的日期格式设置为yyyy-MM-dd~yyyy-MM-dd，但是input框中的值并不是展示的当前周的时间，展示的是当前日期控件选中的日期，(注意:只有layui.js的版本是2.6.8及以下的才会出现这种情况。）效果图如下：

期望的效果图如下：

问题二：laydate左下角展示的选中的日期不是以周的形式展示的，以当前选中的日期进行展示的，效果图如下：

期望的效果图：

原因分析：

问题一：通过在done函数里面打印发现，给inputDom赋值了，并且打印inputDom的值也是赋值成功的，但是页面上显示的确实当前选中的日期值。

通过setTimeout里面打印，发现刚被赋值的inputDom的值又被修改成当前选中的日期，于是在setTimeout里面更新inputDom的值就可以解决。（2.6.8及以下的版本layui.js有这个问题，从2.6.9开始就修复了这问题。）

 done: function (value, date, endDate) {
     let date_arr=value.split('~')
     $('#start-date').val(getWeekRangeByDate(date_arr[0]))
     $('#end-date').val(getWeekRangeByDate(date_arr[date_arr.length-1]))

      console.log($('#start-date').val()); //2024-06-17~2024-06-23
      console.log($('#end-date').val());//2024-07-15~2024-07-21

      timer=setTimeout(()=>{
           console.log($('#start-date').val()); //2024-06-19~2024-06-19
           console.log($('#end-date').val());//2024-07-19~2024-07-19
      })
}

问题二：同问题一一样

解决方案：

整体代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>laydate自定义选择的范围</title>
    <link rel="stylesheet" href="./layui/js/layui.css" />
    <style>
        .layui-input {
            width: 280px;
        }

        .layui-form-mid {
            margin-left: 10px;
        }
    </style>
</head>

<body>
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">缺陷时间</label>
                    <div class="layui-inline" id="test-range" style="display: flex;">
                        <input type="text" name="start_week" class="layui-input" id="start-date" placeholder="请选择开始时间"
                            autocomplete="off">
                        <div class="layui-form-mid">至</div>
                        <input type="text" name="end_week" class="layui-input" id="end-date" placeholder="请选择结束时间"
                            autocomplete="off">
                    </div>
                </div>

            </form>
        </div>
    </div>
    <script src="./layui/layui.js"></script>
    <script>
        layui.use(["table", "jquery", "laydate", "form", "layer"], function () {
            var table = layui.table;
            let $ = layui.jquery;
            let laydate = layui.laydate;
            let form = layui.form;
            
            //根据当前传入的日期，返回对应周的日期
            function getWeekRangeByDate(value) {
                let today = ''
                if (value == '') {
                    today = new Date()
                } else {
                    today = new Date(value.substring(0, 10))
                }

                let weekday = today.getDay()
                let monday = ""
                let sunday = ''
                if (weekday == 0) {
                    monday = new Date(1000 * 60 * 60 * 24 * (weekday - 6) + today.getTime())
                    sunday = today
                } else {
                    monday = new Date(1000 * 60 * 60 * 24 * (1 - weekday) + today.getTime())
                    sunday = new Date(1000 * 60 * 60 * 24 * (7 - weekday) + today.getTime())
                }
                let month = monday.getMonth() + 1
                month = month < 10 ? '0' + month : month

                let day1 = monday.getDate()
                day1 = day1 < 10 ? '0' + day1 : day1
                let start = monday.getFullYear() + '-' + month + '-' + day1

                let month2 = sunday.getMonth() + 1
                month2 = month2 < 10 ? '0' + month2 : month2

                let day2 = sunday.getDate()
                day2 = day2 < 10 ? '0' + day2 : day2
                let end = sunday.getFullYear() + '-' + month2 + '-' + day2

                return start + '~' + end


            }
            let start_date = ''
            let end_date = ""
            let timer1 = 0
            let timer2 = 0
            let timer3 = 0
            // 日期选择范围：
            let picker = laydate.render({
                elem: '#test-range',
                type: 'date',
                format: 'yyyy-MM-dd~yyyy-MM-dd',
                btns: ['clear', 'confirm'],
                range: ['#start-date', '#end-date'],
                ready: function (date) {
                   let start_date=''
                   let end_date=''
                   $('td.layui-this').each((index,item)=>{
                        if(index==0){
                            start_date=item.getAttribute('lay-ymd')
                        }else{
                            end_date=item.getAttribute('lay-ymd')
                        }
                   })
                    timer1 = setTimeout(() => {
                        $('.layui-laydate-preview').text(getWeekRangeByDate(start_date) + '-' + getWeekRangeByDate(end_date))
                        clearTimeout(timer1)
                    });



                },
                change: function (value, date, endDate) {
                    let date_arr=value.split('~')
                    timer2 = setTimeout(() => {
                        $('.layui-laydate-preview').text(getWeekRangeByDate(date_arr[0]) + '-' + getWeekRangeByDate(date_arr[date_arr.length-1]))
                        clearTimeout(timer2)
                    });


                },
                done: function (value, date, endDate) {

                    // 2.6.9及以上的版本
                    let date_arr=value.split('~')
                    $('#start-date').val(getWeekRangeByDate(date_arr[0]))
                    $('#end-date').val(getWeekRangeByDate(date_arr[date_arr.length-1]))

                    // 2.6.9以下的版本
                    timer3=setTimeout(()=>{
                        $('#start-date').val(getWeekRangeByDate(date_arr[0]))
                        $('#end-date').val(getWeekRangeByDate(date_arr[date_arr.length-1]))
                        clearTimeout(timer3)
                    })

                   
                }
            })

        })


    </script>
</body>

</html>