withDayPicker example (single day):

```js
initialState={isOpen: false, dates: {from: new Date(2018, 3, 5), to: undefined}, month: 3, year: 2018};
<div>
	<WithDayPicker
		isOpen={state.isOpen}
		onApply={(e) => {
			setState({
				isOpen: false,
				dates: e
			});
		}}
		close={()=>{setState({isOpen: false})}}
		onClickOutside={(e) => {
			setState({isOpen: false});
		}}
		disabledDays={[
			new Date(2018, 3, 12),
			new Date(2018, 3, 2),
			{
				from: new Date(2018, 3, 20),
				to: new Date(2018, 3, 25),
			},
		]}
		range={state.dates}
		month={state.month}
		year={state.year}
		GA={{
			category: 'Test'
		}}
		actionId='Action Id'
	/>
	<button onClick={()=>{setState({isOpen: true})}}>Open</button>
</div>
```

withDayPicker example (date range):

```js
initialState={isOpen: false, dates: {from: new Date(2018, 3, 5), to: new Date(2018, 3, 8)}, month: 3, year: 2018};
<div>
	<WithDayPicker
		dateRange
		isOpen={state.isOpen}
		onApply={(e) => {
			setState({
				isOpen: false,
				dates: e
			});
		}}
		close={()=>{setState({isOpen: false})}}
		onClickOutside={(e) => {
			setState({isOpen: false});
		}}
		disabledDays={[
			new Date(2018, 3, 12),
			new Date(2018, 3, 2),
			{
				from: new Date(2018, 3, 20),
				to: new Date(2018, 3, 25),
			},
		]}
		range={state.dates}
		month={state.month}
		year={state.year}
		GA={{
			category: 'Test'
		}}
		actionId='Action Id'
	/>
	<button onClick={()=>{setState({isOpen: true})}}>Open</button>
</div>
```

withDayPicker example (modal):

_Note the `position` on the parent._

```js
initialState={isOpen: false, dates: {from: new Date(2018, 3, 5), to: new Date(2018, 3, 8)}, month: 3, year: 2018};
<div style={{position: 'relative'}}>
	<WithDayPicker
		inModal
		dateRange
		isOpen={state.isOpen}
		onApply={(e) => {
			setState({
				isOpen: false,
				dates: e
			});
		}}
		close={()=>{setState({isOpen: false})}}
		onClickOutside={(e) => {
			setState({isOpen: false});
		}}
		range={state.dates}
		disabledDays={[
			new Date(2018, 3, 12),
			new Date(2018, 3, 2),
			{
				from: new Date(2018, 3, 20),
				to: new Date(2018, 3, 25),
			},
		]}
		dateRange
		onClear={(e) => {
			setState({dates: {from: undefined, to: undefined}, isOpen: false})
		}}
		yearRange={{
			min: 2010,
			max: 2030
		}}
		yearsToDisplay={10}
		month={state.month}
		year={state.year}
		shortcuts="current"
		GA={{
			category: 'Test'
		}}
		actionId='Action Id'
	/>
	<button onClick={()=>{setState({isOpen: true})}}>Open</button>
</div>
```

withDayPicker month only
```js
initialState={isOpen: false, dates: {from: new Date(2018, 3, 5), to: undefined}, month: 3, year: 2018};
<div>
	<WithDayPicker
		isOpen={state.isOpen}
		onApply={(e) => {
			setState({
				isOpen: false,
				dates: e
			});
		}}
		close={()=>{setState({isOpen: false})}}
		onClickOutside={(e) => {
			setState({isOpen: false});
		}}
		disabledDays={[
			new Date(2018, 3, 12),
			new Date(2018, 3, 2),
			{
				from: new Date(2018, 3, 20),
				to: new Date(2018, 3, 25),
			},
		]}
		range={state.dates}
		month={state.month}
		year={state.year}
		GA={{
			category: 'Test'
		}}
		actionId='Action Id'
		view="month"
		onMonthSelected={(month, year) => {
			setState({ dates: { from: new Date(year, month, 1), to: undefined }, month, year });
		}}
	/>
	<button onClick={()=>{setState({isOpen: true})}}>Open</button>
</div>
```

### Notes

Days can be disabled in the following ways:

* Single day:
	`disabledDays={[ new Date(2018, 3, 12) ]}`
* Date range:
	`disabledDays={[{ from: new Date(2018, 3, 20), to: new Date(2018, 3, 25) }]}`
* Allowed range:
	`disabledDays={[{ before: new Date(2018, 3, 20), after: new Date(2018, 3, 25) }]}`

Combining these props is also possible.