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 = ''
      }
    },
}

### Element Plus 日期选择器不可点击的解决方案 当遇到Element Plus中的`el-date-picker`组件无法正常响应点击事件的情况时,通常可能是由多种原因引起的。为了排查并解决问题,可以考虑以下几个方面: #### 检查样式冲突 如果页面上存在其他CSS样式影响到了日期选择器的表现形式或交互行为,则可能导致其失去正常的点击效果。建议通过浏览器开发者工具审查元素,查看是否有外部样式覆盖了默认样式。 #### 验证脚本加载顺序 确保JavaScript文件按照正确的依赖关系被引入到HTML文档中。特别是对于Vue应用而言,应该先初始化框架本身再挂载具体的UI库[^1]。 #### 排除插件干扰 某些第三方扩展可能会改变DOM结构或者阻止冒泡机制,从而使得特定控件变得难以操作。尝试禁用不必要的附加模块来观察现象是否会有所改善。 #### 审视配置项设定 仔细核对传递给组件的各项参数是否合理合法。比如`disabledDate`函数如果不慎编写错误就容易引发意外状况;另外也要留意版本兼容性问题——不同发行版之间可能存在细微差异。 针对上述可能性逐一验证之后,假如仍然能找到症结所在的话,不妨参照官方给出的最佳实践指南进一步调试程序逻辑。下面是一份简单的示例代码片段展示如何正确启用一个可用的日历输入框: ```html <template> <div class="block"> <span class="demonstration">Default</span> <el-date-picker v-model="value1" type="date" placeholder="Pick a day"></el-date-picker> </div> </template> <script setup lang="ts"> import { ref } from 'vue' const value1 = ref('') </script> ```
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值