时间格式
新版的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();}}}}}}