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

E
ester.zhou 已提交
3 4 5 6 7
A date picker dialog box is a dialog box that allows users to select a date from the given range.

>  **NOTE**
>
>  The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
E
esterzhou 已提交
8 9 10 11 12 13 14 15


## Required Permissions

None

## DatePickerDialog.show

E
ester.zhou 已提交
16
show(options?: DatePickerDialogOptions)
E
esterzhou 已提交
17

E
ester.zhou 已提交
18
Shows a date picker dialog box.
E
esterzhou 已提交
19

E
ester.zhou 已提交
20 21
- DatePickerDialogOptions
  | Name| Type| Mandatory| Default Value| Description|
E
esterzhou 已提交
22
  | -------- | -------- | -------- | -------- | -------- |
E
ester.zhou 已提交
23 24 25 26 27 28 29
  | 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| - | Callback invoked 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 已提交
30 31 32 33

## Example

### Date Picker Sample Code (With Lunar Calendar)
E
ester.zhou 已提交
34 35
```ts
// xxx.ets
E
esterzhou 已提交
36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51
@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 已提交
52
            this.selectedDate.setFullYear(value.year, value.month, value.day)
E
esterzhou 已提交
53 54 55 56 57 58 59 60 61 62 63 64 65 66 67
            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)
E
ester.zhou 已提交
68 69
```ts
// xxx.ets
E
esterzhou 已提交
70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85
@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 已提交
86
            this.selectedDate.setFullYear(value.year, value.month, value.day)
E
esterzhou 已提交
87 88 89 90 91 92 93 94 95 96 97 98 99 100
            console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
          },
          onCancel: () => {
            console.info("DatePickerDialog:onCancel()")
          },
          onChange: (value: DatePickerResult) => {
            console.info("DatePickerDialog:onChange()" + JSON.stringify(value))
          }
        })
      })
    }
  }
}
```