element-plus form表单组件之el-date-picker日期选择器组件

el-date-picker日期选择器组件可根据年，月，日期，时间范围来进行选择，可以自定义日期格式，和样式，还提供多种内置事件。

主要属性如下

属性名	说明	类型	可选值	默认值
model-value / v-model	绑定值，如果它是数组，长度应该是 2	Date / number / string / Array	— —
readonly	只读	boolean	—	false
disabled	禁用	boolean	—	false
editable	文本框可输入	boolean	—	true
clearable	是否显示清除按钮	boolean	—	true
size	输入框尺寸	string	large/default/small	default
placeholder	非范围选择时的占位内容	string	—	—
type	显示类型	string	year/month/date/datetime/ week/datetimerange/daterange	date
format	显示在输入框中的格式	string	date formats（时间格式字符串）	YYYY-MM-DD HH:mm:ss
default-value	可选，选择器打开时默认显示的时间	Date/[Date, Date]	—
default-time	00:00:00	Date / [Date, Date]	—	—

事件

事件名	说明	函数入参
change	日期组件值改变时触发	value:选择的值，类型为Date
在ui上选择日期和时间后日期组件v-model绑定的响应式变量的类型都会比变成date类型

用法示例

<script setup lang="ts">
import { onMounted, ref } from 'vue'const date1=ref(null);
const date2=ref(null);
const date3=ref(null);const startDate=new Date()
startDate.setDate(startDate.getDate()-1);const endDate=new Date()
endDate.setDate(startDate.getDate()+7);const date4=ref([startDate,endDate]);const changeEvent=function(val):void{console.info('change ',val)
}const date5=ref('2024-06-22 11:00:00');
const date6=ref(null);</script><template><div><el-row gutter="30"><el-col span="12">月份选择器</el-col><el-col span="12"><el-date-picker v-model="date1" size="large" type="month"></el-date-picker></el-col></el-row><el-row gutter="30"><el-col span="12">月份范围选择器</el-col><el-col span="12"><el-date-picker v-model="date2" size="large" type="monthrange"  clearable="true"></el-date-picker></el-col></el-row><el-row gutter="30"><el-col span="12">日期选择器</el-col><el-col span="12"><el-date-picker v-model="date3" size="large" ></el-date-picker></el-col></el-row><el-row gutter="30"><el-col span="12">日期范围选择器</el-col><el-col span="12"><el-date-picker v-model="date4" size="large" type="daterange"  @change="changeEvent" clearable="true"></el-date-picker></el-col></el-row><el-row gutter="30"><el-col span="12">日期时间选择器</el-col><el-col span="12"><el-date-picker v-model="date5" size="large" type="datetime" ></el-date-picker></el-col></el-row><el-row gutter="30"><el-col span="12">日期时间范围选择器</el-col><el-col span="12"><el-date-picker v-model="date6" size="large" type="datetimerange"   clearable="true"></el-date-picker></el-col></el-row></div></template><style scoped></style>

https://element-plus.org/zh-CN/component/datetime-picker.html