ts-methods-datepicker-dialog.md 3.3 KB
Newer Older
E
esterzhou 已提交
1 2
# Date Picker Dialog Box

3
> **NOTE**<br>
E
esterzhou 已提交
4 5
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.

E
ester.zhou 已提交
6
You can display a date picker in a dialog box to allow users to select a date from the given range.
E
esterzhou 已提交
7 8 9 10 11 12 13

## Required Permissions

None

## DatePickerDialog.show

E
ester.zhou 已提交
14
show(options?: DatePickerDialogOptions)
E
esterzhou 已提交
15

16
Displays a date picker dialog box.
E
esterzhou 已提交
17

E
ester.zhou 已提交
18
- options parameters
19
  | Name | Type | Mandatory | Default Value | Description |
E
esterzhou 已提交
20
  | -------- | -------- | -------- | -------- | -------- |
21 22 23 24 25 26 27
  | 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](ts-basic-components-datepicker.md#DatePickerResult)) => void | No | - | Callback invoked 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](ts-basic-components-datepicker.md#DatePickerResult)) => void | No | - | Callback invoked when the selected item in the picker changes. |
E
esterzhou 已提交
28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

## 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) => {
E
ester.zhou 已提交
49
            this.selectedDate.setFullYear(value.year, value.month, value.day)
E
esterzhou 已提交
50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81
            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) => {
E
ester.zhou 已提交
82
            this.selectedDate.setFullYear(value.year, value.month, value.day)
E
esterzhou 已提交
83 84 85 86 87 88 89 90 91 92 93 94 95 96
            console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
          },
          onCancel: () => {
            console.info("DatePickerDialog:onCancel()")
          },
          onChange: (value: DatePickerResult) => {
            console.info("DatePickerDialog:onChange()" + JSON.stringify(value))
          }
        })
      })
    }
  }
}
```