uni-app中uni-datetime-picker组件数据回显问题

发布于 1周前 作者 yibo5220 来自 Uni-App

uni-app中uni-datetime-picker组件数据回显问题

产品分类：

uniapp/App

PC开发环境操作系统：

Windows

PC开发环境操作系统版本号：

19041.450

HBuilderX类型：

正式

HBuilderX版本号：

4.15

手机系统：

Android

手机系统版本号：

Android 12

手机厂商：

华为

手机机型：

华为meta40

页面类型：

vue

vue版本：

vue2

打包方式：

云端

项目创建方式：

HBuilderX

示例代码：

<uni-datetime-picker  
    :class="modelValue !== '' ? '' : 'uni-date__x-input-placeholder'"  
    v-model="modelValue"  
    :border="false"  
    :placeholder="placeholder"  
    :disabled="disabled"  
    @blur="upwardFormChange(eventName, modelValue)"  
    @change="upwardFormChange(eventName, modelValue)"  
    :clear-icon="clearable"  
    type="datetime"  
    :hide-second="true"  
>
</uni-datetime-picker>

操作步骤：

  • 点击日期组件在点击确定

预期结果：

<uni-datetime-picker  
    :class="modelValue !== '' ? '' : 'uni-date__x-input-placeholder'"  
    v-model="modelValue"  
    :border="false"  
    :placeholder="placeholder"  
    :disabled="disabled"  
    @blur="upwardFormChange(eventName, modelValue)"  
    @change="upwardFormChange(eventName, modelValue)"  
    :clear-icon="clearable"  
    type="datetime"  
    :hide-second="true"  
>
</uni-datetime-picker>

实际结果：

<uni-datetime-picker  
    :class="modelValue !== '' ? '' : 'uni-date__x-input-placeholder'"  
    v-model="modelValue"  
    :border="false"  
    :placeholder="placeholder"  
    :disabled="disabled"  
    @blur="upwardFormChange(eventName, modelValue)"  
    @change="upwardFormChange(eventName, modelValue)"  
    :clear-icon="clearable"  
    type="datetime"  
    :hide-second="true"  
>
</uni-datetime-picker>

bug描述：

uni-datetime-picker type设置成datetime，自己选择完不能回显时分秒，后端返回的的就能正常回显

Image Image


Harmonyos Next教程
4 回复

你好，我看你那里有upwardFormChange，这个会有影响吗？
再看你上面有一个显示时间的地方
再有可能你看一下是不是因为宽度太短，导致没有完全加载出来。


:hide-second=“true” 现在只有把这个参数加上才会显示，就是不显示秒

目前是这样解决的，自己通过插槽取出来，自己来做转换

在uni-app中，uni-datetime-picker组件用于选择日期和时间，是一个非常常用的UI组件。在处理数据回显（即将之前选择的日期或时间显示在组件中）时，通常我们会结合组件的v-model属性和相关的事件处理来实现。

以下是一个关于如何在uni-app中使用uni-datetime-picker组件并实现数据回显的代码示例：

<template>
  <view>
    <!-- 绑定v-model到selectedDate变量 -->
    <uni-datetime-picker
      type="datetime"
      :value="selectedDate"
      @change="onDateChange"
    ></uni-datetime-picker>
    <view>
      <text>选中的日期时间: {{ formatDate(selectedDate) }}</text>
    </view>
    <!-- 假设有一个按钮用于模拟从服务器获取数据并回显 -->
    <button @click="simulateDataFetch">模拟数据获取并回显</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 初始化为空，或者可以设置为一个默认日期时间
      selectedDate: ''
    };
  },
  methods: {
    onDateChange(event) {
      // 当日期或时间改变时，更新selectedDate
      this.selectedDate = event.detail.value;
    },
    formatDate(date) {
      // 格式化日期时间显示
      const dateObj = new Date(date);
      const year = dateObj.getFullYear();
      const month = (dateObj.getMonth() + 1).toString().padStart(2, '0');
      const day = dateObj.getDate().toString().padStart(2, '0');
      const hours = dateObj.getHours().toString().padStart(2, '0');
      const minutes = dateObj.getMinutes().toString().padStart(2, '0');
      const seconds = dateObj.getSeconds().toString().padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    simulateDataFetch() {
      // 模拟从服务器获取数据
      const fetchedDate = '2023-10-05T14:30:00';
      // 更新selectedDate以实现数据回显
      this.selectedDate = fetchedDate;
    }
  }
};
</script>

<style scoped>
/* 添加一些简单的样式 */
button {
  margin-top: 20px;
}
</style>

在这个示例中，selectedDate变量用于存储选中的日期时间，并通过v-model绑定到uni-datetime-picker组件。onDateChange方法会在日期或时间改变时被触发，并更新selectedDate的值。simulateDataFetch方法模拟从服务器获取数据并更新selectedDate，从而实现数据回显。formatDate方法用于格式化日期时间的显示格式。

回到顶部