DatePicker-按钮与选择-ArkTS组件-ArkUI（方舟UI框架）-应用框架

子组件

无

接口

DatePicker(options?: DatePickerOptions)

根据指定范围的Date创建可以选择日期的滑动选择器。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开

参数名	类型	必填	说明
options	DatePickerOptions	否	配置日期选择器组件的参数。

DatePickerOptions对象说明

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

展开

名称	类型	必填	说明
start	Date	否	指定选择器的起始日期。默认值：Date('1970-1-1')
end	Date	否	指定选择器的结束日期。默认值：Date('2100-12-31')
selected	Date	否	设置选中项的日期。默认值：当前系统日期从API version 10开始，该参数支持$$双向绑定变量。

名称

类型

必填

说明

start

Date

否

指定选择器的起始日期。

默认值：Date('1970-1-1')

end

Date

否

指定选择器的结束日期。

默认值：Date('2100-12-31')

selected

Date

否

设置选中项的日期。

默认值：当前系统日期

从API version 10开始，该参数支持$$双向绑定变量。

异常情形说明:

展开

异常情形	对应结果
起始日期晚于结束日期，选中日期未设置	起始日期、结束日期和选中日期都为默认值
起始日期晚于结束日期，选中日期早于起始日期默认值	起始日期、结束日期都为默认值，选中日期为起始日期默认值
起始日期晚于结束日期，选中日期晚于结束日期默认值	起始日期、结束日期都为默认值，选中日期为结束日期默认值
起始日期晚于结束日期，选中日期在起始日期与结束日期默认值范围内	起始日期、结束日期都为默认值，选中日期为设置的值
选中日期早于起始日期	选中日期为起始日期
选中日期晚于结束日期	选中日期为结束日期
起始日期晚于当前系统日期，选中日期未设置	选中日期为起始日期
结束日期早于当前系统日期，选中日期未设置	选中日期为结束日期
日期格式不符合规范，如‘1999-13-32’	取默认值
起始日期或结束日期早于系统有效范围	起始日期或结束日期取起始日期默认值
起始日期或结束日期晚于系统有效范围	起始日期或结束日期取结束日期默认值
起始日期与结束日期同时早于系统有效范围	起始日期与结束日期取系统有效范围最早日期
起始日期与结束日期同时晚于系统有效范围	起始日期与结束日期取系统有效范围最晚日期

系统日期范围：1900-1-31 ~ 2100-12-31

选中日期会在起始日期与结束日期异常处理完成后再进行异常情形判断处理

属性

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

lunar

lunar(value: boolean)

设置弹窗的日期是否显示农历。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开

参数名	类型	必填	说明
value	boolean	是	日期是否显示农历。 - true：展示农历。 - false：不展示农历。默认值：false

参数名

类型

必填

说明

value

boolean

是

日期是否显示农历。

- true：展示农历。

- false：不展示农历。

默认值：false

disappearTextStyle¹⁰⁺

disappearTextStyle(value: PickerTextStyle)

设置所有选项中最上和最下两个选项的文本样式。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开

参数名	类型	必填	说明
value	PickerTextStyle	是	所有选项中最上和最下两个选项的文本颜色、字号、字体粗细。默认值： { color: '#ff182431', font: { size: '14fp', weight: FontWeight.Regular } }

参数名

类型

必填

说明

value

PickerTextStyle

是

所有选项中最上和最下两个选项的文本颜色、字号、字体粗细。

默认值：

{

color: '#ff182431',

font: {

size: '14fp',

weight: FontWeight.Regular

}

textStyle¹⁰⁺

textStyle(value: PickerTextStyle)

设置所有选项中除了最上、最下及选中项以外的文本样式。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开

参数名	类型	必填	说明
value	PickerTextStyle	是	所有选项中除了最上、最下及选中项以外的文本颜色、字号、字体粗细。默认值： { color: '#ff182431', font: { size: '16fp', weight: FontWeight.Regular } }

参数名

类型

必填

说明

value

PickerTextStyle

是

所有选项中除了最上、最下及选中项以外的文本颜色、字号、字体粗细。

默认值：

{

color: '#ff182431',

font: {

size: '16fp',

weight: FontWeight.Regular

}

selectedTextStyle¹⁰⁺

selectedTextStyle(value: PickerTextStyle)

设置选中项的文本样式。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开

参数名	类型	必填	说明
value	PickerTextStyle	是	选中项的文本颜色、字号、字体粗细。默认值： { color: '#ff007dff', font: { size: '20vp', weight: FontWeight.Medium } }

参数名

类型

必填

说明

value

PickerTextStyle

是

选中项的文本颜色、字号、字体粗细。

默认值：

{

color: '#ff007dff',

font: {

size: '20vp',

weight: FontWeight.Medium

}

PickerTextStyle¹⁰⁺类型说明

元服务API： 从API version 11开始，该接口支持在元服务中使用。

展开

参数名	参数类型	必填	参数描述
color	ResourceColor	否	文本颜色。
font	Font	否	文本样式。

事件

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

onChange^(deprecated)

onChange(callback: (value: DatePickerResult) => void)

选择日期时触发该事件。

从API version 8 开始支持，从 API version 10 开始废弃，建议使用onDateChange。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开

参数名	类型	必填	说明
value	DatePickerResult	是	返回选中的时间。

onDateChange¹⁰⁺

onDateChange(callback: (value: Date) => void)

选择日期时触发该事件。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开

参数名	类型	必填	说明
value	Date	是	返回选中的时间，年月日为选中的日期，时分取决于当前系统时间的时分，秒恒为00。

DatePickerResult对象说明

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

展开

名称	类型	只读	可选	说明
year	number	否	否	选中日期的年。
month	number	否	否	选中日期的月(0~11)，0表示1月，11表示12月。
day	number	否	否	选中日期的日。

示例

该示例实现了日期选择器组件，点击按钮可以切换公历农历。

收起
自动换行
深色代码主题
复制
// 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, family: "HarmonyOS Sans", style: FontStyle.Normal}})
        .lunar(this.isLunar)
        .onDateChange((value: Date) => {
          this.selectedDate = value
          console.info('select current date is: ' + value.toString())
        })

    }.width('100%')
  }
}

DatePicker

子组件

接口

DatePickerOptions对象说明

属性

lunar

disappearTextStyle10+

textStyle10+

selectedTextStyle10+

PickerTextStyle10+类型说明

事件

onChange(deprecated)

onDateChange10+

DatePickerResult对象说明

示例

disappearTextStyle¹⁰⁺

textStyle¹⁰⁺

selectedTextStyle¹⁰⁺

PickerTextStyle¹⁰⁺类型说明

onChange^(deprecated)

onDateChange¹⁰⁺