element-ui使用心得の1つ:date-picker選択可能範囲区間を制限する

el-date-pickerのpicker-optionsプロパティは、選択できない日付領域と今日、明日などのショートカット

を制御するために使用されます.

公式ドキュメントで提供されるdemoのうち、ある日付より大きい場合は

を選択できません.

disabledDateが最後にreturnの戻り値を発見しました.この戻り値を変更して、ある日付よりも大きい日付を実現します.つまり、オプション範囲を設定して直接コードをオンにします.

HTML:

<el-date-picker
   v-model="beginTime"
  :type="dateType"
  :picker-options="pickerOptionsBegin"
  placeholder="    ">
</el-date-picker>
<el-date-picker
   v-model="endTime"
  :type="dateType"
  :picker-options="pickerOptionsBegin"
  placeholder="    ">
</el-date-picker>

JS:

data () {
	return {
		timeStamp: 2 * 24 * 60 * 60 * 1000, // 2        ，              ，     
		beginTime: '',
		endTime: '' //     ，                
	}
},
computed: {
	this.pickerOptionsBegin: {
      disabledDate: time => { // time   ，          beginTime       
        if (time && this.endTime) {
          //   ：    time.endTime          .getTime()     
          //          ，          （     ）   。           
          return time.getTime() > new Date(endTime).getTime() || time.getTime() < new Date(endTime).getTime() - timeStamp
        }
      }
    }
}

間違いがあったら、メッセージを残してください.見たい内容があればメッセージを残して、私が書きます.ありがとう