探索ArkTS中的日期和时间选择器组件

“本文正在参加华为鸿蒙有奖征文征文活动”

ArkTS，作为鸿蒙应用开发框架中的一部分，为开发者提供了丰富的UI组件，用于构建高质量的用户界面。在这篇文章中，我们将解析两个ArkTS组件：DatePicker（日期选择器）和TimePicker（时间选择器）（api 11开始支持），并展示如何在应用中实现它们的功能。

日期选择器（DatePicker）

DatePicker组件允许用户从预定义的日期范围内选择一个日期。这个组件非常适合需要用户输入日期的场景，如日程安排、生日提醒等。

功能特点：

日期范围：通过设置start和end属性，可以指定用户可以选择的日期范围。

默认日期：selected属性允许你设置默认选中的日期。

// 实例化
private selectedDate: Date = new Date('2021-08-08')
​
//日期选择器组件
DatePicker({
        //指定选择器起始日期
        start: new Date('1970-1-1'),
        //指定选择器结束日期
        end: new Date('2100-1-1'),
        //指定默认日期     可$$双向绑定
        selected: this.selectedDate
      })//

农历显示：通过lunar属性，可以选择是否显示农历日期。

  //状态变量
    @State isLunar: boolean = false
  //按钮
  Button('切换公历农历')
        .margin({ top: 30, bottom: 30 })
        //点击事件
        .onClick(() => {
        //取反
          this.isLunar = !this.isLunar
        })
        
        //代码
          //是否显示农历
        .lunar(this.isLunar)//通过改变布尔值，更换状态

样式定制：disappearTextStyle、textStyle和selectedTextStyle属性允许你自定义文本样式，包括颜色、字体大小和字体粗细。

 //选择器边缘文本样式
        .disappearTextStyle({ 
        color: Color.Gray, 
        font: { size: '16fp', 
               weight: FontWeight.Bold
               }
          })

```
   //选择器未选中且不在边缘的文本样式
        .textStyle({ 
        color: '#ff182431', 
        font: { size: '18fp', 
                weight: FontWeight.Normal 
               }
           })
```
![]()

```
 //选择器 选中文本样式
        .selectedTextStyle({
            color: '#ff0000FF', 
            font: { size: '26fp', 
                   weight: FontWeight.Regular 
                   } 
                 })
```

事件监听：onDateChange事件在日期选择改变时触发，允许你执行一些操作，如更新UI或发送数据。

  //选择日期时触发该事件
        .onDateChange((value: Date) => {
          this.selectedDate = value
          console.info('选择当前日期为: ' + value.toString())
        })

实现示例：

在DatePickerExample组件中，我们实现了一个可以切换公历和农历显示的日期选择器。用户点击“切换公历农历”按钮时，isLunar状态会反转，从而改变日期选择器的显示模式。同时，我们监听onDateChange事件来更新选中的日期，并在控制台打印选中的日期。

完整案例

// xxx.ets
@Entry
@Component
struct DatePickerExample {
  @State isLunar: boolean = false
  private selectedDate: Date = new Date('2021-08-08')
​
  build() {
    Column() {
      Button('切换公历农历')
        .margin({ top: 30, bottom: 30 })
        .onClick(() => {
          this.isLunar = !this.isLunar
        })
      //日期选择器组件
      DatePicker({
        //指定选择器起始日期
        start: new Date('1970-1-1'),
        //指定选择器结束日期
        end: new Date('2100-1-1'),
        //指定默认日期     可$$双向绑定
        selected: this.selectedDate
      })//
        //选择器边缘文本样式
        .disappearTextStyle({ color: Color.Gray, font: { size: '16fp', weight: FontWeight.Bold } })//
          //选择器未选中且不在边缘的文本样式
        .textStyle({ color: '#ff182431', font: { size: '18fp', weight: FontWeight.Normal } })//
          //选择器 选中文本样式
        .selectedTextStyle({ color: '#ff0000FF', font: { size: '26fp', weight: FontWeight.Regular } })//
          //是否显示农历
        .lunar(this.isLunar)//
          //选择日期时触发该事件
        .onDateChange((value: Date) => {
          this.selectedDate = value
          console.info('选择当前日期为: ' + value.toString())
        })
    }.width('100%')
  }
}
​

时间选择器（TimePicker）

TimePicker组件允许用户从预定义的时间范围内选择一个时间。这对于需要精确到小时和分钟（甚至秒）的场景非常有用，如会议安排、闹钟设置等。

功能特点：

时间格式：通过format属性，可以设置时间显示的格式，如仅显示小时和分钟，或包含秒。默认时间：selected属性允许你设置默认选中的时间。时间制：useMilitaryTime属性允许你选择是否使用24小时制。循环模式：loop属性决定滚动时间时是否循环显示。样式定制：与时间选择器文本相关的样式同样可以通过disappearTextStyle、textStyle和selectedTextStyle属性进行定制。事件监听：onChange事件在时间选择改变时触发，允许你执行一些操作，如更新UI或发送数据。

实现示例：

在TimePickerExample组件中，我们实现了一个可以切换12小时制和24小时制的时间选择器。用户点击“切换12小时制/24小时制”按钮时，isMilitaryTime状态会反转，从而改变时间选择器的显示模式。同时，我们监听onChange事件来更新选中的时间，并在控制台打印选中的时间对象（通过JSON.stringify转换为字符串形式）。

完整案例

​
//时间选择器
// xxx.ets
@Component
struct TimePickerExample {
  @State isMilitaryTime: boolean = false
  private selectedTime: Date = new Date('2022-07-22T08:00:00')
​
  build() {
    Column() {
      Button('切换12小时制/24小时制')
        .margin(30)
        .onClick(() => {
          this.isMilitaryTime = !this.isMilitaryTime
        })
      //时间选择组件
      TimePicker({
        //显示秒    默认显示时分
        format: TimePickerFormat.HOUR_MINUTE_SECOND,
        //默认指定时间
        selected: this.selectedTime,
      })//
        //设置时分秒前面是否显示0   12小时制 时默认为numeric即不显示0，，24小时制默认显示
        .dateTimeOptions({})//
          //是否启用循环模式
        .loop(true)//
          // 改变显示时制  false 12小时制  true 24小时制
        .useMilitaryTime(this.isMilitaryTime)
        .onChange((value: TimePickerResult) => {
          if (value.hour >= 0) {
            this.selectedTime.setHours(value.hour, value.minute)
            console.info('select current date is: ' + JSON.stringify(value)) //JSON.stringify(value)  转化为字符串形式
          }
        })//
          //边缘文本样式
        .disappearTextStyle({ color: '#ff182431', font: { size: 15, weight: FontWeight.Lighter } })
         //选择器未选中且不在边缘的文本样式
        .textStyle({ color: Color.Black, font: { size: 20, weight: FontWeight.Normal } })//
          //选中文本样式
        .selectedTextStyle({ color: Color.Blue, font: { size: 30, weight: FontWeight.Bolder } })
    }.width('100%')
  }
}

#### 总结

通过ArkTS的DatePicker和TimePicker组件，开发者可以轻松地实现日期和时间的选择功能，并通过丰富的样式定制和事件监听来满足不同的需求。无论是需要用户输入日程安排的日期，还是设置闹钟的具体时间，这些组件都能提供便捷和灵活的解决方案。希望这篇文章能帮助你更好地理解和使用ArkTS中的日期和时间选择器组件。

注：代码源自华为开发者文档，想获得更详细的信息 请前往