element-ui 日期选择器快捷时间

最新推荐文章于 2024-08-20 14:12:03 发布
最新推荐文章于 2024-08-20 14:12:03 发布
阅读量428 收藏 1
点赞数
分类专栏： vue 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gts_0901y/article/details/108404006
版权 

pickerOptions: {
    disabledDate(time) {
        return time.getTime() > Date.now();
    },
    shortcuts: [
        {
            text: '昨日',
            onClick(picker) {
                this.relativeTime = 'now-1d'
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
                end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                picker.$emit('pick', [start, end]);
                console.log(this.relativeTime)

            }
        },
        {
            text: '近3日',
            onClick(picker) {
                console.log(picker)
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
                end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                picker.$emit('pick', [start, end]);
                this.relativeTime = 'now-3d'
            }
        },
        {
            text: '近7日',
            onClick(picker) {
                console.log(picker)
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                picker.$emit('pick', [start, end]);
                this.relativeTime = 'now-7d'
            }
        }, {
            text: '近30日',
            onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                picker.$emit('pick', [start, end]);
                this.relativeTime = 'now-30d'
            }
        },
        {
            text: '近60日',
            onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 60);
                end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                picker.$emit('pick', [start, end]);
                this.relativeTime = 'now-60d'
            }
        },

        {
            text: '近90日',
            onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                picker.$emit('pick', [start, end]);
                this.relativeTime = 'now-90d'
            }
        },
        {
            text: '近180日',
            onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
                end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                picker.$emit('pick', [start, end]);
                this.relativeTime = 'now-180d'
            }
        },
        {
            text: '近365日',
            onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
                end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                picker.$emit('pick', [start, end]);
                this.relativeTime = 'now-365d'
            }
        },
        {
            text: '近3周',
            onClick(picker) {
                const oDate = new Date();
                oDate.setTime(oDate.getTime() - 3600 * 1000 * 24 * 21);

                var day = oDate.getDay()

                var start = new Date(),
                    end = new Date();
                if (day == 0) {
                    start.setDate(oDate.getDate());
                    end.setDate(oDate.getDate() + 21);
                } else {
                    start.setTime(oDate.getTime() - 3600 * 1000 * 24 *(day-1));
                    end.setTime(oDate.getTime() + 3600 * 1000 * 24 * (21- day));
                }

                picker.$emit('pick', [start, end]);
                this.relativeTime = 'now-3w'
            }
        },
        {
            text: '近6周',
            onClick(picker) {
                const oDate = new Date();
                oDate.setTime(oDate.getTime() - 3600 * 1000 * 24 * 42);

                var day = oDate.getDay()

                var start = new Date(),
                    end = new Date();
                if (day == 0) {
                    start.setDate(oDate.getDate());
                    end.setDate(oDate.getDate() + 21);
                } else {
                    start.setTime(oDate.getTime() - 3600 * 1000 * 24 *(day-1));
                    end.setTime(oDate.getTime() + 3600 * 1000 * 24 * (42- day));
                }

                picker.$emit('pick', [start, end]);
                this.relativeTime = 'now-6w'
            }
        },
        {
            text: '近12周',
            onClick(picker) {
                const oDate = new Date();
                oDate.setTime(oDate.getTime() - 3600 * 1000 * 24 * 84);

                var day = oDate.getDay()

                var start = new Date(),
                    end = new Date();
                if (day == 0) {
                    start.setDate(oDate.getDate());
                    end.setDate(oDate.getDate() + 21);
                } else {
                    start.setTime(oDate.getTime() - 3600 * 1000 * 24 *(day-1));
                    end.setTime(oDate.getTime() + 3600 * 1000 * 24 * (84- day));
                }

                picker.$emit('pick', [start, end]);
                this.relativeTime = 'now-12w'
            }
        },
        {
            text: '近24周',
            onClick(picker) {
                const oDate = new Date();
                oDate.setTime(oDate.getTime() - 3600 * 1000 * 24 * 168);

                var day = oDate.getDay()

                var start = new Date(),
                    end = new Date();
                if (day == 0) {
                    start.setDate(oDate.getDate());
                    end.setDate(oDate.getDate() + 21);
                } else {
                    start.setTime(oDate.getTime() - 3600 * 1000 * 24 *(day-1));
                    end.setTime(oDate.getTime() + 3600 * 1000 * 24 * (168- day));
                }

                picker.$emit('pick', [start, end]);
                this.relativeTime = 'now-24w'
            }
        },
        {
            text: '近3个月',
            onClick(picker) {
                const oDate = new Date();
                var year = oDate.getFullYear();
                var month = oDate.getMonth();
                var start, end;
                if (month == 0) {
                    year--
                    start = new Date(year, 11, 1)
                    end = new Date(year, 11, 31)
                } else {
                    start = new Date(year, month - 3, 1)
                    end = new Date(year, month, 0);
                }

                picker.$emit('pick', [start, end]);
                this.relativeTime = 'now-3m'
            }
        },
        {
            text: '近6个月',
            onClick(picker) {
                const oDate = new Date();
                var year = oDate.getFullYear();
                var month = oDate.getMonth();
                var start, end;
                if (month == 0) {
                    year--
                    start = new Date(year, 11, 1)
                    end = new Date(year, 11, 31)
                } else {
                    start = new Date(year, month - 6, 1)
                    end = new Date(year, month, 0);
                }

                picker.$emit('pick', [start, end]);
                this.relativeTime = 'now-6m'

            }
        },
        {
            text: '近12个月',
            onClick(picker) {
                const oDate = new Date();
                var year = oDate.getFullYear();
                var month = oDate.getMonth();
                var start, end;
                if (month == 0) {
                    year--
                    start = new Date(year, 11, 1)
                    end = new Date(year, 11, 31)
                } else {
                    start = new Date(year, month - 12, 1)
                    end = new Date(year, month, 0);
                }

                picker.$emit('pick', [start, end]);
                this.relativeTime = 'now-12m'

            }
        },
        {
            text: '近24个月',
            onClick(picker) {
                const oDate = new Date();
                var year = oDate.getFullYear();
                var month = oDate.getMonth();
                var start, end;
                if (month == 0) {
                    year--
                    start = new Date(year, 11, 1)
                    end = new Date(year, 11, 31)
                } else {
                    start = new Date(year, month - 24, 1)
                    end = new Date(year, month, 0);
                }

                picker.$emit('pick', [start, end]);
                this.relativeTime = 'now-24m'

            }
        },
        {
            text: '月至今',
            onClick(picker) {
                let date = new Date()
                if (date.getDate() == 1) {
                    const oDate = new Date();
                     let year = oDate.getFullYear();
                     let month = oDate.getMonth();
                     let start, end;
                    if (month == 0) {
                         year--
                        start = new Date(year, 11, 1)
                         end = new Date(year, 11, 31)
                     } else {
                         start = new Date(year, month - 1, 1)
                         end = new Date(year, month, 0);
                     }
                    picker.$emit('pick', [start, end]);
                    this.relativeTime = 'far1'
                } else {
                    const end = new Date();
                    const start = new Date();
                    start.setDate(1);
                    end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                    picker.$emit('pick', [start, end]);
                    this.relativeTime = 'far1'
                }
            }
        },
        {
            text: '年至今',
            onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setMonth(0);
                start.setDate(1);
                end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                picker.$emit('pick', [start, end]);
                this.relativeTime = 'far12'
            }
        },


    ]
