在template中
<el-date-picker
v-model="timeData"
type="daterange"
size="mini"
range-separator="至"
start-placeholder="開始日期"
end-placeholder="結束日期"
value-format="yyyy-MM-dd"
class="data-pick"
unlink-panels
></el-date-picker>
在選擇日期范圍時,默認情況下左右面板會聯動。如果希望兩個面板各自獨立切換當前月份,可以使用unlink-panels屬性解除聯動。
日期格式
使用format指定輸入框的格式;使用value-format指定綁定值的格式。默認情況下,組件接受並返回Date對象。 如需修改日期格式,可參考官網配置項https://element.eleme.io/#/zh-CN/component/date-picker
在data里面
data () { return { timeData:[] }
在methods里面設置默認一年時間
methods: {
/* 獲取過去時間,並傳值給現在時間 */
getPassYearFormatDate () {
var nowDate = new Date()
var date = new Date(nowDate)
date.setDate(date.getDate() - 365)
var seperator1 = '-'
var year = date.getFullYear()
var month = date.getMonth() + 1
var strDate = date.getDate()
if (month >= 1 && month <= 9) {
month = '0' + month
}
if (strDate >= 0 && strDate <= 9) {
strDate = '0' + strDate
}
var formatDate = year + seperator1 + month + seperator1 + strDate
this.getNowFormatDate(formatDate)
},
/* 獲取現在時間,並接受過去時間的值 */
getNowFormatDate (formatDate) {
var date = new Date()
var seperator1 = '-'
var year = date.getFullYear()
var month = date.getMonth() + 1
var strDate = date.getDate()
if (month >= 1 && month <= 9) {
month = '0' + month
}
if (strDate >= 0 && strDate <= 9) {
strDate = '0' + strDate
}
var nowData = year + seperator1 + month + seperator1 + strDate
this.timeData= [formatDate, nowData] // 默認賦值一年時間
}
}
別忘了在mounted里面調用一下
mounted(){ this.getPassYearFormatDate () }
然后在你需要的地方傳值就可以了,例如:
beginDate: this.timeData[0], //起始時間 endDate: this.timeData[1], //終止時間