---
name: DateSelect
route: /components/dateselect
menu: Components
---

import { Playground, PropsTable } from 'docz';
import { DaySelect, MonthSelect, YearSelect } from './';

# DateSelect

## Usage

`<DaySelect />`, `<MonthSelect />` and `<YearSelect />` are just wrappers around the`<Select />` component with predefined options. They accept the same props as `<Select />` with the exception of `<YearSelect />`, which can additionally accept `minYear` and `maxYear`.

```javascript
import { DaySelect, MonthSelect, YearSelect } from '@snowpak/powpow';

export default () => (
  <DaySelect />
);

export default () => (
  <MonthSelect />
);

export default () => (
  <YearSelect />
);
```

## Props

### `<YearSelect />`

<PropsTable of={YearSelect} />

## Examples

### DaySelect

<Playground>
  <DaySelect
    selectProps={{ onChange: event => alert(event.target.value) }}
    data-cy="sp-daySelect"
  />
</Playground>

### MonthSelect

<Playground>
  <MonthSelect
    selectProps={{ onChange: event => alert(event.target.value) }}
    data-cy="sp-monthSelect"
  />
</Playground>

### YearSelect

<Playground>
  <YearSelect
    selectProps={{ onChange: event => alert(event.target.value) }}
    data-cy="sp-yearSelect"
  />
</Playground>

### YearSelect with custom date

<Playground>
  <YearSelect
    minYear={2019}
    maxYear={2019 + 20}
    data-cy="sp-yearSelect--customDate"
  />
</Playground>

### Combined

<Playground
  style={{
    display: 'flex',
  }}
>
  <DaySelect className="mr-1" data-cy="sp-daySelect--combined" />
  <MonthSelect className="mr-1" data-cy="sp-monthSelect--combined" />
  <YearSelect data-cy="sp-yearSelect--combined" />
</Playground>