Vue中的el-date-picker时间选择器的使用

1、value-format属性设置需要什么格式的时间
2、type类型选择datetime、date

年月日时分秒

<el-date-picker
    value-format="yyyy-MM-dd HH:mm:ss"
  	v-model="excelRuleForm.startTime"
  	type="datetime"
  	:placeholder="选择开始时间">
</el-date-picker>
<el-date-picker
    value-format="yyyy-MM-dd HH:mm:ss"
  	v-model="excelRuleForm.endTime"
  	type="datetime"
  	:placeholder="选择结束时间">
</el-date-picker>

在这里插入图片描述

年月日

type类型改成date时,日期选择器就变成了年月日。
value-format不指定时,也默认时年月日。

在这里插入图片描述

### 关于 `el-date-picker` 组件中的 `picker-options` 在 Vue 3 中使用 Element Plus 的 `el-date-picker` 组件时,可以通过配置 `picker-options` 来自定义日期选择的行为。此属性允许设置一些特定的选项来控制可选范围、快捷方式以及其他行为。 #### 自定义不可选日期 通过指定函数返回布尔值的方式来自定义哪些天是禁用状态: ```javascript const disabledDate = (time) => { const date = new Date(); // 禁用今天之后的所有日期 return time.getTime() > date.setHours(0, 0, 0, 0); }; ``` #### 设置快捷操作项 可以为用户提供一组预设的时间区间供快速选择: ```javascript const shortcuts = [ { text: '最近一周', value: () => { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); return [start, end]; }, }, { text: '最近一个月', value: () => { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); return [start, end]; }, } ]; ``` #### 完整示例代码 下面是一个完整的例子展示如何在模板中应用这些配置: ```vue <template> <div class="block"> <span class="demonstration">带有快捷选项</span> <el-date-picker v-model="value" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" > </el-date-picker> </div> </template> <script setup> import { ref } from "vue"; // 可选参数对象 const pickerOptions = { shortcuts, disabledDate, }; // 数据绑定变量 let value = ref(''); </script> ``` [^1]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值