element日期时间选择器未选择日期直接点击确定,输入框内容为空

项目场景:

由于我要实现一个续租的功能:新续租到期时间不得早于之前的到期时间,由于我之前判断了,新续租到期时间选择器,之前到期时间之前的日期都为灰色,不可点击。


问题描述

但是有一个bug,就是不点击选择日期,直接点击确定,直接能获取当前时间到输入框中,如下:


原因分析:

element日期时间选择器默认自带的功能

所以,我们要在这个基础上改成我们想要的样子


解决方案:

于是,我做了设置,不选择任何日期的情况下,直接点击确定,输入框内的值为空。

我的思路是:如果选择的时间等于当前时间,则输入值为空。

实现效果如下:

代码:

   <el-form-item
                label="到期时间"
                prop="due_time"
                label-width="120px"
              >
                <el-date-picker
                  style="margin-left: 0px"
                  v-model="due_time"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetime"
                  placeholder="选择日期"
                  @change="getDate"
                  :picker-options="pickerOptionsStart"
                >
                </el-date-picker>
              </el-form-item>
methods:{
    getDate (values) {
      let date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var day = date.getDate()
      var hour = date.getHours()
      var minutes = date.getMinutes()
      var seconds = date.getSeconds()
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (day >= 0 && day <= 9) {
        day = "0" + day;
      }
      if (hour >= 0 && hour <= 9) {
        hour = "0" + hour;
      }
      if (minutes >= 0 && minutes <= 9) {
        minutes = "0" + minutes;
      }
      if (seconds >= 0 && seconds <= 9) {
        seconds = "0" + seconds;
      }
      var now = year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds
      console.log("now", now)
      console.log("values", values)
      if (values == now) {
        this.due_time = ''
      }
    },
}

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值