1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 【Element】vue3-element-plus中日期时间选择器(范围)限制选择天数(30天为例)

【Element】vue3-element-plus中日期时间选择器(范围)限制选择天数(30天为例)

时间:2019-12-05 18:51:20

相关推荐

【Element】vue3-element-plus中日期时间选择器(范围)限制选择天数(30天为例)

element-plus的el-data-picker中没有了pick-options,但是新增了事件calendar-change(等同onPick),disable-date也有,同样可以实现

Element-plus文档

代码实现

组件

<el-form-item v-if="conditionForm.filterType == 0" label="时间范围:" prop="rangeDate"><el-date-pickerv-model="validateForm.rangeDate"type="datetimerange"range-separator="到"start-placeholder="开始日期"end-placeholder="结束日期"format="YYYY/MM/DD HH:mm:ss"value-format="YYYY-MM-DD H:m:s":default-time="defaultTime2":disabled-date="disabledDate"@focus="handleFocus"@calendar-change="handleChange"/></el-form-item>

方法

......//变量const chooseDay = ref(null)const handleChange = (val: Date[]) => {const [pointDay] = valchooseDay.value = pointDay}//取值方法const handleFocus = () => {chooseDay.value = null}const disabledDate = (time: number) => {if (!chooseDay.value) {return false}let timeRange = 30const con1 = new Date(chooseDay.value).getTime() - timeRange * 24 * 60 * 60 * 1000const con2 = new Date(chooseDay.value).getTime() + timeRange * 24 * 60 * 60 * 1000return time < con1 || time > con2}return {handleChange,handleFocus,disabledDate}......

效果实现

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。