Date Picker Dialog Box

NOTE This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.

You can display a date picker in a dialog box to allow users to select a date from the given range.

Required Permissions

None

DatePickerDialog.show

show(options?: DatePickerDialogOptions)

Defines and displays a date picker dialog box.

options parameters

Name	Type	Mandatory	Default Value	Description
start	Date	No	Date('1970-1-1')	Start date of the picker.
end	Date	No	Date('2100-12-31')	End date of the picker.
selected	Date	No	Current system date	Date of the selected item.
lunar	boolean	No	false	Whether to display the lunar calendar.
onAccept	(value: DatePickerResult) => void	No	-	Triggered when the OK button in the dialog box is clicked.
onCancel	() => void	No	-	Triggered when the Cancel button in the dialog box is clicked.
onChange	(value: DatePickerResult) => void	No	-	Triggered when the selected item in the picker changes.

Example

Date Picker Sample Code (With Lunar Calendar)

@Entry
@Component
struct DatePickerDialogExample01 {
  @State isLunar: boolean = true
  selectedDate: Date = new Date("2000-1-1")

  build() {
    Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center,
      justifyContent: FlexAlign.Center }) {
      Button("DatePickerDialog").onClick(() => {
        DatePickerDialog.show({
          start: new Date("2000-1-1"),
          end: new Date("2005-1-1"),
          selected: this.selectedDate,
          lunar: this.isLunar,
          onAccept: (value: DatePickerResult) => {
            this.selectedDate.setFullYear(value.year, value.month, value.day)
            console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
          },
          onCancel: () => {
            console.info("DatePickerDialog:onCancel()")
          },
          onChange: (value: DatePickerResult) => {
            console.info("DatePickerDialog:onChange()" + JSON.stringify(value))
          }
        })
      })
    }
  }
}

Date Picker Sample Code (No Lunar Calendar)

@Entry
@Component
struct DatePickerDialogExample02 {
  @State isLunar: boolean = false
  selectedDate: Date = new Date("2000-1-1")

  build() {
    Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center,
      justifyContent: FlexAlign.Center }) {
      Button("DatePickerDialog").onClick(() => {
        DatePickerDialog.show({
          start: new Date("2000-1-1"),
          end: new Date("2005-1-1"),
          selected: this.selectedDate,
          lunar: this.isLunar,
          onAccept: (value: DatePickerResult) => {
            this.selectedDate.setFullYear(value.year, value.month, value.day)
            console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
          },
          onCancel: () => {
            console.info("DatePickerDialog:onCancel()")
          },
          onChange: (value: DatePickerResult) => {
            console.info("DatePickerDialog:onChange()" + JSON.stringify(value))
          }
        })
      })
    }
  }
}