当前位置: 首页 > 工具软件 > UI-date > 使用案例 >

Element ui 设置默认时间显示

穆乐逸
2023-12-01

element ui 选择时间组件: 需求:实现默认时间定位于当前时间延后7天的日期;且当前时间之前的日期不能选;

html部分:

            <el-date-picker
                  v-model="shopForm.end_time"
                  type="datetime"
                  size="medium"
                  style="width:100%"
                  placeholder="选择日期时间"
                  :picker-options="expireTimeOption"
                  value-format="timestamp"
                  default-time="00:00:00"
                />

js 部分代码实现:

 data() {
    return {
      shopForm: {
        end_time: ''
      },
      expireTimeOption: {
        disabledDate(date) {
          return date.getTime() <= Date.now() - 8.64e7 // new Date()
        }
      }
    }
  },
 created() {
    this.setTime() // 设置默认时间
  },
  methods: {
    // 默认时间设置 7天后
    setTime() {
      const nowD = new Date()
      nowD.setTime(nowD.getTime() + 7 * 3600 * 1000 * 24)
      this.shopForm.end_time = nowD
    },
    /**
     * 选择时间
     */
    changeendTime() {
      if (this.shopForm.end_time > (Date.now())) {
        this.shopForm.end_time = this.shopForm.end_time
      } else {
        this.shopForm.end_time = ''
        this.$message.error('请选择大于当前日期')
      }
    },
  }

 

 类似资料: