el-date-picker组件的picker-options常规属性设置

简介: el-date-picker组件的picker-options常规属性设置


查询已发生的配置项

// 日期选择器快捷键配置(一般过去时)
pickerOptions: {
    shortcuts: [
        {
            text: '今天',
            onClick(picker) {
                let start = new Date();
                let end = new Date();
                if (picker) picker.$emit('pick', [start, end]);
                else return { start, end };
            }
        },
        {
            text: '昨天',
            onClick(picker) {
                let start = new Date();
                let end = new Date();
                start.setDate(start.getDate() - 1);
                end.setDate(end.getDate() - 1);
                if (picker) picker.$emit('pick', [start, end]);
                else return { start, end };
            }
        },
        {
            text: '迄今为止',
            onClick(picker) {
                let start = new Date('2000-01-01');
                let end = new Date();
                if (picker) picker.$emit('pick', [start, end]);
                else return { start, end };
            }
        },
        // ----------------------------------------
        {
            text: '近一周',
            onClick(picker) {
                let start = new Date();
                let end = new Date();
                start.setDate(start.getDate() - 6);
                if (picker) picker.$emit('pick', [start, end]);
                else return { start, end };
            }
        },
        {
            text: '近一个月',
            onClick(picker) {
                let start = new Date();
                let end = new Date();
                start.setMonth(start.getMonth() - 1);
                start.setDate(start.getDate() + 1);
                if (picker) picker.$emit('pick', [start, end]);
                else return { start, end };
            }
        },
        {
            text: '近三个月',
            onClick(picker) {
                let start = new Date();
                let end = new Date();
                start.setMonth(start.getMonth() - 3);
                start.setDate(start.getDate() + 1);
                if (picker) picker.$emit('pick', [start, end]);
                else return { start, end };
            }
        },
        {
            text: '近一年',
            onClick(picker) {
                let start = new Date();
                let end = new Date();
                start.setFullYear(start.getFullYear() - 1);
                start.setDate(start.getDate() + 1);
                if (picker) picker.$emit('pick', [start, end]);
                else return { start, end };
            }
        },
        // ----------------------------------------
        {
            text: '上月',
            onClick(picker) {
                let lastMonth = new Date();
                lastMonth.setMonth(lastMonth.getMonth() - 1);
                let m = lastMonth.getMonth(), y = lastMonth.getFullYear();
                let start = new Date(y, m, 1);
                let end = new Date(y, m, new Date(y, m + 1, 0).getDate());
                if (picker) picker.$emit('pick', [start, end]);
                else return { start, end };
            }
        },
        {
            text: '本月',
            onClick(picker) {
                let now = new Date(), m = now.getMonth(), y = now.getFullYear();
                let start = new Date(y, m, 1);
                let end = new Date(y, m, new Date(y, m + 1, 0).getDate());
                if (picker) picker.$emit('pick', [start, end]);
                else return { start, end };
            }
        },
        {
            text: '今年',
            onClick(picker) {
                let start = new Date(new Date().getFullYear(), 0, 1);
                let end = new Date(new Date().getFullYear(), 11, 31);
                if (picker) picker.$emit('pick', [start, end]);
                else return { start, end };
            }
        },
        {
            text: '去年',
            onClick(picker) {
                let start = new Date(new Date().getFullYear() - 1, 0, 1);
                let end = new Date(new Date().getFullYear() - 1, 11, 31);
                if (picker) picker.$emit('pick', [start, end]);
                else return { start, end };
            }
        },
    ]
},

设置未来日期配置

