TypechoJoeTheme

香草物语

统计
登录
用户名
密码
/
注册
用户名
邮箱
输入密码
确认密码

element ui之el-date-picker日期控件使用一些说明

Laughing博主
2020-11-01
/
0 评论
/
1,262 阅读
/
195 个字
/
百度已收录
11/01
本文最后更新于2022年11月20日,已超过668天没有更新。如果文章内容或图片资源失效,请留言反馈,我会及时处理,谢谢!

这会是一片持续更新的博文,主要记载使用elementui的日期控件el-date-picker的一些问题或者奇技淫巧。

实际日期比选择日期早一天的问题

这个是由于element-ui中时间控件的默认时间为国际标准时间,因此与北京时间差8个小时。

解决方法也很简单,增加value-format="yyyy-MM-dd"即可。

比如:

<el-date-picker v-model="destoryApplyResultVO.applyTime" style="width: 100%" type="date"
                            placeholder="选择申请日期" value-format="yyyy-MM-dd">
</el-date-picker>

日期校验

实际业务开发中,我们可能会涉及开始日期、结束日期这种数据,一般情况下,开始日期是不能晚于结束日期的,对于这种日期类型的校验,我们可以通过rules实现。

<script>
export default {
  name: 'detail',
  data() {
    const checkDate = (rule, value, callback) => {
      if (new Date(this.destoryApplyResultVO.applyTime) > new Date(this.destoryApplyResultVO.checkTime)) {
        callback(new Error('申请日期不能晚于核对日期'))
      } else {
        callback()
      }
    }
    return {
      rules: {
        applyTime: [
          { required: true, message: '请选择申请日期', trigger: ['blur', 'change'] },
          { validator: checkDate, trigger: ['blur', 'change'] }
        ]
      },
    }
  },
  methods: {
    //确定
    handleSave: function() {
      this.$refs['destoryApplyResultVO'].validate((valid) => {
        if (valid) {
          //业务代码
        }
      })
    }
  }
}
</script>
朗读
赞(0)
赞赏
感谢您的支持,我会继续努力哒!
版权属于:

香草物语

评论 (0)
  1. rrrrr 闲逛
    MacOS · Google Chrome

    找了好久了

    2018-01-06 回复