技術標籤：vue

基於網路文章的小改善
http://element-ui.cn/article/show-171756.aspx
文章中若使用者首先選擇結束時間則會出現開始時間不做限制的問題

<el-date-picker v-model="settleTime" :picker-options="pickerOptions" size="small"
              type="daterange" range-separator="至" start-placeholder="開始日期" end-placeholder="結束日期">
</el-date-picker>
 

data(){
	return {
		settleTime:"",//交易時間
      	pickerMinDate:"",
		pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          console.log(maxDate, minDate)
          this.pickerMinDate = minDate.getTime();//選擇的第一個值
          if (maxDate) {
            this.pickerMinDate = ''
          }
        },
        disabledDate: (time) => {
          if (this.pickerMinDate !== '') {
            const day31 = (31 - 1) * 24 * 3600 * 1000
            let maxTime = this.pickerMinDate + day31;
            *此處新增一句*
            let minTime = this.pickerMinDate - day31;
            if (maxTime > new Date()) {
              maxTime = new Date()
            }
            *此處新增一個判斷條件*
            return time.getTime() > maxTime || time.getTime() < minTime 
          }
        return time.getTime() > Date.now()
      }},
	}
}
 

限制時間跨度為選擇第一個時間前後31天的時間