如何使用 PickerView 实现日期选择功能？

Question

我在用 PickerView 组件做一个简单的日期选择器，想让用户可以选择年、月、日三个部分，但是不太清楚如何设置这三个选项的范围和格式。有没有朋友做过类似的功能，可以分享一个代码示例吗？

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

可以创建三个 PickerView 组件，分别用于选择年、月、日。

export default {
  data: {
    years: Array.from({ length: 21 }, (_, i) => 2000 + i),
    months: Array.from({ length: 12 }, (_, i) => i + 1),
    days: Array.from({ length: 31 }, (_, i) => i + 1),
    selectedYear: 2000,
    selectedMonth: 1,
    selectedDay: 1
  },
  updateYear(index) {
    this.selectedYear = this.years[index];
  },
  updateMonth(index) {
    this.selectedMonth = this.months[index];
  },
  updateDay(index) {
    this.selectedDay = this.days[index];
  }
}

<PickerView range="{{years}}" selected="{{0}}" onChange="updateYear"></PickerView>
<PickerView range="{{months}}" selected="{{0}}" onChange="updateMonth"></PickerView>
<PickerView range="{{days}}" selected="{{0}}" onChange="updateDay"></PickerView>

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。