u-datetime-picker 组件设置默认当前时间并确保数据格式正确

最新推荐文章于 2025-06-05 11:18:05 发布

原创最新推荐文章于 2025-06-05 11:18:05 发布 · 2.3k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html #uniapp #datetime-picker

前端/小程序专栏收录该内容

122 篇文章

订阅专栏

前言

对于这个组件，基本知识推荐阅读：Uni-App中的u-datetime-picker时间选择器Demo

1. Demo

基本的测试Demo如下：

<template>
  <view>
    <!-- 时间选择器 -->
    <u-datetime-picker
      @confirm="declareRepareTimePickerConfirm" 
      @cancel="declareRepareTimePicker = false"
      :show="declareRepareTimePicker" 
      v-model="timeValue" <!-- v-model绑定格式化后的时间字符串 -->
      ref="declareRepareTimePicker"
      mode="datetime"
      closeOnClickOverlay
    ></u-datetime-picker>

    <!-- 表单项 -->
    <u-form-item prop="declareRepareTime" label="报修时间:" labelWidth="150rpx">
      <u--input
        prefixIcon="calendar"
        v-model="formModel.declareRepareTime" 
        @focus="declareRepareTimePicker = true" 
      ></u--input>
    </u-form-item>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 控制时间选择器显示
      declareRepareTimePicker: false,

      // 默认绑定的时间，格式化为字符串（yyyy-mm-dd hh:MM）
      timeValue: this.$u.date(new Date(), 'yyyy-mm-dd hh:MM'),

      // 表单数据，默认设置为当前时间
      formModel: {
        declareRepareTime: this.$u.date(new Date(), 'yyyy-mm-dd hh:MM')
      }
    };
  },

  methods: {
    // 确认选择时间
    declareRepareTimePickerConfirm(e) {
      this.declareRepareTimePicker = false;
      const selectedTime = this.$u.date(e.value, 'yyyy-mm-dd hh:MM');
      const currentTime = this.$u.date(new Date(), 'yyyy-mm-dd hh:MM');
      
      // 校验选择的时间是否大于当前时间
      if (selectedTime > currentTime) {
        uni.$u.toast("报修时间不能大于当前时间");
        this.formModel.declareRepareTime = ""; // 清空值
      } else {
        this.formModel.declareRepareTime = selectedTime; // 设置为选择时间
      }
    }
  },

  // 页面加载时执行
  onReady() {
    // 设置格式化器
    this.$refs.declareRepareTimePicker.setFormatter(this.formatter);
    // 初始化时间为当前时间的格式化字符串
    this.formModel.declareRepareTime = this.$u.date(new Date(), 'yyyy-mm-dd hh:MM');
  },

  // 格式化日期（年、月、日、小时、分钟）
  formatter(type, value) {
    if (type === 'year') {
      return `${value}年`;
    }
    if (type === 'month') {
      return `${value}月`;
    }
    if (type === 'day') {
      return `${value}日`;
    }
    if (type === 'hour') {
      return `${value}时`;
    }
    if (type === 'minute') {
      return `${value}分`;
    }
    return value;
  }
};
</script>

<style scoped>
/* 自定义样式 */
</style>

data：
初始化了 timeValue 和 formModel.declareRepareTime 为当前时间的格式化字符串（yyyy-mm-dd hh:MM）
declareRepareTimePickerConfirm：
当用户确认选择时间后，会进行时间校验，如果选择的时间大于当前时间，则提示错误并清空选择；否则，将选中的时间赋值给 formModel.declareRepareTime
onReady：
确保在页面加载完成时，时间选择器已正确初始化，并且默认时间为当前时间
formatter：
自定义时间格式，显示年、月、日、时、分的后缀（例如：2024年12月01日）

2. 拓展

实战中的Demo和测试Demo相似，主要补充一些注意事项

为了让其回显正确的数据，对应的onReady就让其赋值

onReady() {
	this.$refs.declareRepareTimePicker.setFormatter(this.formatter)
	this.formModel.declareRepareTime = this.$u.date(new Date(), 'yyyy-mm-dd hh:MM');
	this.setCheckRules()
}

在这里插入图片描述

以下为实战中抽离的Demo：

该 Demo 实现了一个包含时间选择器的表单，用户可以选择报修时间，并通过表单提交数据
时间选择器会显示当前时间，并确保选择的时间不大于当前时间。如果用户点击“确定”按钮提交数据，系统会进行验证并提交到后台

具体如下：

