1 <DatePicker type="date" :options="startTimeOptions" format="yyyy-MM-dd" placeholder="请选择日期" @on-change="handleDateChangeStart" :clearable='false'></DatePicker>
2 <span >- -</span>
3 <DatePicker type="date" :options="endTimeOptions" format="yyyy-MM-dd" placeholder="请选择日期" @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 },