LayUI laydate选择器自定义快捷选中今天、昨天、本周、本月等等

最新推荐文章于 2025-04-10 11:35:13 发布

C1Zer0WN

最新推荐文章于 2025-04-10 11:35:13 发布

阅读量5.2k

点赞数 3

分类专栏： layui laydate自定义文章标签： javascript ui html

本文链接：https://blog.youkuaiyun.com/qq_36543562/article/details/105556409

版权

layui 同时被 2 个专栏收录

1 篇文章

订阅专栏

laydate自定义

1 篇文章

订阅专栏

本文介绍如何使用laydate插件自定义日期选择器的范围，包括本月、上月、今天等快捷选项，通过JavaScript代码实现，并提供具体实现步骤和代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

laydate选取范围基础设置
在这里插入图片描述

laydate.render({
  elem: '.layui-ldate'
  ,type: 'datetime'
  ,range: '~'
  ,format: 'yyyy-MM-dd'
});

样式如下图

开始之前需要替换laydate文件
替换目录layui/lay/modules下的同名文件
下载地址： https://download.youkuaiyun.com/download/qq_36543562/12803807

开始自定义控件可选取的值

 //定义接收本月的第一天和最后一天
        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(); //今天本周的第几天

        lay('.layui-ldate').each(function() {
            laydate.render({
                elem: this,
                type: 'date',
                format: 'yyyy-MM-dd',
                range: '~',
                trigger: 'click',
                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) {
                    //当确认选择时间后调用这里
                }
            });
        });

这里我使用的 lay(’.layui-ldate’).each(function() {…});，我这里要使用了多个时间选择，所以为多个input加载此控件,可以按自己的需求更改extrabtns里的数据。
效果如下：
在这里插入图片描述

自定义完毕后可快速选取时间了
在这里插入图片描述
使用时

var sendTimeFrom ,sendTimeTo;
 var sendDate = $searchForm.find('input[name="sendDate"]').val();
            if (sendDate) {
                sendTimeFrom = sendDate.split(' ~ ')[0];
                sendTimeTo = sendDate.split(' ~ ')[1];
            }

使用split分割出起始和结束，注意 ~ 符号的旁边含空格。