import Ad from '_shared/Ad';
import Example from '_shared/Example';
import PageMeta from '_shared/PageMeta';
import LinkedComponents from '_shared/LinkedComponents';
import * as StaticComponents from './StaticComponents.example';

<PageMeta title="Static componentes" />

## Static components

In some places it's required to use some internal control for the calendar or some time input. Here you
are! You can use any sub-control of the pickers directly.

<Ad />

Also you can use our own HOC that is used for any picker which provides managing temporary
chosen date and submitting state logic.

**Warning:** Make sure, that _all_ your imports are consistent (or default or named) and **are not mixed**

# FIX ME

#### Static components example

You can reuse our logic if you needed some advanced accepting or clearing fuctionality. We are providing special
`useStaticState` for that. It returns you:

- `inputProps` - props to manage date input state, format and validation.
- `pickerProps` - props that should be spreaded directly to the component
- `wrapperProps` - props to manage accept, dismiss, clear and any modal/inline functionality.

<Example source={StaticComponents} />

#### API

<LinkedComponents components={['Calendar', 'ClockView']} />