1、描述
日期选择组件，用于根据指定日期范围创建日期滑动选择器。
2、接口
DatePicker(options:{start?: Date, end?: Date, selected?: Date})
3、参数
参数名 |
参数类型 |
必填 |
描述 |
start |
Date |
否 |
指定选择器的开始日期。默认值：Date(‘1970--1-1’) |
end |
Date |
否 |
指定选择器结束日期。默认值：Date(‘2100--12-31’) |
selected |
Date |
否 |
设置选中的日期。默认值：系统当前日期 |
4、属性
lunar - boolean - 日期是否显示农历（true：展示农历，false：不展示农历），默认值：false。
- 事件
onChange(callback:(value: DatePickerResult) => void) - 选择日期时触发该事件。
6、DatePickerResult对象说明：
year - number - 选中日期的年
month - number - 选中日期的月（0-11）0：表示1月，11：表示12月。
day - number - 选中日期的日
7、示例
import router from '@ohos.router'
@Entry
@Component
struct DatePickerPage {
@State message: string = '日期选择器组件，用于根据指定日期范围创建日期滑动选择器。'
@State curSelectedDate: string = '';
build() {
Row() {
Scroll() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
.width('96%')
Blank(12)
DatePicker({ start: new Date("2000-1-1"), end: new Date("2050-1-1"), selected: new Date("2024-1-29") })
.width("96%")
.onChange((value: DatePickerResult) => {
this.curSelectedDate = value.year + "年-" + (value.month + 1) + "月-" + value.day + "日";
})
Blank(12)
Text("当前选择的日期：" + this.curSelectedDate)
.fontSize(18)
.width("96%")
.fontWeight(FontWeight.Bold)
Blank(12)
DatePicker()
.width("96%")
.lunar(false)
Blank(12)
Text("农历")
.fontSize(18)
.fontWeight(FontWeight.Bold)
Blank(12)
DatePicker()
.width("96%")
.lunar(true)
Blank(12)
Text("日期选择器中日期是默认日期")
.fontSize(18)
.fontWeight(FontWeight.Bold)
Blank(12)
Button("DataPicker文本文档")
.fontSize(20)
.backgroundColor('#007DFF')
.width('96%')
.onClick(() => {
// 处理点击事件逻辑
router.pushUrl({
url: "pages/baseComponent/datePicker/DatePickerDesc",
})
})
Blank(12)
}
.width('100%')
}
}
.padding({ top: 12, bottom: 12 })
}
}
7、效果图
