鸿蒙界面开发——组件（10）：CalendarPicker&DatePicker&TextPicker（实现三级下拉列表）&TimePicker

CalendarPicker

日历选择器组件，提供下拉日历弹窗，可以让用户选择日期。

CalendarPicker({ hintRadius: 10, selected: this.selectedDate })
     .edgeAlign(CalendarAlign.END)
     .textStyle({ color: "#ff182431", font: { size: 20, weight: FontWeight.Normal } })
     .margin(10)
     .onChange((value) => {
       console.info("CalendarPicker onChange:" + JSON.stringify(value))
     })

接口
CalendarPicker(options?: CalendarOptions)
CalendarOptions对象说明
	hintRadius	number | Resource	否	描述日期选中态底板样式。默认值：底板样式为圆形。说明：hintRadius为0，底板样式为直角矩形。hintRadius为0 ~ 16，底板样式为圆角矩形。hintRadius>=16，底板样式为圆形
	selected	Date	否	设置选中项的日期。选中的日期未设置或日期格式不符合规范则为默认值。默认值：当前系统日期。

属性

除支持通用属性外，还支持以下属性：

1. edgeAlign(alignType: CalendarAlign, offset?: Offset) 设置选择器与入口组件的对齐方式。
2. textStyle(value: PickerTextStyle)入口区的文本颜色、字号、字体粗细。
   事件
   除支持通用事件，还支持以下事件：

onChange(callback: (value: Date) => void)选择日期时触发该事件。

DatePicker

日期选择器组件，用于根据指定日期范围创建日期滑动选择器。

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('select current date is: ' + value.toString())
   })

接口
DatePicker(options?: DatePickerOptions)
DatePickerOptions对象说明
	start	Date	否	指定选择器的起始日期。默认值：Date('1970-1-1')
	end	Date	否	指定选择器的结束日期。默认值：Date('2100-12-31')
	selected	Date	否	设置选中项的日期。默认值：当前系统日期从API version 10开始，该参数支持$$双向绑定变量。

系统日期范围：1900-1-31 ~ 2100-12-31。选中日期会在起始日期与结束日期异常处理完成后再进行异常情形判断处理
属性

除支持通用属性外，还支持以下属性：

1. lunar(value: boolean)设置弹窗的日期是否显示农历。
2. disappearTextStyle(value: PickerTextStyle)设置所有选项中最上和最下两个选项的文本样式。
3. textStyle(value: PickerTextStyle)设置所有选项中除了最上、最下及选中项以外的文本样式。
4. selectedTextStyle(value: PickerTextStyle)设置选中项的文本样式。
   PickerTextStyle10+类型说明
   color ResourceColor 否 文本颜色。
   font Font 否 文本样式，picker只支持字号、字体粗细的设置。

事件

除支持通用事件外，还支持以下事件：

onChange(callback: (value: DatePickerResult) => void)选择日期时触发该事件。
DatePickerResult对象说明：year-month-day 选中日期的月(0~11)，0表示1月，11表示12月。
onDateChange(callback: (value: Date) => void)选择日期时触发该事件。

TextPicker【示例三级下拉列表】

滑动选择文本内容的组件。

接口
TextPicker(options?: TextPickerOptions)根据range指定的选择范围创建文本选择器。

TextPickerOptions对象说明

range string[] | string[] []10+ | Resource | TextPickerRangeContent[]10+ | TextCascadePickerRangeContent[]10+

是 选择器的数据选择列表。不可设置为空数组，若设置为空数组，则不显示；若动态变化为空数组，则保持当前正常值显示。

说明：单列数据选择器使用string[]，Resource，TextPickerRangeContent[]类型。

多列数据选择器使用string[][]类型。

多列联动数据选择器使用TextCascadePickerRangeContent[]类型。

Resource类型只支持strarray.json。

range的类型及列数不可以动态修改。

selected number | number[]10+ 否 设置默认选中项在数组中的索引值。默认值：0说明：单列数据选择器使用number类型。多列、多列联动数据选择器使用number[]类型。从API version 10开始，该参数支持$$双向绑定变量。

value string | string[]10+ 否 设置默认选中项的值，优先级低于selected。默认值：第一个元素值说明：只有显示文本列表时该值有效。显示图片或图片加文本的列表时，该值无效。单列数据选择器使用string类型。多列、多列联动数据选择器使用string[]类型。从API version 10开始，该参数支持$$双向绑定变量。

TextPickerRangeContent对象说明 ：

icon string | Resource 是 图片资源。

text string | Resource 否 文本信息。

TextCascadePickerRangeContent对象说明

text string | Resource 是 文本信息。

children TextCascadePickerRangeContent[] 否 联动数据。

属性

