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

这会是一片持续更新的博文，主要记载使用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>