layui时间选择器实现按天数自动选择起止日期

最新推荐文章于 2024-08-03 20:32:29 发布

glkyyl

最新推荐文章于 2024-08-03 20:32:29 发布

阅读量191

点赞数 3

文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/glkyyl/article/details/140793292

版权

项目需要实现一个日期段选择器，并可以根据特定天数直接选择结束日期（如30天），直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日期选择器示例</title>
    <link href="//unpkg.com/layui@2.9.14/dist/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-container">
    <div class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" id="daterange" name="daterange" placeholder="选择日期范围" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid" id="ID-laydate-rangeLinked">
                    <button type="button" class="layui-btn" id="add30DaysBtn">
                        +30天
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="//unpkg.com/layui@2.9.14/dist/layui.js"></script>

<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        // 初始化日期选择器
        laydate.render({
            elem: '#daterange',
            range: '~',
            done: function(value, date, endDate) {
                if (endDate) {
                    // 如果选择了结束日期，则清空按钮的禁用状态
                    $('#add30DaysBtn').prop('disabled', false);
                } else {
                    // 如果只选择了开始日期，则禁用按钮
                    $('#add30DaysBtn').prop('disabled', true);
                }
            }
        });

        // 创建第二个日期选择器
        laydate.render({
            elem: '#ID-laydate-rangeLinked',
            done: function(value, date) {
                // 在这里计算并设置起止日期
                setStartDateAndEndDate(value, date);
            },
        });

        // 添加按钮点击事件
        $('#add30DaysBtn').on('click', function() {
            var startDateStr = $('#daterange').val().split('~')[0].trim();

            if (!startDateStr) {
                // 如果没有选择开始日期，则显示日期选择器
                return;
            } else {
                event.stopPropagation(); // 阻止事件冒泡, 不再弹出选择器
                // 将开始日期字符串转换为 Date 对象
                var startDate = new Date(startDateStr);

                // 计算结束日期
                startDate.setDate(startDate.getDate() + 30); // 加上 30 天

                // 格式化日期
                var endDateStr = startDate.getFullYear() + '-' + ('0' + (startDate.getMonth() + 1)).slice(-2) + '-' + ('0' + startDate.getDate()).slice(-2);

                // 设置结束日期
                $('#daterange').val(startDateStr + ' ~ ' + endDateStr);

                // 触发日期选择器的 change 事件，使其更新视图
                $('#daterange').trigger('change');
            }
        });

        // 定义设置起止日期的函数
        function setStartDateAndEndDate(value, date) {
            // 将开始日期字符串转换为 Date 对象
            var startDate = new Date(value);

            // 计算结束日期
            startDate.setDate(startDate.getDate() + 30); // 加上 30 天

            // 格式化日期
            var endDateStr = startDate.getFullYear() + '-' + ('0' + (startDate.getMonth() + 1)).slice(-2) + '-' + ('0' + startDate.getDate()).slice(-2);

            // 设置结束日期
            $('#daterange').val(value + ' ~ ' + endDateStr);

            // 触发日期选择器的 change 事件，使其更新视图
            $('#daterange').trigger('change');
        }
    });

</script>

</body>
</html>

HTML 结构:
- <input type="text" id="daterange"> 是日期选择器的输入框。
- <button type="button" class="layui-btn" id="add30DaysBtn">+30天</button> 是自定义按钮。
JavaScript 代码:
- 初始化 LayUI 的日期选择器，并配置范围选择。
- 在第二个日期选择器的回调函数中，定义了一个 setStartDateAndEndDate 函数，用于计算并设置起止日期。
- 在按钮点击事件中检查是否已经选择了开始日期：
  - 如果没有选择开始日期，不执行任何操作。
  - 如果已经选择了开始日期，则计算 30 天后的日期，并设置到日期选择器中。
- 使用 event.stopPropagation() 阻止事件冒泡，以确保点击按钮时不会触发其他事件处理程序。

当点击 "+30天" 按钮时，如果已经有开始日期，则会计算 30 天后的结束日期，并将其设置到 #daterange 中。此外，当通过第二个日期选择器选择日期时，也会计算 30 天后的结束日期，并将其设置到 #daterange 中。同时，通过 event.stopPropagation() 确保了事件不会冒泡到父级元素，防止触发不必要的事件。

glkyyl

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
layui时间选择器实现按天数自动选择起止日期

当点击 "+30天" 按钮时，如果已经有开始日期，则会计算 30 天后的结束日期，并将其设置到。此外，当通过第二个日期选择器选择日期时，也会计算 30 天后的结束日期，并将其设置到。确保了事件不会冒泡到父级元素，防止触发不必要的事件。
复制链接

扫一扫