| start | Date | No | Date('1970-1-1') | Start date of the date picker. |
| end | Date | No | Date('2100-12-31') | End date of the date picker. |
| selected | Date | No | Current system date or time | Selected date when **type** is set to **DatePickerType.Date** and selected time when **type** is set to **DatePickerType.Time**. |
| type | DatePickerType | No | DatePickerType.Date | Picker type, which can be date picker and time picker. The date picker is used by default. |
- DatePickerType enums
| Name | Description |
| -------- | -------- |
| Date | Date picker. |
| Time | Time picker. |
| 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.|
## Attributes
| Name | Type | Default Value | Description |
| -------- | -------- | -------- |-------- |
| lunar | boolean | false | Whether to display the lunar calendar.<br/>- **true**: The lunar calendar is displayed.<br/>- **false**: The lunar calendar is not displayed. |
| useMilitaryTime | boolean | false | Whether the display time is in 24-hour format. The value cannot be dynamically modified. |
| Name| Type| Default Value| Description|
| -------- | -------- | -------- | -------- |
| lunar | boolean | false | Whether to display the lunar calendar.<br>- **true**: Display the lunar calendar.<br>- **false**: Do not display the lunar calendar.|
## Events
| Name | Description |
| Name| Description|
| -------- | -------- |
| onChange(callback: (value: DatePickerResult) => void) | This event is triggered when a date or time is selected. |
| onChange(callback: (value: DatePickerResult) => void) | Triggered when a date is selected.|
- DatePickerResult
| Name | Type | Description |
| -------- | -------- | -------- |
| year | number | Year of the selected date (when **type** is **DatePickerType.Date**). |
| month | number | Month of the selected date (when **type** is **DatePickerType.Date**). |
| day | number | Date of the selected date (when **type** is **DatePickerType.Date**). |
| hour | number | Hour portion of the selected time (when **type** is **DatePickerType.Time**). |
| minute | number | Minute portion of the selected time (when **type** is **DatePickerType.Time**). |
### DatePickerResult
| Name| Type| Description|
| -------- | -------- | -------- |
| year | number | Year of the selected date.|
| month | number | Month of the selected date.|
| day | number | Day of the selected date.|
## Example
### Date Picker (with Lunar Calendar)
### Date Picker Sample Code (With Lunar Calendar)
```
@Entry
...
...
@@ -79,9 +67,8 @@ struct DatePickerExample01 {
Column() {
DatePicker({
start: new Date('1970-1-1'),
end: new Date('2200-1-1'),
end: new Date('2100-1-1'),
selected: this.selectedDate,
type: DatePickerType.Date
})
.lunar(true)
.onChange((date: DatePickerResult) => {
...
...
@@ -93,8 +80,7 @@ struct DatePickerExample01 {
```
### Date Picker (Without Lunar Calendar)
### Date Picker Sample Code (No Lunar Calendar)
```
@Entry
...
...
@@ -106,9 +92,8 @@ struct DatePickerExample02 {
Column() {
DatePicker({
start: new Date('1970-1-1'),
end: new Date('2200-1-1'),
end: new Date('2100-1-1'),
selected: this.selectedDate,
type: DatePickerType.Date
})
.lunar(false)
.onChange((date: DatePickerResult) => {
...
...
@@ -120,31 +105,3 @@ struct DatePickerExample02 {
```
### Time Picker
```
@Entry
@Component
struct DatePickerExample03 {
private selectedTime: Date = new Date('2021-9-29 08:00:00')
build() {
Column() {
DatePicker({
start: new Date('00:00:00'),
end: new Date('23:59:59'),
selected: this.selectedTime,
type: DatePickerType.Time
})
.useMilitaryTime(true)
.onChange((date: DatePickerResult) => {
console.info('select current date is: ' + JSON.stringify(date))
| 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 or time| Date or time of the selected item in the picker. When **type** is set to **DatePickerType.Date**, this parameter indicates the date of the selected item. When **type** is set to **DatePickerType.Time**, this parameter indicates the time of the selected item.|
| type | [DatePickerType](ts-basic-components-datepicker.md) | No| DatePickerType.Date | Picker type, which can be the date picker and time picker.|
| selected | Date | No| Current system date| Date of the selected item.|
| lunar | boolean | No| false | Whether to display the lunar calendar.|
| useMilitaryTime | boolean | No| false | Whether to display time in 24-hour format.|
| onAccept | (value: [DatePickerResult](ts-basic-components-datepicker.md)) => void | No| - | Triggered when the OK button in the dialog box is clicked.|
| onAccept | (value: [DatePickerResult](ts-basic-components-datepicker.md#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](ts-basic-components-datepicker.md)) => void | No| - | Triggered when the selected item in the picker changes.|
| onChange | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult)) => void | No| - | Triggered when the selected item in the picker changes.|
## Example
...
...
@@ -36,8 +34,6 @@ Shows a date or time picker in the given settings.
| selected | Date | No| Current system time| Time of the selected item.|
| useMilitaryTime | boolean | No| false | Whether to display time in 24-hour format.|
| onAccept | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => 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: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No| - | Triggered when the selected item in the picker changes.|
