elementui+ <el-date-picker type=“datetime“/>时间组件的当前时间的180天之内的禁止选择处理

文章讲述了在Vue项目中使用el-date-picker组件时,如何实现180天后的日期选择限制以及如何设置默认为当前时间加上180天。一是通过`disabledDate`属性限制选择,二是通过`getThreeTime`方法设置默认值。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

需求1如下:当前时间+180天不可选择,180天之后可以选择,之前的时间都禁止选择

页面代码如下:

  <el-date-picker

            v-model="temp.expire_time"

            :picker-options="pickerOption"

            type="datetime"

            placeholder="选择日期时间"

            format="yyyy-MM-dd  HH:mm:ss "

            value-format="yyyy-MM-dd HH:mm:ss"

          />

pickerOption: {

       // 限制只能选择180天以后的时间

        disabledDate: (time) => {

          return (time.getTime() < Date.now() + 8.64e7 * 180)

        }

      },

需求2如下:默认选择当前时间的180天的时间,所有时间都可以选择

页面代码同需求1一样,不同的是处理默认选择的时间

methods: {

    // 获取当前时间的180天后的时间值

    getThreeTime() {

      var data = new Date()

      var Da = new Date(data.getTime() + 24 * 60 * 60 * 1000 * 180)

      var y = Da.getFullYear()

      var m = Da.getMonth() + 1

      var d = Da.getDate()

      var H = Da.getHours()

      var mm = Da.getMinutes()

      var ss = Da.getSeconds()

      m = m < 10 ? '0' + m : m

      d = d < 10 ? '0' + d : d

      H = H < 10 ? '0' + H : H

      return y + '-' + m + '-' + d + ' ' + H + ':' + mm + ':' + ss

    },

}

 // 授权有效期默认值是180天

编辑的函数中处理如下

      if (row.expire_time === null) {

        // 授权有效期默认值选择是180天之后的

        this.$set(this.temp, 'expire_time', this.getThreeTime());

      } else {

        this.$set(this.temp, 'expire_time', row.expire_time);

      }

以上就是关于年月日时分秒的时间组件的两种需求处理,今天就分享到这里啦!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值