uni-app uni-datetime-pick NAN 问题

这是一个典型的 uni-datetime-picker 组件在表单校验时遇到的 NAN 问题。问题核心在于组件初始值处理与表单校验规则的冲突。

问题分析：

1. NAN 来源：当 uni-datetime-picker 的 v-model 绑定的值为 undefined 或 null 时，组件内部在特定条件下（尤其在安卓端）可能返回 NAN 作为日期值。表单校验触发时，这个 NAN 值被传递给校验规则。

2. 规则冲突：你的校验规则中使用了 minLength: 10，这是用于字符串长度的校验，但 uni-datetime-picker 的值可能是时间戳（数字）或 Date 对象。当值为 NAN（Not a Number）时，minLength 校验可能产生非预期行为。

解决方案：

方案一：初始化默认值（推荐） 在 data 中为 form.happenedTime 设置一个合理的初始值，避免 undefined：

data() {
  return {
    form: {
      happenedTime: '' // 或 null，但避免 undefined
    }
  }
}

方案二：调整校验规则 移除 minLength 规则，改用自定义校验函数处理日期格式：

rules: {
  happenedTime: {
    rules: [{
      required: true,
      errorMessage: '请选择事发时间',
      trigger: 'change'
    }, {
      validateFunction: (rule, value, data, callback) => {
        if (value === null || value === undefined || isNaN(new Date(value).getTime())) {
          callback('请选择有效的事发时间')
        }
        return true
      }
    }]
  }
}

方案三：使用 value 属性替代 v-model 如果上述方法无效，可以尝试使用 value 属性和 change 事件：

<uni-datetime-picker 
  type="datetime" 
  :border="false" 
  :value="form.happenedTime"
  @change="onTimeChange"
  style="text-align: right;"
></uni-datetime-picker>

methods: {
  onTimeChange(e) {
    this.form.happenedTime = e
  }
}