900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 【vue+elementui】时间选择器:时间格式 设置时间最大日期或最小日期 设置时间选择范围

【vue+elementui】时间选择器:时间格式 设置时间最大日期或最小日期 设置时间选择范围

时间:2022-05-05 17:17:27

相关推荐

【vue+elementui】时间选择器:时间格式 设置时间最大日期或最小日期 设置时间选择范围

时间格式

新版的elementui新增了定义时间格式的属性value-format,这样就不用再自己写js在各种格式间转换。

例:

下面例子在获取startDate时返回的就是’-11-06 11:17:13’

<el-date-picker v-model="startDate" type="date" :value-format="'yyyy-MM-dd HH:mm:ss'"></el-date-picker>

时间选择范围

通常如果是有开始时间、结束时间的话,我们就要设置开始时间不能大过结束时间,同理结束时间不能小于开始时间,我们可以通过picker-options属性来设置。

页面

<template><div>//开始时间<el-date-picker v-model="startDate" type="date" :value-format="'yyyy-MM-dd HH:mm:ss'" :picker-options="startDatePicker(endDate)"></el-date-picker>//结束时间<el-date-picker v-model="endDate" type="date" :value-format="'yyyy-MM-dd HH:mm:ss'" :picker-options="endDatePicker(startDate)"></el-date-picker></div></template><script>import timeFrame from '@/mixins/timeFrame.js'export default {mixins: [ timeFrame ],data () {return {startDate: '',endDate: ''}}}</script>

timeFrame.js

export default {startDatePicker(date1, date2) {return {disableDate(time) {if (date1 && date2) {//时间要控制在一个范围内时return new Date(date1).getTime() > time.getTime() || new Date(date2).getTime < time.getTime();} else {if (date1) {return new Date(date1).getTime() > time.getTime();}if (date2) {return new Date(date2).getTime < time.getTime();}}}}},endDatePicker(date1, date2) {return {disableDate(time) {if (date1 && date2) {//时间要控制在一个范围内时return new Date(date1).getTime() > time.getTime() || new Date(date2).getTime < time.getTime();} else {if (date1) {return new Date(date1).getTime() > time.getTime();}if (date2) {return new Date(date2).getTime < time.getTime();}}}}}}

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