elementUI的日期控件選擇時間範圍控制

<el-date-picker
         v-model="formData.time"
         placeholder="請選擇"
         type="daterange"
         :clearable="false"
         range-separator="至"
         start-placeholder="開始日期"
         end-placeholder="結束日期"
         value-format="yyyy-MM-dd HH:mm:ss"
         :picker-options="pickerOptions"
         :default-time="defaultTime"
     >
     </el-date-picker>
           

其中的pickerOptions就是用于日期範圍限制，常用的使用場景有條件查詢和建立表單

1. 條件查詢

data() {
        return {
            pickerOptions: {
                disabledDate: (time) => {
                    return time.getTime() > new Date().getTime() + 60 * 60 * 24 * 1000
                },
            },
            defaultTime: ['00:00:00', '23:59:59'],
                }
        }
           

1. 建立表單

data() {
        return {
            pickerOptions: {
                disabledDate: (time) => {
                    return time.getTime() < new Date().getTime() - 60 * 60 * 24 * 1000
                },
            },
            defaultTime: ['00:00:00', '23:59:59'],
                }
        }