1.3基本组件ArkTS-TextPicker、TimePicker、DatePicker

一.学习目标：

1.学习TextPicker、TimePicker和DatePicker三个组件的基本使用方法；

2.了解弹性布局Flex与行布局Row的混合使用；

3.了解数组的创建和使用；

4.了解@State与private变量类型的使用范围。

二.任务：

实现TextPicker、TimePicker和DatePicker选择数据的Text显示。

三.实现过程：

1.创建HelloWorld工程见：

使用ArkTS语言开发（Stage模型）-快速入门-入门-HarmonyOS应用开发

https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/start-with-ets-stage-0000001380281110-V3

2.修改Index.ets代码如下：

@Entry
@Component
struct BasicControl {
  @State partitionIndex: number = 1
  private partitions: string[] = ['上午', '下午'] // 时段
  @State str: string = '将显示你选择的结果'
  private selectedTime: Date = new Date('2023-01-01T08:00:00')
  private selectedDate: Date = new Date('2023-01-01')
  build() {
    Flex({direction:FlexDirection.Column }){
      Text(this.str).fontSize(30).fontColor('#006400').height('15%')
      Row() {
        // 上午下午
        TextPicker({ range: this.partitions, selected: this.partitionIndex })
          .width('20%')
          .onChange((value: string, index: number) => {
            this.str = "选择的值为：" + value
            this.partitionIndex = index
          })
        // 时间选择
        TimePicker({selected: this.selectedTime})
          .useMilitaryTime(true)
          .onChange((date: TimePickerResult) => {
            this.selectedTime.setHours(date.hour, date.minute)
            this.str = "选择的值为：" + JSON.stringify(date) //JSON数据转字符串
          }).width('35%')
        // 日期选择
        DatePicker({
          start: new Date('2000-1-1'),
          end: new Date('2100-1-1'),
          selected: this.selectedDate,
        })
          .lunar(false) //公历、true为农历
          .onChange((value: DatePickerResult) => {
            this.selectedDate.setFullYear(value.year, value.month, value.day)
            this.str = "选择的值为：" + value.year + value.month + value.day //解析出数据
          }).width('45%')
      }.width('100%').height('100%')
      .backgroundColor('#E2E2E2')
      .borderRadius(10)
    }.width('100%').height('100%')
  }
}