uni-forms+uni-datetime-picker 未触发表单校验

<template>  
  <view class="container">  
    <uni-forms  
      ref="formRef"  
      :model="formData"  
      :rules="rules"  
      :label-position="labelPosition"  
      :label-width="labelWidth"  
      :border="border"  
    >  
      <!-- 出生日期 -->  
      <uni-forms-item label="出生日期" name="birthday" required>  
        <uni-datetime-picker  
          v-model="formData.birthday"  
          type="datetime"  
          placeholder="请选择出生日期"  
        />  
      </uni-forms-item>  
      <!-- 表单操作按钮 -->  
      <view class="form-actions">  
        <button type="primary" @click="submitForm">提交</button>  
        <button type="default" @click="resetForm">重置</button>  
      </view>  
    </uni-forms>  
  </view>  
</template>  

<script setup>  
import { ref, reactive } from "vue";  

// 表单数据  
const formData = reactive({  
  birthday: "",  
});  

// 表单校验规则  
const rules = {  
  birthday: {  
    rules: [{ required: true, errorMessage: "请选择出生日期" }],  
  },  
};  

// 表单属性  
const labelPosition = "top";  
const labelWidth = "auto";  
const border = true;  
const formRef = ref(null);  
// 提交表单  
const submitForm = () => {  
  formRef.value  
    .validate()  
    .then((result) => {  
      if (result) {  
        console.log("表单验证通过:", formData);  
        uni.showToast({  
          title: "表单验证通过",  
          icon: "success",  
        });  
      } else {  
        console.log("表单验证失败");  
      }  
    })  
    .catch((error) => {  
      console.error("验证错误:", error);  
    });  
};  

// 重置表单  
const resetForm = () => {  
  formRef.value.resetFields();  
  uni.showToast({  
    title: "表单已重置",  
    icon: "none",  
  });  
};  
</script>  

<style>  
.container {  
  padding: 20px;  
}  

.form-actions {  
  display: flex;  
  justify-content: space-between;  
  margin-top: 30px;  
}  

.form-actions button {  
  width: 45%;  
}  
</style>