DatePicker 日期选择器-CSDN博客

本文链接：https://blog.csdn.net/qq_40745143/article/details/130506504

文章展示了如何在Vue.js应用中使用el-date-picker组件来创建日期和日期范围选择器，包括设置日期格式、禁用日期、添加快捷选项以及处理用户选择的日期变化和失去焦点的事件。

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

type			数据显示类型
editable		文本框可输入
format			显示在输入框中的格式
value-format	可选，绑定值的格式。不指定则绑定值为 Date 对象
picker-options	当前时间日期选择器特有的选项参考下表

@change			用户确认选定的值时触发
@blur			当 input 失去焦点时触发

<el-form-item label="到期时间" label-width="120px">
	<el-date-picker
		ref="startTime"
		v-model="form.startTime"
		type="datetime"
		size="mini"
		:editable="false"
		format="yyyy-MM-dd HH:mm:ss"
		value-format="timestamp"
		class="select-box"
		placeholder="选择日期时间"
		:picker-options="dateOption"
		@change="handleStartTime"
		@blur="startTimeBlur"
		>
	</el-date-picker>
</el-form-item>

data(){
	return{
		// 快捷选项需配置picker-options对象中的shortcuts，禁用日期通过 disabledDate 设置，传入函数
		// disabledDate	设置禁用状态，参数为当前日期，要求返回 Boolean
		dateOption: {
			shortcuts: [{
				text: '今天',
				onClick(picker) {
					picker.$emit('pick', new Date());
				}
			}, {
				text: '昨天',
				onClick(picker) {
					const date = new Date();
					date.setTime(date.getTime() - 3600 * 1000 * 24);
					picker.$emit('pick', date);
				}
			}, {
				text: '一周前',
				onClick(picker) {
					const date = new Date();
					date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
					picker.$emit('pick', date);
				}
			}],
			disabledDate: (time) => {
				return time.getTime() < Date.now() - 1 * 24 * 3600 * 1000
			}
		},
		form: {
			startTime: null, // 生效时间 -1 表示立即生效
		},
	}
},
methods:{
	// 选择时间
	handleStartTime() {
		console.log(this.form.startTime)
	},
	startTimeBlur() {
		console.log(this.form.startTime)
	},
}

在这里插入图片描述

选择日期范围

<template>
	<div class="block">
		<span class="demonstration">默认</span>
		<el-date-picker
			v-model="value1"
			type="daterange"
			range-separator="至"
			start-placeholder="开始日期"
			end-placeholder="结束日期">
		</el-date-picker>
	</div>
	<div class="block">
		<span class="demonstration">带快捷选项</span>
		<el-date-picker
			v-model="value2"
			type="daterange"
			align="right"
			unlink-panels
			range-separator="至"
			start-placeholder="开始日期"
			end-placeholder="结束日期"
			:picker-options="pickerOptions">
		</el-date-picker>
	</div>
</template>

<script>
	export default {
	  data() {
	    return {
	      pickerOptions: {
	        shortcuts: [{
	          text: '最近一周',
	          onClick(picker) {
	            const end = new Date();
	            const start = new Date();
	            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
	            picker.$emit('pick', [start, end]);
	          }
	        }, {
	          text: '最近一个月',
	          onClick(picker) {
	            const end = new Date();
	            const start = new Date();
	            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
	            picker.$emit('pick', [start, end]);
	          }
	        }, {
	          text: '最近三个月',
	          onClick(picker) {
	            const end = new Date();
	            const start = new Date();
	            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
	            picker.$emit('pick', [start, end]);
	          }
	        }]
	      },
	      value1: '',
	      value2: ''
	    };
	  }
	};
</script>