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、效果图