1、概 述
ArkUI提供了showDatePickerDialog接口,让我们可以方便的实现指定日期选择弹窗,其中日期选择支持农历模式,效果如下:
2、showDatePickerDialog
日期滑动选择器弹窗通过UIContext中的showDatePickerDialog接口实现。接口定义如下:
// 定义日期滑动选择器弹窗并弹出。
showDatePickerDialog(options: DatePickerDialogOptions): void
DatePickerDialogOptions是配置参数,定义如下:
名称 |
类型 |
说明 |
lunar |
boolean |
日期是否显示为农历,true表示显示农历,false表示不显示农历。默认值:false |
showTime |
boolean |
是否展示时间项,true表示显示时间,false表示不显示时间。默认值:false |
useMilitaryTime |
boolean |
展示时间是否为24小时制,true表示显示24小时制,false表示显示12小时制。默认值:false 说明:当展示时间为12小时制时,上下午与小时无联动关系。 |
lunarSwitch |
boolean |
是否展示切换农历的开关,true表示展示开关,false表示不展示开关。默认值:false |
disappearTextStyle |
PickerTextStyle |
设置所有选项中最上和最下两个选项的文本颜色、字号、字体粗细。 默认值:{color: '#ff182431',font: {size: '14fp',weight: FontWeight.Regular}} |
textStyle |
PickerTextStyle |
设置所有选项中除了最上、最下及选中项以外的文本颜色、字号、字体粗细。默认值:{color: '#ff182431',font: {size: '16fp',weight: FontWeight.Regular}} |
selectedTextStyle |
PickerTextStyle |
设置选中项的文本颜色、字号、字体粗细。默认值:{color: '#ff007dff',font: {size: '20vp',weight: FontWeight.Medium}} |
acceptButtonStyle |
PickerDialogButtonStyle |
设置确认按钮显示样式、样式和重要程度、角色、背景色、圆角、文本颜色、字号、字体粗细、字体样式、字体列表、按钮是否默认响应Enter键。 说明:acceptButtonStyle与cancelButtonStyle中最多只能有一个primary字段配置为true,二者primary字段均配置为true时均不生效。 |
cancelButtonStyle |
PickerDialogButtonStyle |
设置取消按钮显示样式、样式和重要程度、角色、背景色、圆角、文本颜色、字号、字体粗细、字体样式、字体列表、按钮是否默认响应Enter键。 说明:acceptButtonStyle与cancelButtonStyle中最多只能有一个primary字段配置为true,二者primary字段均配置为true时均不生效。 |
alignment |
DialogAlignment |
弹窗在竖直方向上的对齐方式。默认值:DialogAlignment.Default |
offset |
Offset |
弹窗相对alignment所在位置的偏移量。默认值:{ dx: 0 , dy: 0 } |
maskRect |
Rectangle |
弹窗遮蔽层区域,在遮蔽层区域内的事件不透传,在遮蔽层区域外的事件透传。默认值:{ x: 0, y: 0, width: '100%', height: '100%' } |
onAccept(deprecated) |
(value: DatePickerResult) => void |
点击弹窗中的“确定”按钮时触发该回调。 |
onCancel |
() => void |
点击弹窗中的“取消”按钮时触发该回调。 |
onDateAccept |
(value: Date) => void |
点击弹窗中的“确定”按钮时触发该回调。 说明:当showTime设置为true时,回调接口返回值value中时和分为选择器选择的时和分。否则,返回值value中时和分为系统时间的时和分。 |
onDateChange |
(value: Date) => void |
滑动弹窗中的滑动选择器使当前选中项改变时触发该回调。 说明:当showTime设置为true时,回调接口返回值value中时和分为选择器选择的时和分。否则,返回值value中时和分为系统时间的时和分。 |
backgroundColor |
ResourceColor |
弹窗背板颜色。默认值:Color.Transparent说明:当设置了backgroundColor为非透明色时,backgroundBlurStyle需要设置为BlurStyle.NONE,否则颜色显示将不符合预期效果。 |
backgroundBlurStyle |
BlurStyle |
弹窗背板模糊材质。默认值:BlurStyle.COMPONENT_ULTRA_THICK说明:设置为BlurStyle.NONE即可关闭背景虚化。当设置了backgroundBlurStyle为非NONE值时,则不要设置backgroundColor,否则颜色显示将不符合预期效果。 |
onDidAppear |
() => void |
弹窗弹出时的事件回调。说明:1.正常时序依次为:onWillAppear>>onDidAppear>>(onDateAccept/onCancel/onDateChange)>>onWillDisappear>>onDidDisappear。2.在onDidAppear内设置改变弹窗显示效果的回调事件,二次弹出生效。3.快速点击弹出,消失弹窗时,存在onWillDisappear在onDidAppear前生效。4. 当弹窗入场动效未完成时关闭弹窗,该回调不会触发。 |
onDidDisappear |
() => void |
弹窗消失时的事件回调。说明:1.正常时序依次为:onWillAppear>>onDidAppear>>(onDateAccept/onCancel/onDateChange)>>onWillDisappear>>onDidDisappear。 |
onWillAppear |
() => void |
弹窗显示动效前的事件回调。 说明:1.正常时序依次为:onWillAppear>>onDidAppear>>(onDateAccept/onCancel/onDateChange)>>onWillDisappear>>onDidDisappear。2.在onWillAppear内设置改变弹窗显示效果的回调事件,二次弹出生效。 |
onWillDisappear |
() => void |
弹窗退出动效前的事件回调。 说明:1.正常时序依次为:onWillAppear>>onDidAppear>>(onDateAccept/onCancel/onDateChange)>>onWillDisappear>>onDidDisappear。2.快速点击弹出,消失弹窗时,存在onWillDisappear在onDidAppear前生效。 |
shadow |
ShadowOptions | ShadowStyle |
设置弹窗背板的阴影。当设备为2in1时,默认场景下获焦阴影值为ShadowStyle.OUTER_FLOATING_MD,失焦为ShadowStyle.OUTER_FLOATING_SM |
dateTimeOptions |
DateTimeOptions |
设置时分是否显示前置0,目前只支持设置hour和minute参数。默认值:hour: 24小时制默认为"2-digit",即有前置0;12小时制默认为"numeric",即没有前置0。minute: 默认为"2-digit",即有前置0。 |
3、案 例
一个案例如下:
弹窗中配置lunarSwitch、showTime为true时,展示切换农历的开关以及时间,当checkbox被选中时,显示农历。当按下确定按钮时,弹窗会通过onDateAccept返回目前所选中的日期。如需弹窗再次弹出时显示选中的是上一次确定的日期,就要在回调中重新给selectTime进行赋值。
代码如下(11 ~ 28行):
@Entry
@Component
struct DatePickerDialogExample {
@State selectTime: Date = new Date('2023-12-25T08:30:00');
build() {
Column() {
Button('showDatePickerDialog')
.margin(30)
.onClick(() => {
this.getUIContext().showDatePickerDialog({
start: new Date("2000-1-1"),
end: new Date("2100-12-31"),
selected: this.selectTime,
lunarSwitch: true,
showTime: true,
onDateAccept: (value: Date) => {
this.selectTime = value
console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
},
})
})
}.width('100%').margin({ top: 5 })
}
}
另外,我们还可以通过配置disappearTextStyle、textStyle、selectedTextStyle、acceptButtonStyle、cancelButtonStyle实现自定义文本以及按钮样式。代码如下:
@Entry
@Component
struct DatePickerDialogExample {
@State selectTime: Date = new Date('2023-12-25T08:30:00');
build() {
Column() {
Button('showDatePickerDialog')
.margin(30)
.onClick(() => {
this.getUIContext().showDatePickerDialog({
start: new Date("2000-1-1"),
end: new Date("2100-12-31"),
selected: this.selectTime,
textStyle: { color: '#2787d9', font: { size: '14fp', weight: FontWeight.Normal } },
selectedTextStyle: { color: '#004aaf', font: { size: '18fp', weight: FontWeight.Regular } },
acceptButtonStyle: {
fontColor: '#2787d9',
fontSize: '16fp',
backgroundColor: '#f7f7f7',
borderRadius: 10
},
cancelButtonStyle: {
fontColor: Color.Red,
fontSize: '16fp',
backgroundColor: '#f7f7f7',
borderRadius: 10
}
})
})
}.width('100%').margin({ top: 5 })
}
}
效果如下: