---
title: WKPickerDate 日期选择组件
group:
  title: 表单组件
  path: /form/
---

## 何时使用

WKPickerDate 日期选择组件，从底部弹起的滚动选择器，用于选择年月日等日期。

## 基本使用

```tsx
/**
 * title: 基本使用
 * desc: 基本使用方法
 */
import React, { useState } from 'react';
import PageWrapper from '../PageWrapper';
import { WKPickerDate } from '@wakeapp/components';

export default () => {
  const [date, setDate] = useState('');
  const handleChange = (evt: any) => {
    evt.detail.value && setDate(evt.detail.value);
  };

  return (
    <PageWrapper title="基本使用">
      <WKPickerDate
        style={{ width: '100%', padding: '4px 8px', cursor: 'pointer' }}
        value={date}
        onChange={handleChange}
      ></WKPickerDate>
    </PageWrapper>
  );
};
```

## 限定日期选择范围

```tsx
/**
 * title: 限定日期选择范围
 * desc: 限定日期选择范围
 */
import React, { useState } from 'react';
import PageWrapper from '../PageWrapper';
import { WKPickerDate } from '@wakeapp/components';

export default () => {
  const [date, setDate] = useState('');
  const handleChange = (evt: any) => {
    evt.detail.value && setDate(evt.detail.value);
  };

  return (
    <PageWrapper title="限定日期选择范围">
      <WKPickerDate
        style={{ width: '100%', padding: '4px 8px', cursor: 'pointer' }}
        value={date}
        start="2021-09-01"
        end="2022-09-01"
        onChange={handleChange}
      ></WKPickerDate>
    </PageWrapper>
  );
};
```

<API src='@wakeapp/components/WKPickerDate/index.d.ts'></API>
