提交 5c3c631c 编写于 作者: Y yaoyuchi

DatePicker,DatePickerDialog,TimePicker,TimePickerDialog

Signed-off-by: Nyaoyuchi <yaoyuchi@huawei.com>
上级 cb848731
......@@ -70,6 +70,7 @@
- [TextInput](ts-basic-components-textinput.md)
- [TextPicker](ts-basic-components-textpicker.md)
- [TextTimer](ts-basic-components-texttimer.md)
- [TimePicker](ts-basic-components-timepicker.md)
- [Toggle](ts-basic-components-toggle.md)
- [TextClock](ts-basic-components-textclock.md)
- [Web](ts-basic-components-web.md)
......@@ -135,7 +136,8 @@
- [警告弹窗](ts-methods-alert-dialog-box.md)
- [列表选择弹窗](ts-methods-action-sheet.md)
- [自定义弹窗](ts-methods-custom-dialog-box.md)
- [日期时间选择弹窗](ts-methods-datepicker-dialog.md)
- [日期选择弹窗](ts-methods-datepicker-dialog.md)
- [时间选择弹窗](ts-methods-timepicker-dialog.md)
- [文本选择弹窗](ts-methods-textpicker-dialog.md)
- [菜单](ts-methods-menu.md)
- 附录
......
......@@ -4,7 +4,7 @@
> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
选择日期和时间的滑动选择器组件。
选择日期的滑动选择器组件。
## 权限列表
......@@ -19,23 +19,16 @@
## 接口
DatePicker(value:{start?: Date, end?: Date, selected?: Date, type?: DatePickerType})
DatePicker(options?: DatePickerOptions)
根据指定范围的Date创建可以选择时间或者日期的滑动选择器。
根据指定范围的Date创建可以选择日期的滑动选择器。
- 参数
- options参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| start | Date | 否 | Date('1970-1-1') | 指定选择器的起始日期。 |
| end | Date | 否 | Date('2100-12-31') | 指定选择器的结束日期。 |
| selected | Date | 否 | 当前系统日期或时间 | 当type为DatePickerType.Date时,设置选中项的日期,当type为DatePickerType.Time时,设置选中项的时间。 |
| type | DatePickerType | 否 | DatePickerType.Date | 指定选择器的类型,包括日期选择器和时间选择器,缺省使用日期选择器。 |
- DatePickerType枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Date | 日期选择器。 |
| Time | 时间选择器。 |
| selected | Date | 否 | 当前系统日期 | 设置选中项的日期。 |
## 属性
......@@ -43,23 +36,20 @@ DatePicker(value:{start?: Date, end?: Date, selected?: Date, type?: DatePickerTy
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| lunar | boolean | false | 日期是否显示农历。<br/>-&nbsp;true:展示农历。<br/>-&nbsp;false:不展示农历。 |
| useMilitaryTime | boolean | false | 展示时间是否为24小时制,不支持动态修改。 |
## 事件
| 名称 | 功能描述 |
| -------- | -------- |
| onChange(callback:&nbsp;(value:&nbsp;DatePickerResult)&nbsp;=&gt;&nbsp;void) | 选择日期或时间时触发该事件。 |
| onChange(callback:&nbsp;(value:&nbsp;DatePickerResult)&nbsp;=&gt;&nbsp;void) | 选择日期时触发该事件。 |
- DatePickerResult对象说明
### DatePickerResult对象说明
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| year | number | 选中日期的年(type为DatePickerType.Date)。 |
| month | number | 选中日期的月(type为DatePickerType.Date)。 |
| day | number | 选中日期的日(type为DatePickerType.Date)。 |
| hour | number | 选中时间的时(type为DatePickerType.Time)。 |
| minute | number | 选中时间的分(type为DatePickerType.Time)。 |
| year | number | 选中日期的年。 |
| month | number | 选中日期的月。 |
| day | number | 选中日期的日。 |
## 示例
......@@ -77,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) => {
......@@ -105,9 +94,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,30 +108,3 @@ struct DatePickerExample02 {
![zh-cn_image_0000001251092975](figures/zh-cn_image_0000001251092975.gif)
### 时间选择器
```
@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))
})
}.width('100%')
}
}
```
![zh-cn_image_0000001251292933](figures/zh-cn_image_0000001251292933.gif)
# TimePicker
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
选择时间的滑动选择器组件。
## 权限列表
## 子组件
## 接口
TimePicker(options?: TimePickerOptions)
默认以00:00至23:59的时间区间创建滑动选择器。
- options参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| selected | Date | 否 | 当前系统时间 | 设置选中项的时间。 |
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| useMilitaryTime | boolean | false | 展示时间是否为24小时制,不支持动态修改。 |
## 事件
| 名称 | 功能描述 |
| -------- | -------- |
| onChange(callback:&nbsp;(value:&nbsp;TimePickerResult )&nbsp;=&gt;&nbsp;void) | 选择时间时触发该事件。 |
### TimePickerResult对象说明
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| hour | number | 选中时间的时。 |
| minute | number | 选中时间的分。 |
## 示例
### 时间选择器
```
@Entry
@Component
struct TimePickerExample {
private selectedTime: Date = new Date('08-00')
build() {
Column() {
TimePicker({
selected: this.selectedTime,
})
.useMilitaryTime(true)
.onChange((date: TimePickerResult) => {
console.info('select current date is: ' + JSON.stringify(date))
})
}.width('100%')
}
}
```
![zh-cn_image_0000001251292933](figures/zh-cn_image_0000001251292933.gif)
# 日期时间滑动选择器弹窗
# 日期滑动选择器弹窗
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
根据指定范围的Date创建可以选择时间或者日期的滑动选择器,展示在弹窗上。
根据指定范围的Date创建可以选择日期的滑动选择器,展示在弹窗上。
## 权限列表
......@@ -11,22 +11,20 @@
## DatePickerDialog.show
show(options?: DatePickerDialogOption)
show(options?: DatePickerDialogOptions)
定义日期时间滑动选择器弹窗并弹出。
定义日期滑动选择器弹窗并弹出。
- DatePickerDialogOption参数
- options参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| start | Date | 否 | Date('1970-1-1') | 指定选择器的起始日期。 |
| end | Date | 否 | Date('2100-12-31') | 指定选择器的结束日期。 |
| selected | Date | 否 | 当前系统日期或时间 | 当type为DatePickerType.Date时,设置选中项的日期。当type为DatePickerType.Time时,设置选中项的时间。 |
| type | [DatePickerType](ts-basic-components-datepicker.md) | 否 | DatePickerType.Date | 指定选择器的类型,包括日期选择器和时间选择器,缺省使用日期选择器。 |
| selected | Date | 否 | 当前系统日期 | 设置选中项的日期。 |
| lunar | boolean | 否 | false | 日期是否显示农历。 |
| useMilitaryTime | boolean | 否 | false | 展示时间是否为24小时制。 |
| onAccept | (value: [DatePickerResult](ts-basic-components-datepicker.md)) => void | 否 | - | 点击弹窗中确定按钮时触发。 |
| onAccept | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult对象说明)) => void | 否 | - | 点击弹窗中确定按钮时触发。 |
| onCancel | () => void | 否 | - | 点击弹窗中取消按钮时触发。 |
| onChange | (value: [DatePickerResult](ts-basic-components-datepicker.md)) => void | 否 | - | 滑动选择器,当前选择项改变时触发。 |
| onChange | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult对象说明)) => void | 否 | - | 滑动选择器,当前选择项改变时触发。 |
## 示例
......@@ -36,8 +34,6 @@ show(options?: DatePickerDialogOption)
@Component
struct DatePickerDialogExample01 {
@State isLunar: boolean = true
@State isUseMilitaryTime: boolean = false
@State datePickerType: DatePickerType = DatePickerType.Date
selectedDate: Date = new Date("2000-1-1")
build() {
......@@ -48,15 +44,10 @@ struct DatePickerDialogExample01 {
start: new Date("2000-1-1"),
end: new Date("2005-1-1"),
selected: this.selectedDate,
type: this.datePickerType,
lunar: this.isLunar,
useMilitaryTime: this.isUseMilitaryTime,
onAccept: (value: DatePickerResult) => {
console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
if (this.datePickerType == DatePickerType.Date) {
this.selectedDate.setFullYear(value.year, value.month, value.day)
} else if (this.datePickerType == DatePickerType.Time) {
this.selectedDate.setHours(value.hour, value.minute, value.second)
console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
}
},
onCancel: () => {
......@@ -77,49 +68,6 @@ struct DatePickerDialogExample01 {
@Component
struct DatePickerDialogExample02 {
@State isLunar: boolean = false
@State isUseMilitaryTime: boolean = false
@State datePickerType: DatePickerType = DatePickerType.Date
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,
type: this.datePickerType,
lunar: this.isLunar,
useMilitaryTime: this.isUseMilitaryTime,
onAccept: (value: DatePickerResult) => {
console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
if (this.datePickerType == DatePickerType.Date) {
this.selectedDate.setFullYear(value.year, value.month, value.day)
} else if (this.datePickerType == DatePickerType.Time) {
this.selectedDate.setHours(value.hour, value.minute, value.second)
}
},
onCancel: () => {
console.info("DatePickerDialog:onCancel()")
},
onChange: (value: DatePickerResult) => {
console.info("DatePickerDialog:onChange()" + JSON.stringify(value))
}
})
})
}
}
}
```
### 时间滑动选择器(24小时制)示例
```
@Entry
@Component
struct DatePickerDialogExample03 {
@State isLunar: boolean = false
@State isUseMilitaryTime: boolean = true
@State datePickerType: DatePickerType = DatePickerType.Time
selectedDate: Date = new Date("2000-1-1")
build() {
......@@ -130,56 +78,10 @@ struct DatePickerDialogExample03 {
start: new Date("2000-1-1"),
end: new Date("2005-1-1"),
selected: this.selectedDate,
type: this.datePickerType,
lunar: this.isLunar,
useMilitaryTime: this.isUseMilitaryTime,
onAccept: (value: DatePickerResult) => {
console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
if (this.datePickerType == DatePickerType.Date) {
this.selectedDate.setFullYear(value.year, value.month, value.day)
} else if (this.datePickerType == DatePickerType.Time) {
this.selectedDate.setHours(value.hour, value.minute, value.second)
}
},
onCancel: () => {
console.info("DatePickerDialog:onCancel()")
},
onChange: (value: DatePickerResult) => {
console.info("DatePickerDialog:onChange()" + JSON.stringify(value))
}
})
})
}
}
}
```
### 时间滑动选择器(12小时制)示例
```
@Entry
@Component
struct DatePickerDialogExample04 {
@State isLunar: boolean = false
@State isUseMilitaryTime: boolean = false
@State datePickerType: DatePickerType = DatePickerType.Time
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,
type: this.datePickerType,
lunar: this.isLunar,
useMilitaryTime: this.isUseMilitaryTime,
onAccept: (value: DatePickerResult) => {
console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
if (this.datePickerType == DatePickerType.Date) {
this.selectedDate.setFullYear(value.year, value.month, value.day)
} else if (this.datePickerType == DatePickerType.Time) {
this.selectedDate.setHours(value.hour, value.minute, value.second)
}
},
onCancel: () => {
......
# 时间滑动选择器弹窗
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
默认以00:00至23:59的时间区间创建滑动选择器,展示在弹窗上。
## 权限列表
## TimePickerDialog.show
show(options?: TimePickerDialogOptions)
定义时间滑动选择器弹窗并弹出。
- options参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| selected | Date | 否 | 当前系统时间 | 设置选中项的时间。 |
| useMilitaryTime | boolean | 否 | false | 展示时间是否为24小时制。 |
| onAccept | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult对象说明)) => void | 否 | - | 点击弹窗中确定按钮时触发。 |
| onCancel | () => void | 否 | - | 点击弹窗中取消按钮时触发。 |
| onChange | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult对象说明)) => void | 否 | - | 滑动选择器,当前选择项改变时触发。 |
## 示例
### 时间滑动选择器(24小时制)示例
```
@Entry
@Component
struct TimePickerDialogExample01 {
@State isUseMilitaryTime: boolean = true
build() {
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center,
justifyContent: FlexAlign.Center }) {
Button("TimePickerDialog").onClick(() => {
TimePickerDialog.show({
useMilitaryTime: this.isUseMilitaryTime,
onAccept: (value: TimePickerResult) => {
this.selectedDate.setHours(value.hour, value.minute, value.second)
console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
},
onCancel: () => {
console.info("TimePickerDialog:onCancel()")
},
onChange: (value: TimePickerResult) => {
console.info("TimePickerDialog:onChange()" + JSON.stringify(value))
}
})
})
}
}
}
```
### 时间滑动选择器(12小时制)示例
```
@Entry
@Component
struct TimePickerDialogExample02 {
@State isUseMilitaryTime: boolean = false
build() {
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center,
justifyContent: FlexAlign.Center }) {
Button("TimePickerDialog").onClick(() => {
TimePickerDialog.show({
useMilitaryTime: this.isUseMilitaryTime,
onAccept: (value: TimePickerResult) => {
this.selectedDate.setHours(value.hour, value.minute, value.second)
console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
},
onCancel: () => {
console.info("TimePickerDialog:onCancel()")
},
onChange: (value: TimePickerResult) => {
console.info("TimePickerDialog:onChange()" + JSON.stringify(value))
}
})
})
}
}
}
```
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册