<template>
  <view>
    <!-- 表单容器 -->
    <uni-card style="margin-top: 50%;overflow: visible;">
      <!-- u-form 表单组件 -->
      <u--form :model="formModel" ref="form">
        <!-- 报修时间字段 -->
        <u-form-item prop="declareRepareTime" label="报修时间:" labelWidth="150rpx">
          <u--input
            prefixIcon="calendar"
            v-model="formModel.declareRepareTime" 
            @focus="declareRepareTimePicker = true" 
          ></u--input>
        </u-form-item>
      </u--form>

      <!-- 提交和重置按钮 -->
      <view style="margin-top: 20rpx;flex-direction: row;justify-content: center;">
        <u-button class="customButton" type="primary" @click="submit">确定</u-button>
        <u-button class="customButton" @click="clearFormField">重置</u-button>
      </view>
    </uni-card>

    <!-- 时间选择器 -->
    <u-datetime-picker
      @confirm="declareRepareTimePickerConfirm" 
      @cancel="declareRepareTimePicker = false"
      :show="declareRepareTimePicker" 
      v-model="timeValue"
      ref="declareRepareTimePicker"
      mode="datetime"
      closeOnClickOverlay
    ></u-datetime-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 控制时间选择器显示
      declareRepareTimePicker: false,
      
      // 默认时间为当前时间，格式化为字符串
      timeValue: this.$u.date(new Date(), 'yyyy-mm-dd hh:MM'),

      // 表单数据模型
      formModel: {
        declareRepareTime: this.$u.date(new Date(), 'yyyy-mm-dd hh:MM') // 默认时间为当前时间
      }
    };
  },
  methods: {
    // 时间选择器确认回调
    declareRepareTimePickerConfirm(e) {
      this.declareRepareTimePicker = false;
      const selectedTime = this.$u.date(e.value, 'yyyy-mm-dd hh:MM');
      const currentTime = this.$u.date(new Date(), 'yyyy-mm-dd hh:MM');
      
      // 校验选择的时间是否大于当前时间
      if (selectedTime > currentTime) {
        uni.$u.toast("报修时间不能大于当前时间");
        this.formModel.declareRepareTime = ""; // 清空值
      } else {
        this.formModel.declareRepareTime = selectedTime; // 设置为选择时间
      }
    },

    // 提交表单
    submit() {
      this.$refs.form.validate().then(res => {
        // 提交表单到后台
        save({...this.formModel}).then(res => {
          if (res.data.success) {
            uni.$u.toast('创建维修工单成功');
            setTimeout(() => {
              uni.navigateBack();
            }, 2000);
          } else {
            uni.$u.toast(`创建失败:${res.data.msg}`);
          }
        });
      });
    },

    // 清空表单数据
    clearFormField() {
      this.formModel.declareRepareTime = '';
    },

    // 自定义日期时间格式化
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`;
      }
      if (type === 'month') {
        return `${value}月`;
      }
      if (type === 'day') {
        return `${value}日`;
      }
      if (type === 'hour') {
        return `${value}时`;
      }
      if (type === 'minute') {
        return `${value}分`;
      }
      return value;
    }
  },
  // 页面初始化时执行
  onReady() {
    this.$refs.declareRepareTimePicker.setFormatter(this.formatter);
    this.formModel.declareRepareTime = this.$u.date(new Date(), 'yyyy-mm-dd hh:MM'); // 初始化为当前时间
  }
};
</script>

<style scoped>
.customButton {
  margin: 10rpx 40rpx 10rpx 40rpx;
  height: 80rpx;
  width: 200rpx;
}
</style>

基本的注意事项如下：

数据初始化：

formModel.declareRepareTime 初始化为当前时间，使用 $u.date() 方法格式化为 yyyy-mm-dd hh:MM 格式的时间字符串。
timeValue 默认设置为当前时间，并绑定到 u-datetime-picker 的 v-model 属性

方法：

declareRepareTimePickerConfirm: 当用户在时间选择器中确认选择时间时，首先检查选择的时间是否大于当前时间。如果是，则提示错误，并清空表单中的时间值；否则，更新表单中的 declareRepareTime 字段
submit: 在表单验证通过后，调用 save 方法将表单数据提交给后台，提交成功后，显示成功提示并返回上一页
clearFormField: 重置表单数据，清空报修时间字段
formatter: 自定义日期时间格式化函数，用于给年、月、日、时、分添加后缀（如“2024年12月01日”）
onReady：
在页面加载完成时，初始化时间选择器的格式化器，并确保 declareRepareTime 字段是当前时间