Day Picker - Date Range
```js
initialState={dates: {from: new Date(2018, 3, 1), to: new Date(2018, 3, 7)}};
<DayPicker
	yearRange={{ min: 2000, max: 2030}}
	yearsToDisplay={10}
	dateRange={true}
	style={{
		width: '70%'
	}}
	onSelectedDate={()=>{}}
	range={state.dates}
	placeholder="Select range..."
	GA={{
		category: 'Test',
		actionId: 'Test'
	}}
/>
```
Day Picker - Single value
```js
initialState={dates: {from: new Date(2018, 3, 1), to: undefined}};
<DayPicker
	range={state.dates}
	yearRange={{ min: 2000, max: 2030}}
	style={{
		width: '70%'
	}}
	GA={{
		category: 'Test',
		actionId: 'Test'
	}}
	onSelectedDate={()=>{}}
/>
```

Day Picker - Single value with clear option disabled
```js
initialState={dates: {from: new Date(2018, 3, 1), to: undefined}};
<DayPicker
	range={state.dates}
	yearRange={{ min: 2000, max: 2030}}
	style={{
		width: '70%'
	}}
	onSelectedDate={()=>{}}
	allowClear={false}
	GA={{
		category: 'Test',
		actionId: 'Test'
	}}
/>
```

Day Picker - Display Format
```js
initialState={dates: {from: new Date(2018, 3, 1), to: undefined}};
<DayPicker
	range={state.dates}
	yearRange={{ min: 2000, max: 2030}}
	style={{
		width: '70%'
	}}
	onSelectedDate={()=>{}}
	displayFormat="friendlyShortWithYear"
	GA={{
		category: 'Test',
		actionId: 'Test'
	}}
/>
```

Day Picker - Error
```js
initialState={dates: {from: new Date(2018, 3, 1), to: undefined}};
<DayPicker
	range={state.dates}
	yearRange={{ min: 2000, max: 2030}}
	style={{
		width: '70%'
	}}
	onSelectedDate={()=>{}}
	displayFormat="friendlyShortWithYear"
	error
	GA={{
		category: 'Test',
		actionId: 'Test'
	}}
/>
```

Day Picker - Disabled
```js
initialState={dates: {from: new Date(2018, 3, 1), to: undefined}};
<DayPicker
	range={state.dates}
	yearRange={{ min: 2000, max: 2030}}
	style={{
		width: '70%'
	}}
	onSelectedDate={()=>{}}
	displayFormat="friendlyShortWithYear"
	disabled
	GA={{
		category: 'Test',
		actionId: 'Test'
	}}
/>
```

Day Picker - onBlur (when closing the day picker)
```js
initialState={dates: {from: new Date(2018, 3, 1), to: undefined}};
<DayPicker
	range={state.dates}
	yearRange={{ min: 2000, max: 2030}}
	style={{
		width: '70%'
	}}
	onSelectedDate={()=>{}}
	displayFormat="friendlyShortWithYear"
	onBlur={() => {alert('Blurred')}}
	GA={{
		category: 'Test',
		actionId: 'Test'
	}}
/>
```


Day Picker - disable single day (5th April)
```js
initialState={dates: {from: new Date(2018, 3, 1), to: undefined}};
<DayPicker
	range={state.dates}
	yearRange={{ min: 2000, max: 2030}}
	style={{
		width: '70%'
	}}
	onSelectedDate={dates=>setState({dates})}
	displayFormat="friendlyShortWithYear"
	disabledDays={[
		new Date(2018, 3, 5)
	]}
	GA={{
		category: 'Test',
		actionId: 'Test'
	}}
/>
```

Day Picker - disable set of days (16th - 22nd April)
```js
initialState={dates: {from: new Date(2018, 3, 1), to: undefined}};
<DayPicker
	range={state.dates}
	yearRange={{ min: 2000, max: 2030}}
	style={{
		width: '70%'
	}}
	onSelectedDate={dates=>setState({dates})}
	displayFormat="friendlyShortWithYear"
	disabledDays={[
		{ from: new Date(2018, 3, 16), to: new Date(2018, 3, 22)}
	]}
	GA={{
		category: 'Test',
		actionId: 'Test'
	}}
/>

```
Day Picker - disable everything before and after a date (before 16th and after 22nd April)
```js
initialState={dates: {from: new Date(2018, 3, 1), to: undefined}};
<DayPicker
	range={state.dates}
	yearRange={{ min: 2000, max: 2030}}
	style={{
		width: '70%'
	}}
	onSelectedDate={dates=>setState({dates})}
	displayFormat="friendlyShortWithYear"
	disabledDays={[
		{ before: new Date(2018, 3, 16), after: new Date(2018, 3, 22)}
	]}
	GA={{
		category: 'Test',
		actionId: 'Test'
	}}
/>
```
Note: It is also possible to mix different disabled day object formats together. E.g.

```js
initialState={dates: {from: new Date(2018, 3, 1), to: undefined}};
<DayPicker
	range={state.dates}
	yearRange={{ min: 2000, max: 2030}}
	style={{
		width: '70%'
	}}
	onSelectedDate={dates=>setState({dates})}
	displayFormat="friendlyShortWithYear"
	disabledDays={[
			{ from: new Date(2018, 3, 16), to: new Date(2018, 3, 22)},
			{ before: new Date(2018, 3, 16), after: new Date(2018, 3, 22)},
			new Date(2018, 2, 11)
	]}
	GA={{
		category: 'Test',
		actionId: 'Test'
	}}
/>
```
Day Picker with select dropdowns for month and year using option isDateSelect set to true
```js
initialState={dates: {from: new Date(2018, 3, 1), to: undefined}};
<DayPicker
	range={state.dates}
	yearRange={{ min: 2018, max: 2022}}
	style={{
		width: '40%'
	}}
	GA={{
		category: 'Test',
		actionId: 'Test'
	}}
	onSelectedDate={dates=>setState({dates})}
	allowClear={false}
	isDateSelect={true}
/>
```
Day Picker - typeable
```js
initialState={dates: {from: new Date(2018, 3, 1), to: undefined}};
<DayPicker
	range={state.dates}
	yearRange={{ min: 2000, max: 2030}}
	style={{
		width: '70%'
	}}
	GA={{
		category: 'Test',
		actionId: 'Test'
	}}
	onSelectedDate={dates=>setState({dates})}
	typeable
/>
```