element 限制选择固定时间范围日期

11 篇文章 0 订阅

效果图:
在这里插入图片描述

              <el-date-picker
                size="small"
                v-model="time"
                type="daterange"
                :picker-options="pickerOptions"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>

data(){
	  return{
	  	time:[],
	  	startTime:'2021-06-29',
	  	endTime:'2021-07-07',
		pickerOptions: {
			disabledDate: (time) => {
                let beginDate = new Date(this.startTime)
                let endDate = new Date(this.endTime)
                return time.getTime() > endDate.getTime() || time.getTime() < beginDate.getTime()
          },
		}
	
	}
}
回答: 如果你想限制el-date-picker的type为datetime时的固定时间节点,你可以使用value-format属性来指定绑定值的格式,并在default-time属性中设置选中日期后的默认具体时刻。这样,用户在选择日期时只能选择预设的时间节点。另外,你还可以使用range-separator属性来设置选择范围时的分隔符,start-placeholder和end-placeholder属性来设置范围选择时开始日期和结束日期的占位内容。\[1\]如果你需要限制开始日期必须在结束日期之前,你可以在提交时进行判断,或者禁用时间跨度为七天的选项。\[2\]最后,你可以使用el-icon-date类来设置日期图标的样式。\[3\] #### 引用[.reference_title] - *1* *3* [el-date-picker设置右侧显示图标,自定义右侧图标,时间选择后:滑入显示清除icon,隐藏右侧自定义图标](https://blog.csdn.net/qq_52140056/article/details/125273383)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [如何给element el-date-picker日期组件设置时间按照时间禁用](https://blog.csdn.net/weixin_42343307/article/details/126320241)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值