ts-basic-components-datepicker.md 2.6 KB
Newer Older
Z
zengyawen 已提交
1 2
# DatePicker

H
hebingxue 已提交
3 4
选择日期的滑动选择器组件

H
geshi  
HelloCrease 已提交
5
>  **说明:**
H
hebingxue 已提交
6
>
Z
zengyawen 已提交
7 8 9 10 11 12 13 14 15 16 17 18 19 20
> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。






## 子组件




## 接口

K
kangchongtao 已提交
21
DatePicker(options?: {start?: Date, end?: Date, selected?: Date})
Z
zengyawen 已提交
22

23
根据指定范围的Date创建可以选择日期的滑动选择器。
Z
zengyawen 已提交
24

K
kangchongtao 已提交
25
**参数:**
H
hebingxue 已提交
26 27 28 29 30
| 参数名 | 参数类型 | 必填  | 参数描述 |
| -------- | -------- | ------------- | -------- |
| start    | Date | 否  | 指定选择器的起始日期。<br/>默认值:Date('1970-1-1') |
| end      | Date | 否  |   指定选择器的结束日期。<br/>默认值:Date('2100-12-31') |
| selected | Date | 否  | 设置选中项的日期。<br/>默认值:当前系统日期  |
Z
zengyawen 已提交
31 32 33 34


## 属性

H
hebingxue 已提交
35 36 37
| 名称    | 参数类型        | 描述            | 
| ------| -------------- | -------- |
| lunar | boolean  | 日期是否显示农历。<br/>-&nbsp;true:展示农历。<br/>-&nbsp;false:不展示农历。<br/>默认值:false | 
Z
zengyawen 已提交
38 39 40 41 42


## 事件

| 名称 | 功能描述 | 
43
| -------- | -------- | 
44
| onChange(callback:&nbsp;(value:&nbsp;DatePickerResult)&nbsp;=&gt;&nbsp;void) | 选择日期时触发该事件。 | 
Z
zengyawen 已提交
45

H
hebingxue 已提交
46 47 48 49 50 51 52
## DatePickerResult对象说明

| 名称 | 参数类型 | 描述 | 
| -------- | -------- | -------- |
| year | number | 选中日期的年。 | 
| month | number | 选中日期的月(0~11),0表示1月,11表示12月。 | 
| day | number | 选中日期的日。 | 
Z
zengyawen 已提交
53 54 55 56 57 58 59


## 示例


### 日期选择器(显示农历)

H
geshi  
HelloCrease 已提交
60 61
```ts
// xxx.ets
Z
zengyawen 已提交
62 63 64 65 66 67 68 69 70
@Entry
@Component
struct DatePickerExample01 {
  private selectedDate: Date = new Date('2021-08-08')

  build() {
    Column() {
      DatePicker({
        start: new Date('1970-1-1'),
71
        end: new Date('2100-1-1'),
Z
zengyawen 已提交
72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87
        selected: this.selectedDate,
      })
      .lunar(true)
      .onChange((date: DatePickerResult) => {
        console.info('select current date is: ' + JSON.stringify(date))
      })
    }.width('100%')
  }
}
```

![zh-cn_image_0000001251279761](figures/zh-cn_image_0000001251279761.gif)


### 日期选择器(不显示农历)

H
geshi  
HelloCrease 已提交
88 89
```ts
// xxx.ets
Z
zengyawen 已提交
90 91 92 93 94 95 96 97 98
@Entry
@Component
struct DatePickerExample02 {
  private selectedDate: Date = new Date('2021-08-08')

  build() {
    Column() {
      DatePicker({
        start: new Date('1970-1-1'),
99
        end: new Date('2100-1-1'),
Z
zengyawen 已提交
100 101 102 103 104 105 106 107 108 109 110 111 112
        selected: this.selectedDate,
      })
      .lunar(false)
      .onChange((date: DatePickerResult) => {
        console.info('select current date is: ' + JSON.stringify(date))
      })
    }.width('100%')
  }
}
```

![zh-cn_image_0000001251092975](figures/zh-cn_image_0000001251092975.gif)