// 日期选择器快捷键配置(一般将来时)
pickerOptions: {
    shortcuts: [
        {
            text: '今天',
            onClick(picker) {
                let start = new Date();
                let end = new Date();
                if (picker) picker.$emit('pick', [start, end]);
                else return { start, end };
            }
        },
        {
            text: '明天',
            onClick(picker) {
                let start = new Date();
                let end = new Date();
                start.setDate(start.getDate() + 1);
                end.setDate(end.getDate() + 1);
                if (picker) picker.$emit('pick', [start, end]);
                else return { start, end };
            }
        },
        {
            text: '从今往后',
            onClick(picker) {
                let start = new Date();
                let end = new Date('2999-12-31');
                if (picker) picker.$emit('pick', [start, end]);
                else return { start, end };
            }
        },
        // ----------------------------------------
        {
            text: '往后一周',
            onClick(picker) {
                let start = new Date();
                let end = new Date();
                end.setDate(start.getDate() + 6);
                if (picker) picker.$emit('pick', [start, end]);
                else return { start, end };
            }
        },
        {
            text: '往后一个月',
            onClick(picker) {
                let start = new Date();
                let end = new Date();
                end.setMonth(start.getMonth() + 1);
                end.setDate(start.getDate() - 1);
                if (picker) picker.$emit('pick', [start, end]);
                else return { start, end };
            }
        },
        {
            text: '往后三个月',
            onClick(picker) {
                let start = new Date();
                let end = new Date();
                end.setMonth(start.getMonth() + 3);
                end.setDate(start.getDate() - 1);
                if (picker) picker.$emit('pick', [start, end]);
                else return { start, end };
            }
        },
        {
            text: '往后一年',
            onClick(picker) {
                let start = new Date();
                let end = new Date();
                end.setDate(start.getDate() + 365);
                end.setDate(start.getDate() - 1);
                if (picker) picker.$emit('pick', [start, end]);
                else return { start, end };
            }
        },
        // ----------------------------------------
        {
            text: '本月',
            onClick(picker) {
                let now = new Date(), m = now.getMonth(), y = now.getFullYear();
                let start = new Date(y, m, 1);
                let end = new Date(y, m, new Date(y, m + 1, 0).getDate());
                if (picker) picker.$emit('pick', [start, end]);
                else return { start, end };
            }
        },
        {
            text: '下个月',
            onClick(picker) {
                let nextMonth = new Date();
                nextMonth.setMonth(nextMonth.getMonth() + 1);
                let m = nextMonth.getMonth(), y = nextMonth.getFullYear();
                let start = new Date(y, m, 1);
                let end = new Date(y, m, new Date(y, m + 1, 0).getDate());
                if (picker) picker.$emit('pick', [start, end]);
                else return { start, end };
            }
        },
        {
            text: '今年',
            onClick(picker) {
                let start = new Date(new Date().getFullYear(), 0, 1);
                let end = new Date(new Date().getFullYear(), 11, 31);
                if (picker) picker.$emit('pick', [start, end]);
                else return { start, end };
            }
        },
        {
            text: '明年',
            onClick(picker) {
                let start = new Date(new Date().getFullYear() + 1, 0, 1);
                let end = new Date(new Date().getFullYear() + 1, 11, 31);
                if (picker) picker.$emit('pick', [start, end]);
                else return { start, end };
            }
        },
    ]
},


相关文章
|
关系型数据库 MySQL 数据库
Element el-date-picker 日期选择器详解
本文目录 1. 前言 2. 基本用法 3. 日期格式化 4. 选择其他日期单位 5. 选择多个日期 6. 带快捷选项 7. 禁用部分日期 8. 小结
6826 0
Element el-date-picker 日期选择器详解
|
JavaScript
vue element plus DatePicker 日期选择器
vue element plus DatePicker 日期选择器
1072 0
element-plus:el-date-picker日期只选择年月不要日
element-plus:el-date-picker日期只选择年月不要日
1881 0
隐藏el-table-column过多的内容并进行浮窗展示
隐藏el-table-column过多的内容并进行浮窗展示
隐藏el-table-column过多的内容并进行浮窗展示
element-el-time-picker 开始时间-结束时间-回显(整理)
element-el-time-picker 开始时间-结束时间-回显(整理)
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
10567 46
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
|
9月前
|
存储 JavaScript 前端开发
element ui <el-date-picker> 设置展示当前月
在 Element UI 中,使用 `el-date-picker` 的 `value-format` 属性可将日期值格式化为指定字符串。设置 `type=&quot;month&quot;` 时,绑定值默认为 Date 对象,通过 `value-format=&quot;yyyy-MM&quot;` 可将其转为如 &quot;2023-05&quot; 格式,便于存储与处理。
1427 0
|
JavaScript
Vue2日期选择器插件(vue-datepicker-local)
这是一个基于 Vue 的日期选择器组件库,支持年份、月份、日期和时间的选择,并且均可进行范围选择。用户可以自定义日期格式与组件样式。该示例展示了如何配置组件以限制可选日期范围,并提供了相应的代码实现。
2667 0
Vue2日期选择器插件(vue-datepicker-local)
Element el-time-picker el-time-select 时间选择器详解
本文目录 1. 概述 2. 选择任意时间 3. 默认时间设置 4. 时间格式设置 5. 指定可选时间段 6. 选择时间点 7. 时间选择变化事件
5853 0
|
前端开发 JavaScript 开发者
利用 el-select 和 el-tree 实现树形结构多选框联动功能
本文详细介绍了如何使用ElementUI中的el-select下拉选择器和el-tree树形控件来实现多功能联动选择器,包括多选、删除、搜索、清空选项等功能。通过树形控件展示复杂的层级结构,用户可以通过下拉选择树形节点,实时搜索节点,且支持批量选择和删除功能。文中提供了完整的HTML、JavaScript和CSS代码实现,帮助开发者快速集成此功能。
6055 0
利用 el-select 和 el-tree 实现树形结构多选框联动功能

热门文章

最新文章