element ui 中的時間選擇器怎麼設定預設值/el-date-picker區間選擇器怎麼這是預設值
阿新 • • 發佈:2018-12-01
template程式碼
<el-date-picker value-format="yyyy-MM-dd" v-model="search.date" type="daterange" align="right" placeholder="選擇日期範圍" :default-value="this.search.date" :picker-options="pickerOptions" range-separator=" ~ "> </el-date-picker>
順遍po一個data裡面的相關程式碼,下面的是看你日期選擇器的需求哦~
search: { date:[], beginDate: '', endDate: '' }, pickerOptions: { shortcuts: [{ text: '今天', onClick(picker) { const end = new Date(); end.setHours(23, 59, 59); const start = new Date(end); start.setTime(end.getTime() - 3600 * 1000 * 24 + 1000); picker.$emit('pick', [start, end]); } }, { text: '最近一週', onClick(picker) { const end = new Date(); const start = new Date(); end.setHours(23, 59, 59); start.setTime(end.getTime() - 3600 * 1000 * 24 * 7 + 1000); picker.$emit('pick', [start, end]); } }, { text: '最近一個月', onClick(picker) { const end = new Date(); const start = new Date(); end.setHours(23, 59, 59); start.setTime(end.getTime() - 3600 * 1000 * 24 * 30 + 1000); picker.$emit('pick', [start, end]); } }, { text: '最近三個月', onClick(picker) { const end = new Date(); const start = new Date(); end.setHours(23, 59, 59); start.setTime(end.getTime() - 3600 * 1000 * 24 * 90 + 1000); picker.$emit('pick', [start, end]); } }, { text: '最近一年', onClick(picker) { const end = new Date(); const start = new Date(); end.setHours(23, 59, 59); start.setTime(end.getTime() - 3600 * 1000 * 24 * 365 + 1000); picker.$emit('pick', [start, end]); } }] },
重點來了 設定時間的區間選擇器主要是要在 :default-value=""裡面去設定一個數組
我這裡的資料就是this.search.date,先設定一個空陣列,然後在created裡面把日期push 進去
created () { this.search.beginDate = this.handleTimeOld(new Date()) //2012-12-1 handleTimeOld是我用來獲取當月的第一天的 this.search.endDate = this.handleTimeNew(new Date()) //2012-12-1 handleTimeNew是獲取今天的日期 this.search.date.push(this.search.beginDate) this.search.date.push(this.search.endDate) this.fetchData() }
上面的就可以了~~~~~能夠設定預設值了
下面的是獲取日期的方法
handleTimeOld (time, split) { //是我用來獲取當月的第一天的
let date = new Date(time)
let year = date.getFullYear()
let month = date.getMonth() + 1
split = '-'
return [year, month, 1].map(num => this.formatNumber(num)).join(split)
},
handleTimeNew (time) { //handleTimeNew是獲取今天的日期
let date = new Date(time)
let year = date.getFullYear()
let month = (date.getMonth() + 1) > 10 ? (date.getMonth() + 1) : ('0' + (date.getMonth() + 1))
let day = date.getDate() > 10 ? date.getDate() : ('0' + date.getDate())
return `${year}-${month}-${day}`
}
2018.12.01 周小姐在加班,你們卻在玩,沒事沒事,我會發財的