uni-app picker组件mode=date时不能根据value传值选中日期

uni-app picker组件mode=date时不能根据value传值选中日期

开发环境 版本号 项目创建方式
Windows Windows 10 家庭中文版 版本号22H2 HBuilderX
HBuilderX 4.08

操作步骤：

<picker mode="date" :value="currentDate" fields="month" @change="bindDateChange">  
    <text class="head-month">{{currentDate}}</text>  
</picker>  

const currentDate = ref('2024-04-01')

预期结果：

根据value传值自动选中当前日期，没有点击完成关闭之后再次打开应该是选中的value的值

实际结果：

不能根据value传值选中日期，且滑动之后点击取消或者上方空白处关闭之后再次打开还是滑动之后的数据

bug描述：

如题，picker组件mode=date fields=month时不能根据value传值选中日期，且滑动之后点击取消或者上方空白处关闭之后再次打开还是滑动之后的数据，希望能优化一下变成可以根据value传值自动选中当前日期，没有点击完成关闭之后再次打开应该是选中的value的值


更多关于uni-app picker组件mode=date时不能根据value传值选中日期的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app picker组件mode=date时不能根据value传值选中日期的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 Uni-app 中使用 picker 组件并设置 mode="date" 时，value 属性用于设置默认选中的日期。如果你发现 value 无法正确设置选中日期，可能是以下原因导致的：

1. value 的格式不正确

  • picker 组件在 mode="date" 时，value 的格式必须是 YYYY-MM-DD 的字符串。
  • 如果格式不正确，picker 可能无法正确解析日期。

示例：

<picker mode="date" :value="selectedDate">
  <view>选择日期: {{ selectedDate }}</view>
</picker>

export default {
  data() {
    return {
      selectedDate: '2023-10-01' // 必须是 YYYY-MM-DD 格式
    };
  }
};

2. value 是动态绑定的，但未正确更新

  • 如果 value 是动态绑定的，确保在数据更新时，picker 组件能够正确接收到新的值。
  • 你可以通过 watch 监听 value 的变化，确保数据更新时 picker 也同步更新。

示例：

export default {
  data() {
    return {
      selectedDate: '2023-10-01'
    };
  },
  watch: {
    selectedDate(newVal) {
      console.log('日期更新为:', newVal);
    }
  }
};

3. picker 的 change 事件未正确处理

  • 如果你在 picker 的 change 事件中手动更新了 value，确保更新后的值仍然是 YYYY-MM-DD 格式。

示例：

<picker mode="date" :value="selectedDate" [@change](/user/change)="onDateChange">
  <view>选择日期: {{ selectedDate }}</view>
</picker>

export default {
  data() {
    return {
      selectedDate: '2023-10-01'
    };
  },
  methods: {
    onDateChange(e) {
      this.selectedDate = e.detail.value; // 确保 e.detail.value 是 YYYY-MM-DD 格式
    }
  }
};
回到顶部