1 <DatePicker type="date" :options="startTimeOptions" format="yyyy-MM-dd" placeholder="請選擇日期" style="width: 120px" @on-change="handleDateChangeStart" :clearable='false'></DatePicker>
2         <span style="margin: 0 10px;color:#87C571;">- -</span>
3 <DatePicker type="date" :options="endTimeOptions" format="yyyy-MM-dd" placeholder="請選擇日期" style="width: 120px" @on-change="handleDateChangeEnd" :clearable='false'></DatePicker>

 1 data() {
 2         return {
 3             checkdateStart: '',
 4             checkdateEnd: '',
 5             timeRangeStart: new Date(),
 6             startTimeOptions: {                                 //限制起始時間不得超過今天
 7                 disabledDate: (date) => {
 8                     return
 
 date && date.valueOf() > Date.now() - 1000 * 60 * 60 * 24
 9                      || (date.valueOf() < moment().add(-3, 'years').valueOf());
10                 },
11             },
12             endTimeOptions: {                 //限制結束時間不得超過今天
13                 disabledDate: (date) => {
 
14                     return date && date.valueOf() > Date.now() - 1000 * 60 * 60 * 24
15                      || (date.valueOf() < moment().add(-3, 'years').valueOf());
16                 },
17             },
18         }
19 },

 1 handleDateChangeStart(e) {
 2             this.checkdateStart = e  
 3             this.endTimeOptions = {
 4                 disabledDate: (date) => {
 5                     return date.valueOf() > this.timeRangeStart || date.valueOf() < new Date(e).valueOf()
 6                 },
 7             }
 8 },
 9 handleDateChangeEnd(e) {
10             this.checkdateEnd = e
11             this.startTimeOptions = {
12                 disabledDate(date) {
13                     return date.valueOf() < moment().add(-3, 'years').valueOf()
14                      || date.valueOf() > new Date(e).valueOf()
15                 },
16             }
17 },