vue element-ui 设置时间组件

• Z时代
• 2024-01-10
• 分类：综合

备注：设置开始时间小于结束时间

               <!-- 开始时间 -->
                <div class="block">
                    <!-- <span class="demonstration">开始时间</span> -->
                    <el-date-picker
                    v-model="startTime"
                    type="date"
                    placeholder="选择开始日期"
                    :picker-options="pickerOptionsStart">
                    </el-date-picker>
                </div>
                <span style="color: #333333;font-size: 14px;">至</span>
                <!-- 结束时间 -->
                <div class="block">
                    <!-- <span class="demonstration">结束时间</span> -->
                    <el-date-picker
                    v-model="endTime"
                    type="date"
                    placeholder="选择结束日期"
                    :picker-options="pickerOptionsEnd">
                    </el-date-picker>
                </div>

    data() {
        return {
            startTime: '',
            endTime: '',
            pickerOptionsStart: {
                disabledDate: (time) => {
                if (this.endTime !== '') {
                    // return time.getTime() < Date.now() - 8.64e7 || time.getTime() > this.endTime
                    return  time.getTime() > this.endTime
                } else {
                    // return time.getTime() < Date.now() - 8.64e7
                }
                }
            },
            pickerOptionsEnd: {
                disabledDate: (time) => {
                if (this.startTime !== '') {
                    return time.getTime() < this.startTime
                } else {
                    // return time.getTime() < Date.now()
                    // return time.getTime() < Date.now() - 8.64e7
                }
                }
            },
        }
    },

以上是 vue element-ui 设置时间组件 的全部内容， 来源链接： utcz.com/z/377088.html