1. defaultPickerItemHeight(value: number | string) 设置Picker各选择项的高度。
2. disappearTextStyle
3. textStyle
4. selectedTextStyle
5. selectedIndex(value: number | number[]) 设置默认选中项在数组中的索引值，优先级高于options中的选中值。单列数据选择器使用number类型。多列、多列联动数据选择器使用number[]类型。
6. canLoop(value: boolean) 设置是否可循环滚动。
7. divider(value: DividerOptions | null) 设置分割线样式，不设置该属性则按"默认值"展示分割线。startMargin + endMargin 超过组件宽度后startMargin和endMargin会被置0。
8. gradientHeight(value: Dimension) 设置渐隐效果高度，不设置该属性则显示默认渐隐效果。内容区上下边缘的渐隐高度（支持百分比，100%为TextPicker高度的一半即最大值），设置为0时不显示渐隐效果，负数等非法值显示默认渐隐效果。默认值为36vp。

DividerOptions对象说明

strokeWidth Dimension 否 分割线的线宽（默认单位vp），也可指定单位为px，不支持"百分比"类型。

startMargin Dimension 否 分割线与TextPicker侧边起始端的距离（默认单位vp），也可指定单位为px，不支持"百分比"类型。

endMargin Dimension 否 分割线与TextPicker侧边结束端的距离（默认单位vp），也可指定单位为px，不支持"百分比"类型。

color ResourceColor 否 分割线的颜色。

事件

除支持通用事件外，还支持以下事件：

onAccept(callback: (value: string, index: number) => void)点击弹窗中的"确定"按钮时触发该回调。该事件仅在文本滑动选择器弹窗中生效。
onChange(callback: (value: string | string[], index: number | number[]) => void)滑动选中TextPicker文本内容后，触发该回调。当显示文本或图片加文本列表时，value值为选中项中的文本值，当显示图片列表时，value值为空。

 private cascade: TextCascadePickerRangeContent[] = [
    {
      text: '辽宁省',
      children: [{ text: '沈阳市', children: [{ text: '沈河区' }, { text: '和平区' }, { text: '浑南区' }] },
        { text: '大连市', children: [{ text: '中山区' }, { text: '金州区' }, { text: '长海县' }] }]
    },
    {
      text: '吉林省',
      children: [{ text: '长春市', children: [{ text: '南关区' }, { text: '宽城区' }, { text: '朝阳区' }] },
        { text: '四平市', children: [{ text: '铁西区' }, { text: '铁东区' }, { text: '梨树县' }] }]
    },
    {
      text: '黑龙江省',
      children: [{ text: '哈尔滨市', children: [{ text: '道里区' }, { text: '道外区' }, { text: '南岗区' }] },
        { text: '牡丹江市', children: [{ text: '东安区' }, { text: '西安区' }, { text: '爱民区' }] }]
    }
  ]



TextPicker({ range: this.cascade })
     .onChange((value: string | string[], index: number | number[]) => {
       console.info('TextPicker 多列联动:onChange ' + JSON.stringify(value) + ', ' + 'index: ' + JSON.stringify(index))
     })

TimePicker

时间选择组件，根据指定参数创建选择器，支持选择小时及分钟。

接口
TimePicker(options?: TimePickerOptions)

TimePickerOptions对象说明
selected	Date	否	设置选中项的时间。默认值：当前系统时间从API version 10开始，该参数支持$$双向绑定变量。
format	TimePickerFormat	否	指定需要显示的TimePicker的格式。默认值：TimePickerFormat.HOUR_MINUTE

TimePickerFormat11+枚举说明
HOUR_MINUTE	按照小时和分显示。
HOUR_MINUTE_SECOND	按照小时、分钟和秒显示。

属性

1. useMilitaryTime(value: boolean) 设置展示时间是否为24小时制。当展示时间为12小时制时，上下午与小时无联动关系。
2. disappearTextStyle10+
3. textStyle10+
4. selectedTextStyle10+
5. loop11+
6. dateTimeOptions(value: DateTimeOptions) 设置时分秒是否显示前置0。目前只支持设置hour、minute和second参数。
   默认值：
   hour: 24小时制默认为"2-digit"，即有前置0；12小时制默认为"numeric"，即没有前置0。
   minute: 默认为"2-digit"，即有前置0。
   second: 默认为"2-digit"，即有前置0。
7. enableHapticFeedback12+是否支持触控反馈。默认值：true，true表示开启触控反馈，false表示不开启触控反馈。设置为true后是否生效，还取决于系统的硬件是否支持。

事件

除支持通用事件外，还支持以下事件：

onChange(callback: (value: TimePickerResult ) => void)选择时间时触发该事件。

TimePickerResult对象说明：返回值为24小时制时间。
hour	number	否	否	选中时间的时。取值范围：[0-23]
minute	number	否	否	选中时间的分。取值范围：[0-59]
second11+	number	否	否	选中时间的秒。取值范围：[0-59]

@State isMilitaryTime: boolean = false
private selectedTime: Date = new Date('2022-07-22T08:00:00')


TimePicker({
      selected: this.selectedTime,
    })
      .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))
        }
      })
      .disappearTextStyle({color: Color.Red, 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}})