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. 小结
5098 0
Element el-date-picker 日期选择器详解
|
6月前
|
JavaScript
element-ui 在vue中el-input输入框的autofocus属性失效【解决方案】
element-ui 在vue中el-input输入框的autofocus属性失效【解决方案】
300 1
|
8月前
|
JavaScript
layui laydate日期初始化的一些坑
【2月更文挑战第8天】layui laydate日期初始化的一些坑
Element el-time-picker el-time-select 时间选择器详解
本文目录 1. 概述 2. 选择任意时间 3. 默认时间设置 4. 时间格式设置 5. 指定可选时间段 6. 选择时间点 7. 时间选择变化事件
4275 0
element的日期选择使用value-format之后表单验证报错
element的日期选择使用value-format之后表单验证报错
214 0
element ui el-date-picker 禁止选择指定日期
element ui el-date-picker 禁止选择指定日期
295 0
192Echarts - 自定义系列(Custom Calendar Icon)
192Echarts - 自定义系列(Custom Calendar Icon)
40 0
【element-ui用法】el-radio-group默认选择和数据回显问题的解决方案
【element-ui用法】el-radio-group默认选择和数据回显问题的解决方案
860 0
|
人工智能 前端开发
修改elmentui中el-date-picker下拉框样式(大小)
修改elmentui中el-date-picker下拉框样式(大小)
|
JavaScript
Vue Antdv a-date-picker 手动关闭弹框(自定义Footer)
Vue Antdv a-date-picker 手动关闭弹框(自定义Footer)
441 0

热门文章

最新文章