# DatePicker 日期选择器组件，用于根据指定日期范围创建日期滑动选择器。 > **说明：** > > 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 子组件 无 ## 接口 DatePicker(options?: DatePickerOptions) 根据指定范围的Date创建可以选择日期的滑动选择器。 **原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 **系统能力：** SystemCapability.ArkUI.ArkUI.Full **参数：** | 参数名 | 类型 | 必填 | 说明 | | ------- | ----------------------------------------------- | ---- | -------------------------- | | options | [DatePickerOptions](#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开始，该参数支持[$$](../../../quick-start/arkts-two-way-sync.md)双向绑定变量。 | **异常情形说明:** | 异常情形 | 对应结果 | | -------- | ------------------------------------------------------------ | | 起始日期晚于结束日期，选中日期未设置 | 起始日期、结束日期和选中日期都为默认值 | | 起始日期晚于结束日期，选中日期早于起始日期默认值 | 起始日期、结束日期都为默认值，选中日期为起始日期默认值 | | 起始日期晚于结束日期，选中日期晚于结束日期默认值 | 起始日期、结束日期都为默认值，选中日期为结束日期默认值 | | 起始日期晚于结束日期，选中日期在起始日期与结束日期默认值范围内 | 起始日期、结束日期都为默认值，选中日期为设置的值 | | 选中日期早于起始日期 | 选中日期为起始日期 | | 选中日期晚于结束日期 | 选中日期为结束日期 | | 起始日期晚于当前系统日期，选中日期未设置 | 选中日期为起始日期 | | 结束日期早于当前系统日期，选中日期未设置 | 选中日期为结束日期 | | 日期格式不符合规范，如‘1999-13-32’ | 取默认值 | | 起始日期或结束日期早于系统有效范围 | 起始日期或结束日期取起始日期默认值 | | 起始日期或结束日期晚于系统有效范围 | 起始日期或结束日期取结束日期默认值 | | 起始日期与结束日期同时早于系统有效范围 | 起始日期与结束日期取系统有效范围最早日期 | | 起始日期与结束日期同时晚于系统有效范围 | 起始日期与结束日期取系统有效范围最晚日期 | 系统日期范围：1900-1-31 ~ 2100-12-31 选中日期会在起始日期与结束日期异常处理完成后再进行异常情形判断处理 ## 属性 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： ### lunar lunar(value: boolean) 设置弹窗的日期是否显示农历。 **原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 **系统能力：** SystemCapability.ArkUI.ArkUI.Full **参数：** | 参数名 | 类型 | 必填 | 说明 | | ------ | ------- | ---- | ------------------------------------------------------------ | | value | boolean | 是 | 日期是否显示农历。
- true：展示农历。
- false：不展示农历。
默认值：false | ### disappearTextStyle10+ disappearTextStyle(value: PickerTextStyle) 设置所有选项中最上和最下两个选项的文本样式。 **原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 **系统能力：** SystemCapability.ArkUI.ArkUI.Full **参数：** | 参数名 | 类型 | 必填 | 说明 | | ------ | --------------------------------------------- | ---- | ------------------------------------------------------------ | | value | [PickerTextStyle](#pickertextstyle10类型说明) | 是 | 所有选项中最上和最下两个选项的文本颜色、字号、字体粗细。
默认值：
{
color: '#ff182431',
font: {
size: '14fp',
weight: FontWeight.Regular
}
} | ### textStyle10+ textStyle(value: PickerTextStyle) 设置所有选项中除了最上、最下及选中项以外的文本样式。 **原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 **系统能力：** SystemCapability.ArkUI.ArkUI.Full **参数：** | 参数名 | 类型 | 必填 | 说明 | | ------ | --------------------------------------------- | ---- | ------------------------------------------------------------ | | value | [PickerTextStyle](#pickertextstyle10类型说明) | 是 | 所有选项中除了最上、最下及选中项以外的文本颜色、字号、字体粗细。
默认值：
{
color: '#ff182431',
font: {
size: '16fp',
weight: FontWeight.Regular
}
} | ### selectedTextStyle10+ selectedTextStyle(value: PickerTextStyle) 设置选中项的文本样式。 **原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 **系统能力：** SystemCapability.ArkUI.ArkUI.Full **参数：** | 参数名 | 类型 | 必填 | 说明 | | ------ | --------------------------------------------- | ---- | ------------------------------------------------------------ | | value | [PickerTextStyle](#pickertextstyle10类型说明) | 是 | 选中项的文本颜色、字号、字体粗细。
默认值：
{
color: '#ff007dff',
font: {
size: '20vp',
weight: FontWeight.Medium
}
} | ## PickerTextStyle10+类型说明 **原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 参数名 | 参数类型 | 必填 | 参数描述 | | ----- | ---------------------------------------- | ---- | ------------------------- | | color | [ResourceColor](ts-types.md#resourcecolor) | 否 | 文本颜色。 | | font | [Font](ts-types.md#font) | 否 | 文本样式。 | ## 事件 除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件： ### onChange(deprecated) onChange(callback: (value: DatePickerResult) => void) 选择日期时触发该事件。 从API version 8 开始支持，从 API version 10 开始废弃，建议使用[onDateChange](#ondatechange10)。 **系统能力：** SystemCapability.ArkUI.ArkUI.Full **参数：** | 参数名 | 类型 | 必填 | 说明 | | ------ | --------------------------------------------- | ---- | ---------------- | | value | [DatePickerResult](#datepickerresult对象说明) | 是 | 返回选中的时间。 | ### onDateChange10+ onDateChange(callback: Callback\) 选择日期时触发该事件。 **原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 **系统能力：** SystemCapability.ArkUI.ArkUI.Full **参数：** | 参数名 | 类型 | 必填 | 说明 | | -------- | ----------------------------------------- | ---- | ------------------------------------------------------------ | | callback | [Callback](ts-types.md#callback12)\ | 是 | 返回选中的时间，年月日为选中的日期，时分取决于当前系统时间的时分，秒恒为00。 | ## DatePickerResult对象说明 **原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 **系统能力：** SystemCapability.ArkUI.ArkUI.Full | 名称 | 类型 | 只读 | 可选 | 说明 | | ----- | ------ | ---- | ---- | ------------------------------------------ | | year | number | 否 | 否 | 选中日期的年。 | | month | number | 否 | 否 | 选中日期的月(0~11)，0表示1月，11表示12月。 | | day | number | 否 | 否 | 选中日期的日。 | ## 示例 该示例实现了日期选择器组件，点击按钮可以切换公历农历。 ```ts // 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](figures/DatePickerApi10.gif)