526互联

vue 不同版本定义 el-date-picker 日期选择器快捷项

发布时间 2023-04-15 16:03:30作者: pine007

1、效果

2、vue 2

  • :picker-options
<el-date-picker
	style="width: 350px"
	v-model="dates"
	type="daterange"
	align="right"
	unlink-panels
	range-separator="至"
	start-placeholder="开始日期"
	end-placeholder="结束日期"
	:picker-options="pickerOptions"
	value-format="yyyy-MM-dd">
</el-date-picker>

pickerOptions: {
    shortcuts: [
        {
            text: '今天',
            onClick(picker) {
                let start = new Date()
                let end = new Date()
                start.setHours(0, 0, 0)
                end.setHours(23, 59, 59)
                picker.$emit('pick', [start, end]);
            }
        },
        {
            text: '昨天',
            onClick(picker) {
                let start = new Date()
                let end = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24)
                end.setTime(end.getTime() - 3600 * 1000 * 24)
                start.setHours(0, 0, 0)
                end.setHours(23, 59, 59)
                picker.$emit('pick', [start, end]);
            }
        },
        {
            text: '近7天',
            onClick(picker) {
                let start = new Date()
                let end = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                end.setTime(end.getTime() - 3600 * 1000 * 24)
                start.setHours(0, 0, 0)
                end.setHours(23, 59, 59)
                picker.$emit('pick', [start, end]);
            }
        },
        {
            text: '近15天',
            onClick(picker) {
                let start = new Date()
                let end = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 15)
                end.setTime(end.getTime() - 3600 * 1000 * 24)
                start.setHours(0, 0, 0)
                end.setHours(23, 59, 59)
                picker.$emit('pick', [start, end]);
            }
        },
        {
            text: '近30天',
            onClick(picker) {
                let start = new Date()
                let end = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                end.setTime(end.getTime() - 3600 * 1000 * 24)
                start.setHours(0, 0, 0)
                end.setHours(23, 59, 59)
                picker.$emit('pick', [start, end]);
            }
        },
        {
            text: '近3月',
            onClick(picker) {
                let start = new Date()
                let end = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                end.setTime(end.getTime() - 3600 * 1000 * 24)
                start.setHours(0, 0, 0)
                end.setHours(23, 59, 59)
                picker.$emit('pick', [start, end]);
            }
        },
    ]
}

3、vue 3

  • :shortcuts
<el-date-picker
	style="width: 350px"
	v-model="dates"
	type="daterange"
	align="right"
	unlink-panels
	range-separator="至"
	start-placeholder="开始日期"
	end-placeholder="结束日期"
	:shortcuts="shortcuts"
	value-format="yyyy-MM-dd">
</el-date-picker>

shortcuts: [
    {
        text: '今天',
        onClick(picker) {
            let start = new Date()
            let end = new Date()
            start.setHours(0, 0, 0)
            end.setHours(23, 59, 59)
            picker.$emit('pick', [start, end]);
        }
    },
    {
        text: '昨天',
        onClick(picker) {
            let start = new Date()
            let end = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24)
            end.setTime(end.getTime() - 3600 * 1000 * 24)
            start.setHours(0, 0, 0)
            end.setHours(23, 59, 59)
            picker.$emit('pick', [start, end]);
        }
    },
    {
        text: '近7天',
        onClick(picker) {
            let start = new Date()
            let end = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            end.setTime(end.getTime() - 3600 * 1000 * 24)
            start.setHours(0, 0, 0)
            end.setHours(23, 59, 59)
            picker.$emit('pick', [start, end]);
        }
    },
    {
        text: '近15天',
        onClick(picker) {
            let start = new Date()
            let end = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 15)
            end.setTime(end.getTime() - 3600 * 1000 * 24)
            start.setHours(0, 0, 0)
            end.setHours(23, 59, 59)
            picker.$emit('pick', [start, end]);
        }
    },
    {
        text: '近30天',
        onClick(picker) {
            let start = new Date()
            let end = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            end.setTime(end.getTime() - 3600 * 1000 * 24)
            start.setHours(0, 0, 0)
            end.setHours(23, 59, 59)
            picker.$emit('pick', [start, end]);
        }
    },
    {
        text: '近3月',
        onClick(picker) {
            let start = new Date()
            let end = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            end.setTime(end.getTime() - 3600 * 1000 * 24)
            start.setHours(0, 0, 0)
            end.setHours(23, 59, 59)
            picker.$emit('pick', [start, end]);
        }
    },
]