【vue+elementui】时间选择器:时间格式、设置时间最大日期或最小日期...
【vue+elementui】时间选择器：时间格式、设置时间最⼤⽇期或最⼩⽇期、设
置时间选择范围
时间格式
新版的elementui新增了定义时间格式的属性value-format，这样就不⽤再⾃⼰写js在各种格式间转换。
例：
下⾯例⼦在获取startDate时返回的就是’2019-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属性来设置。
页⾯
<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
startDatePicker(date1, date2) {
return {
disableDate(time) {
if (date1 && date2) {
//时间要控制在⼀个范围内时
return new Date(date1).getTime() > Time() || new Date(date2).getTime < Time();    } else {
if (date1) {
return new Date(date1).getTime() > Time();
}
if (date2) {
return new Date(date2).getTime < Time();
}
}
}
}
},
endDatePicker(date1, date2) {
return {
disableDate(time) {
if (date1 && date2) {
//时间要控制在⼀个范围内时
return new Date(date1).getTime() > Time() || new Date(date2).getTime < Time();    } else {
if (date1) {
return new Date(date1).getTime() > Time();
}
if (date2) {
return new Date(date2).getTime < Time();
}
}
}
}
二十大开始时间}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。