# li-date-picker

<!-- Auto Generated Below -->

## Properties

| Property         | Attribute           | Description                                                                                                                                    | Type                                                                | Default     |
| ---------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | ----------- |
| `dateAdapter`    | --                  | 日期解析适配器，用于自定义日期格式/解析日期 {{    parse(s: string): Date,    format(d: Date): string  }}                                       | `undefined \| { parse(d: string): Date; format(d: Date): string; }` | `undefined` |
| `direction`      | `direction`         | 强制日历模态弹窗打开方向总是在左边或右边。当输入框比打开的日历弹窗宽度小时，这个属性可以用于默认在右侧打开日历弹窗。 {DuetDatePickerDirection} | `"left" \| "right"`                                                 | `'right'`   |
| `disabled`       | `disabled`          | 让date picker的输入框禁用，阻止用户与输入框进行交互，同时为A11Y的访问辅助技术传递输入框的非交互状态 {boolean}                                  | `boolean`                                                           | `false`     |
| `firstDayOfWeek` | `first-day-of-week` | 代表每周的第一天是从哪天开始算起。'0'代表星期日, '1'代表星期一；默认是星期一 {any}                                                             | `any`                                                               | `undefined` |
| `helperText`     | `helper-text`       | 帮助提示信息的文本 {string}                                                                                                                    | `string \| undefined`                                               | `undefined` |
| `identifier`     | `identifier`        | 添加对date picker输入的唯一标识。代替元素上的html id特性 {string}                                                                              | `string`                                                            | `undefined` |
| `invalid`        | `invalid`           | 无效状态 {boolean}                                                                                                                             | `boolean \| undefined`                                              | `undefined` |
| `label`          | `label`             | 标签 {string}                                                                                                                                  | `string`                                                            | `''`        |
| `localization`   | --                  | 用于本地化按钮标签，日期名称，月份名称。默认为英文 {(DuetLocalizedText & { today: string })}                                                   | `DuetLocalizedText & { today: string; }`                            | `undefined` |
| `max`            | `max`               | 允许拾取的日期最大值。必须是ISO-8061格式：YYYY-MM-DD。这个属性可以单独使用也可以与min属性成对使用。 {string}                                   | `string`                                                            | `''`        |
| `min`            | `min`               | 允许拾取的日期最小值。必须是ISO-8061格式：YYYY-MM-DD。这个属性可以单独使用也可以与max属性成对使用。 {string}                                   | `string`                                                            | `''`        |
| `name`           | `name`              | date picker输入的名称 {string}                                                                                                                 | `string`                                                            | `'date'`    |
| `required`       | `required`          | 表示输入框是必选项 {boolean}                                                                                                                   | `boolean`                                                           | `false`     |
| `role`           | `role`              | 为date picker的输入框定义一个特殊的角色特性 {string}                                                                                           | `string`                                                            | `undefined` |
| `size`           | `size`              | 可选属性 大小 {string}                                                                                                                         | `string \| undefined`                                               | `''`        |
| `styles`         | `styles`            | 可选属性 注入的样式style {string}                                                                                                              | `string \| undefined`                                               | `undefined` |
| `value`          | `value`             | 日期值。必须是ISO-8061格式：YYYY-MM-DD {string}                                                                                                | `string`                                                            | `''`        |

## Events

| Event       | Description                                                               | Type                                                                                |
| ----------- | ------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
| `li-blur`   | 日期选择框失去焦点时，触发此事件 {EventEmitter<DuetDatePickerFocusEvent>} | `CustomEvent<{ component: "duet-date-picker"; }>`                                   |
| `li-change` | 日期被选择后，触发此事件 {EventEmitter<DuetDatePickerChangeEvent>}        | `CustomEvent<{ component: "duet-date-picker"; valueAsDate: Date; value: string; }>` |
| `li-focus`  | 日期选择框获取焦点时，触发此事件 {EventEmitter<DuetDatePickerFocusEvent>} | `CustomEvent<{ component: "duet-date-picker"; }>`                                   |

## Methods

### `hide(moveFocusToButton?: boolean) => Promise<void>`

隐藏日历弹出框。moveFocusToButton值为false时，阻止焦点返回到date picker组件的按钮上。默认为true

#### Returns

Type: `Promise<void>`

### `setFocus() => Promise<void>`

使date picker组件的输入框获取焦点。尽量避免使用全局的focus()方法

#### Returns

Type: `Promise<void>`

### `show() => Promise<void>`

显示日历弹出框，并把焦点放在日历内部

#### Returns

Type: `Promise<void>`

## Dependencies

### Depends on

- duet-date-picker

### Graph

```mermaid
graph TD;
  li-date-picker --> duet-date-picker
  style li-date-picker fill:#f9f,stroke:#333,stroke-width:4px
```

---

_Built with ITSI_
