【Vue】element-UI日期选择器value-format和范围选择冲突bug解决

本来想将时间选择器的时间format成8位字符串型,如20200307,但是format之后范围选择功能不能正常使用,最后使用moment插件读取八位字符串时间得以解决

初始源代码参考至https://www.cnblogs.com/ceceliahappycoding/p/10862991.html
初始源代码参考至本本链接

过程中发现value-format="2020-03-07"则可以正常使用,探索许久发现是不能正常识别八位字符串时间

<el-form ref="form" :model="sizeForm" label-width="100px" size="mini">
    <el-form-item label="开始时间">
        <el-date-picker type="datetime" placeholder="开始日期" :picker-options="startTime" v-model="sizeForm.startTime" style="width: 90%;"></el-date-picker>
    </el-form-item>
    <el-form-item label="结束时间">
        <el-date-picker type="datetime" placeholder="结束日期" :picker-options="endTime" v-model="sizeForm.endTime" style="width: 90%;"></el-date-picker>
    </el-form-item> 
<el-form>
export default{
  data () {
    return {
      sizeForm: {
        startTime: '',
        endTime: ''
      },
// 开始时间小于结束时间,且开始时间小于此刻
      startTime: {
        disabledDate: time => {
          if (this.sizeForm.endTime) {
            return time.getTime() > new Date(this.sizeForm.endTime).getTime()
          } else {
            return time.getTime() > Date.now()
          }
        }
      },
// 结束时间大于开始时间,且小于此刻
      endTime: {
        disabledDate: time => {
          if (this.sizeForm.startTime) {
            return time.getTime() > Date.now() || time.getTime() < new Date(this.sizeForm.startTime).getTime()
          } else {
            return time.getTime() > Date.now()
          }
        }
      }
    }
  }
}

解决方法:
import moment from 'moment’
将new Date().getTime()换成moment()

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element-UI日期选择是一个常用的组件,可以方便地实现日期选择功能。根据引用\[1\]中的代码,可以看出该日期选择是一个周选择,只能选择本周以及本周之前的日期。通过设置picker-options的disabledDate属性,可以限制选择日期范围。在这个例子中,disabledDate函数中的逻辑是禁止选择本周日以后的日期。具体实现是通过获取今天的日期和计算今天是周几来确定禁止选择日期范围。如果今天是周日,则禁止选择今天以后的日期;否则,禁止选择本周日以后的日期。 另外,引用\[2\]中的代码展示了如何在Vue中使用Element-UI日期选择。通过在Vue实例中定义value1和value2这两个变量,可以实现日期的双向绑定。在HTML中,可以使用el-date-picker标签来创建日期选择,并通过v-model绑定value1和value2变量。通过设置不同的属性,如type、format、placeholder等,可以自定义日期选择的样式和功能。 最后,引用\[3\]中的代码展示了在Vue项目中安装和使用dayjs库。dayjs是一个轻量级的日期处理库,可以方便地进行日期的格式化、计算和比较等操作。在Vue项目中,可以通过在main.js中引入dayjs,并将其挂载到Vue的原型上,以便在组件中直接使用dayjs函数来处理日期。 综上所述,Element-UI日期选择是一个功能强大且易于使用的组件,可以满足各种日期选择的需求。通过合理设置属性和使用相关库,可以实现更加灵活和定制化的日期选择功能。 #### 引用[.reference_title] - *1* *3* [Element UI DatePicker 日期选择](https://blog.csdn.net/Igiveufireworks/article/details/129047276)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [【elementUI-日期选择(两个框 限制选择范围、快捷键选择】](https://blog.csdn.net/JUN416326495/article/details/126723033)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值