大脸萌爱吃鱼
关注
专栏目录
element ui 日期选择器的各种快捷选项
weixin_43829905的博客
03-18 844
element ui 日期选择器的各种快捷选项 效果图： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...
详解element-ui日期时间选择器的日期格式化问题
10-17
主要介绍了详解element-ui日期时间选择器的日期格式化问题，本文用到了DateTimePicker来选择日期时间，但是在将数据传回后台的过程中遇到了一些令人头疼的问题，有兴趣的一起来了解一下
elementUI 时间选择器，时间选择快捷键
weixin_30922589的博客
05-27 1981
elementUI的时间快捷键，使用属性:picker-options="pickerOptions"，由于pickerOptions的定义很长，也在其他地方共用，因此建议提取出来在公用文件定义，再在页面直接引用。 1、定义元素 1 <el-date-picker 2 style="width: 440px;" 3 ...
element-ui中时间选择器的使用
最新发布
weixin_51480428的博客
08-20 292
element-ui中时间选择器的使用。
elementUI时间选择器el-time-picker的坑
a99101的博客
08-14 2487
如果后端给的为默认为 Date 对象 值："2023-07-31T16:00:00.000Z"或者是2023-07-31 16:00:00。我的做法是拿到后端数据深拷贝一份，相关参数格式自己爱怎么转换就怎么转换，在发送请求时候也是使用深拷贝转换后的数据进行发送。这种格式拿到需要进行转换为你设定的HH:mm:ss格式，不然时间选择器会直接报错，无法识别时间类型。需要和后端协商好给什么类型格式。这里有一个转换的坑需要注意。不然需要做一些列的时间转换。
【ElementUI】详细分析DatePicker 日期选择器
热门推荐
码农研究僧的博客
04-01 1万+
实战结合Element官网的心得体会
详解element-ui动态限定的日期范围选择器代码片段
11-20
element-ui 的日期选择器的组件是 el-date-picker. 设定 pickerOptions2， data() { return { pickerOptions2: { disabledDate: theDate => { const oneDay = 3600 * 1000 * 24 const current = the
element-ui.rar element-ui核心库压缩包
12-20
Element UI 包含了大量的 UI 组件，如表格、按钮、对话框、通知、下拉菜单、日期选择器、轮播图、进度条等，涵盖了网页开发中常见的功能需求。 在使用 Element UI 开发项目时，首先需要在项目中引入该库。这通常...
element-ui 限制日期选择的方法(datepicker)
08-27
Element-UI 日期选择器提供了多种类型的日期选择器，如日期选择器、日期时间选择器、日期范围选择器等。在这里，我们将使用日期选择器来演示限制日期选择的方法。 在上面的示例代码中，我们使用了两个日期选择器，...
Calender按季度选择日期
04-28
带有例子，日期按季度显示。为了赚点分所以给了资源分，请多谅解。谢谢
＜el-date-picker＞ 设置默认yyyy-MM-dd以及限制规则
huangjinsheng1988的专栏
09-14 2003
el-date-picker
el-date-picker 日期时间进行限制，精确到时分秒
m0_58565372的博客
07-12 7689
实现效果：用户只能选择当前时间的时间，如果选择是当天之前的时间，时分秒不做限制，如果选择的是当天时间，就要判断时分秒，只能选择当前时间时分秒之前的时间。需求：用户只能选择当时时间或当前时间之前的时间，且精确到时分秒。以上代码就能实现，对日期时间进行限制，且精确到时分秒。
element-admin中使用el-date-picker
hifhf的专栏
11-23 1011
<el-date-picker v-model="listSearch.date" type="daterange" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions" style="m.
快速日期选择器 ngQuickDate
gitblog_00040的博客
05-24 252
快速日期选择器 ngQuickDate 去发现同类优质开源项目:https://gitcode.com/ ngQuickDate 是一个基于 Angular.js 的日期时间选择指令，强调快速数据输入和简洁设计，同时具备高度可配置性和易于重新样式化的特点。 下载与安装 你可以从版本 1.3.4 开始下载： 版本 1.3.4 仅兼容 Angular 1.2.x。如果你需要兼容 Angular 1....
组件-Element—DateTimePicker（日期时间选择器）
GU_AO_SHI_TAI_DU的博客
07-03 4163
组件-Element—DateTimePicker1 组件—日期时间选择器 日期和时间点 <template> <div class="block"> <span class="demonstration">默认</span> <el-date-picker v-model="value1" t...
vue+element DatePicker日期选择器封装(可自定义快捷选择时间)
Whit3ZzT的博客
01-03 2083
可自定义快捷选择时间的日期选择器封装
【elementUI-日期选择器（两个框 限制选择范围、快捷键选择】
JUN416326495的博客
09-06 3624
【代码】【elementUI-日期选择器（两个框 限制选择范围、快捷键选择】
解决elementui的DatePicker 日期选择器，带快捷选项（自定义12个月）的方法
weixin_44953151的博客
09-24 2816
1、自定义带快捷选项的12个月的方法。
element-ui 日期选择器
07-27
Element-UI日期选择器是一个常用的组件，可以方便地实现日期的选择功能。根据引用\[1\]中的代码，可以看出该日期选择器是一个周选择器，只能选择本周以及本周之前的日期。通过设置picker-options的disabledDate属性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值