Date Picker

Date pickers allow users to select a date from a calendar.

1
import {
2
  DatePicker,
3
  DatePickerLabel,
4
  DatePickerInput,
5
  DatePickerCalendar,
6
} from '@cerberus/react'

Usage

The DatePicker component is a controlled component that allows users to select a single date or a range of dates. It consists of a label, input field, and a calendar view.

Single Date Picker

Start date

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	1

Date Range Picker

To create a date range picker, set the selectionMode prop to range on the DatePicker component and use the RangePickerInput component as the input field.

Search range

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	1

Using Default Values

You can set the default values for the range date picker by passing the defaultValue prop to the RangePickerInput component in the form of an Array of two date strings.

Search range

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	1

Primitives

You can utilize the primitive components to customize the date picker.

Component	Description
DatePickerRoot	The main container for the date-picker items.
DatePickerLabel	The label for the date-picker.
DatePickerControl	The control for the date-picker.
DatePickerInput	The input field and trigger for the date-picker.
DatePickerTrigger	The trigger for the date-picker.
DatePickerClearTrigger	The trigger to clear the date-picker.
DatePickerPositioner	The positioner for the date-picker.
DatePickerContent	The content of the date-picker calendar.
DatePickerYearSelect	The select input for the year in the date-picker.
DatePickerMonthSelect	The select input for the month in the date-picker.
DatePickerView	The container (view) of the calendar.
DatePickerContext	The context provider for the date-picker calendar.
DatePickerViewControl	The triggers that update the calendar in the view.
DatePickerPrevTrigger	The trigger to navigate to the previous view.
DatePickerNextTrigger	The trigger to navigate to the next view.
DatePickerViewTrigger	The trigger to navigate to a specific view.
DatePickerRangeText	The text that displays the range of dates selected.
DatePickerTable	The table that contains the calendar.
DatePickerTableRow	The row of the calendar table.
DatePickerTableHead	The header of the calendar table.
DatePickerTableHeader	The header cell of the calendar table.
DatePickerTableBody	The body of the calendar table.
DatePickerTableCell	The cell of the calendar table.
DatePickerTableTrigger	The trigger of the cell in the calendar table.

API

Props

DatePicker

The DatePicker component accepts all the props of the DatePickerRoot primitive

DatePickerLabel

The DatePickerLabel component accepts all the props of the DatePickerLabel primitive

DatePickerInput

The DatePickerInput component accepts all the props of the DatePickerInputEl primitive

DatePickerCalendar

The DatePickerCalendar component is an abstraction of the primitives and accepts the following props:

Name	Default	Description
withModal	`false`	Whether the Picker is used within a `Dialog`.

Parts

The DatePickerParts API is an Object containing the full family of components.

Name	Description
Root	The `DatePickerRoot` component and main container for the date-picker items.
Label	The `DatePickerLabel` component and label for the date-picker.
Control	The `DatePickerControl` component and control for the date-picker.
Input	The `DatePickerInput` component and input field and trigger for the date-picker.
Trigger	The `DatePickerRoot` component and trigger for the date-picker.
ClearTrigger	The `DatePickerClearTrigger` component and trigger to clear the date-picker.
Positioner	The `DatePickerPositioner` component and positioner for the date-picker.
Content	The `DatePickerContent` component and content of the date-picker calendar.
YearSelect	The `DatePickerYearSelect` component and select input for the year in the date-picker.
MonthSelect	The `DatePickerMonthSelect` component and select input for the month in the date-picker.
View	The `DatePickerView` component and container (view) of the calendar.
Context	The `DatePickerContext` component and context provider for the date-picker calendar.
ViewControl	The `DatePickerViewControl` component and triggers that update the calendar in the view.
PrevTrigger	The `DatePickerPrevTrigger` component and trigger to navigate to the previous view.
NextTrigger	The `DatePickerNextTrigger` component and trigger to navigate to the next view.
ViewTrigger	The `DatePickerViewTrigger` component and trigger to navigate to a specific view.
RangeText	The `DatePickerRangeText` component and text that displays the range of dates selected.
Table	The `DatePickerTable` component and table that contains the calendar.
TableRow	The `DatePickerTableRow` component and row of the calendar table.
TableHead	The `DatePickerTableHead` component and header of the calendar table.
TableHeader	The `DatePickerTableHeader` component and header cell of the calendar table.
TableBody	The `DatePickerTableBody` component and body of the calendar table.
TableCell	The `DatePickerTableCell` component and cell of the calendar table.
TableTrigger	The `DatePickerTableTrigger` component and trigger of the cell in the calendar table.

1
import {
2
  DatePicker,
3
  DatePickerLabel,
4
  DatePickerInput,
5
  DatePickerCalendar,
6
} from '@cerberus/react'

Usage

The DatePicker component is a controlled component that allows users to select a single date or a range of dates. It consists of a label, input field, and a calendar view.

Single Date Picker

Start date

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	1

Date Range Picker

To create a date range picker, set the selectionMode prop to range on the DatePicker component and use the RangePickerInput component as the input field.

Search range

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	1

Using Default Values

You can set the default values for the range date picker by passing the defaultValue prop to the RangePickerInput component in the form of an Array of two date strings.

Search range

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	1

Primitives

You can utilize the primitive components to customize the date picker.

Component	Description
DatePickerRoot	The main container for the date-picker items.
DatePickerLabel	The label for the date-picker.
DatePickerControl	The control for the date-picker.
DatePickerInput	The input field and trigger for the date-picker.
DatePickerTrigger	The trigger for the date-picker.
DatePickerClearTrigger	The trigger to clear the date-picker.
DatePickerPositioner	The positioner for the date-picker.
DatePickerContent	The content of the date-picker calendar.
DatePickerYearSelect	The select input for the year in the date-picker.
DatePickerMonthSelect	The select input for the month in the date-picker.
DatePickerView	The container (view) of the calendar.
DatePickerContext	The context provider for the date-picker calendar.
DatePickerViewControl	The triggers that update the calendar in the view.
DatePickerPrevTrigger	The trigger to navigate to the previous view.
DatePickerNextTrigger	The trigger to navigate to the next view.
DatePickerViewTrigger	The trigger to navigate to a specific view.
DatePickerRangeText	The text that displays the range of dates selected.
DatePickerTable	The table that contains the calendar.
DatePickerTableRow	The row of the calendar table.
DatePickerTableHead	The header of the calendar table.
DatePickerTableHeader	The header cell of the calendar table.
DatePickerTableBody	The body of the calendar table.
DatePickerTableCell	The cell of the calendar table.
DatePickerTableTrigger	The trigger of the cell in the calendar table.

API

Props

DatePicker

The DatePicker component accepts all the props of the DatePickerRoot primitive

DatePickerLabel

The DatePickerLabel component accepts all the props of the DatePickerLabel primitive

DatePickerInput

The DatePickerInput component accepts all the props of the DatePickerInputEl primitive

DatePickerCalendar

The DatePickerCalendar component is an abstraction of the primitives and accepts the following props:

Name	Default	Description
withModal	`false`	Whether the Picker is used within a `Dialog`.

Parts

The DatePickerParts API is an Object containing the full family of components.

Name	Description
Root	The `DatePickerRoot` component and main container for the date-picker items.
Label	The `DatePickerLabel` component and label for the date-picker.
Control	The `DatePickerControl` component and control for the date-picker.
Input	The `DatePickerInput` component and input field and trigger for the date-picker.
Trigger	The `DatePickerRoot` component and trigger for the date-picker.
ClearTrigger	The `DatePickerClearTrigger` component and trigger to clear the date-picker.
Positioner	The `DatePickerPositioner` component and positioner for the date-picker.
Content	The `DatePickerContent` component and content of the date-picker calendar.
YearSelect	The `DatePickerYearSelect` component and select input for the year in the date-picker.
MonthSelect	The `DatePickerMonthSelect` component and select input for the month in the date-picker.
View	The `DatePickerView` component and container (view) of the calendar.
Context	The `DatePickerContext` component and context provider for the date-picker calendar.
ViewControl	The `DatePickerViewControl` component and triggers that update the calendar in the view.
PrevTrigger	The `DatePickerPrevTrigger` component and trigger to navigate to the previous view.
NextTrigger	The `DatePickerNextTrigger` component and trigger to navigate to the next view.
ViewTrigger	The `DatePickerViewTrigger` component and trigger to navigate to a specific view.
RangeText	The `DatePickerRangeText` component and text that displays the range of dates selected.
Table	The `DatePickerTable` component and table that contains the calendar.
TableRow	The `DatePickerTableRow` component and row of the calendar table.
TableHead	The `DatePickerTableHead` component and header of the calendar table.
TableHeader	The `DatePickerTableHeader` component and header cell of the calendar table.
TableBody	The `DatePickerTableBody` component and body of the calendar table.
TableCell	The `DatePickerTableCell` component and cell of the calendar table.
TableTrigger	The `DatePickerTableTrigger` component and trigger of the cell in the calendar table.

1
import {
2
  DatePicker,
3
  DatePickerLabel,
4
  DatePickerInput,
5
  DatePickerCalendar,
6
} from '@cerberus/react'

Usage

The DatePicker component is a controlled component that allows users to select a single date or a range of dates. It consists of a label, input field, and a calendar view.

Single Date Picker

Start date

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	1

Date Range Picker

To create a date range picker, set the selectionMode prop to range on the DatePicker component and use the RangePickerInput component as the input field.

Search range

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	1

Using Default Values

You can set the default values for the range date picker by passing the defaultValue prop to the RangePickerInput component in the form of an Array of two date strings.

Search range

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	1

Primitives

You can utilize the primitive components to customize the date picker.

Component	Description
DatePickerRoot	The main container for the date-picker items.
DatePickerLabel	The label for the date-picker.
DatePickerControl	The control for the date-picker.
DatePickerInput	The input field and trigger for the date-picker.
DatePickerTrigger	The trigger for the date-picker.
DatePickerClearTrigger	The trigger to clear the date-picker.
DatePickerPositioner	The positioner for the date-picker.
DatePickerContent	The content of the date-picker calendar.
DatePickerYearSelect	The select input for the year in the date-picker.
DatePickerMonthSelect	The select input for the month in the date-picker.
DatePickerView	The container (view) of the calendar.
DatePickerContext	The context provider for the date-picker calendar.
DatePickerViewControl	The triggers that update the calendar in the view.
DatePickerPrevTrigger	The trigger to navigate to the previous view.
DatePickerNextTrigger	The trigger to navigate to the next view.
DatePickerViewTrigger	The trigger to navigate to a specific view.
DatePickerRangeText	The text that displays the range of dates selected.
DatePickerTable	The table that contains the calendar.
DatePickerTableRow	The row of the calendar table.
DatePickerTableHead	The header of the calendar table.
DatePickerTableHeader	The header cell of the calendar table.
DatePickerTableBody	The body of the calendar table.
DatePickerTableCell	The cell of the calendar table.
DatePickerTableTrigger	The trigger of the cell in the calendar table.

API

Props

DatePicker

The DatePicker component accepts all the props of the DatePickerRoot primitive

DatePickerLabel

The DatePickerLabel component accepts all the props of the DatePickerLabel primitive

DatePickerInput

The DatePickerInput component accepts all the props of the DatePickerInputEl primitive

DatePickerCalendar

The DatePickerCalendar component is an abstraction of the primitives and accepts the following props:

Name	Default	Description
withModal	`false`	Whether the Picker is used within a `Dialog`.

Parts

The DatePickerParts API is an Object containing the full family of components.

Name	Description
Root	The `DatePickerRoot` component and main container for the date-picker items.
Label	The `DatePickerLabel` component and label for the date-picker.
Control	The `DatePickerControl` component and control for the date-picker.
Input	The `DatePickerInput` component and input field and trigger for the date-picker.
Trigger	The `DatePickerRoot` component and trigger for the date-picker.
ClearTrigger	The `DatePickerClearTrigger` component and trigger to clear the date-picker.
Positioner	The `DatePickerPositioner` component and positioner for the date-picker.
Content	The `DatePickerContent` component and content of the date-picker calendar.
YearSelect	The `DatePickerYearSelect` component and select input for the year in the date-picker.
MonthSelect	The `DatePickerMonthSelect` component and select input for the month in the date-picker.
View	The `DatePickerView` component and container (view) of the calendar.
Context	The `DatePickerContext` component and context provider for the date-picker calendar.
ViewControl	The `DatePickerViewControl` component and triggers that update the calendar in the view.
PrevTrigger	The `DatePickerPrevTrigger` component and trigger to navigate to the previous view.
NextTrigger	The `DatePickerNextTrigger` component and trigger to navigate to the next view.
ViewTrigger	The `DatePickerViewTrigger` component and trigger to navigate to a specific view.
RangeText	The `DatePickerRangeText` component and text that displays the range of dates selected.
Table	The `DatePickerTable` component and table that contains the calendar.
TableRow	The `DatePickerTableRow` component and row of the calendar table.
TableHead	The `DatePickerTableHead` component and header of the calendar table.
TableHeader	The `DatePickerTableHeader` component and header cell of the calendar table.
TableBody	The `DatePickerTableBody` component and body of the calendar table.
TableCell	The `DatePickerTableCell` component and cell of the calendar table.
TableTrigger	The `DatePickerTableTrigger` component and trigger of the cell in the calendar table.

1
import {
2
  DatePicker,
3
  DatePickerLabel,
4
  DatePickerInput,
5
  DatePickerCalendar,
6
} from '@cerberus/react'

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	1

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	1

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	1

Component	Description
DatePickerRoot	The main container for the date-picker items.
DatePickerLabel	The label for the date-picker.
DatePickerControl	The control for the date-picker.
DatePickerInput	The input field and trigger for the date-picker.
DatePickerTrigger	The trigger for the date-picker.
DatePickerClearTrigger	The trigger to clear the date-picker.
DatePickerPositioner	The positioner for the date-picker.
DatePickerContent	The content of the date-picker calendar.
DatePickerYearSelect	The select input for the year in the date-picker.
DatePickerMonthSelect	The select input for the month in the date-picker.
DatePickerView	The container (view) of the calendar.
DatePickerContext	The context provider for the date-picker calendar.
DatePickerViewControl	The triggers that update the calendar in the view.
DatePickerPrevTrigger	The trigger to navigate to the previous view.
DatePickerNextTrigger	The trigger to navigate to the next view.
DatePickerViewTrigger	The trigger to navigate to a specific view.
DatePickerRangeText	The text that displays the range of dates selected.
DatePickerTable	The table that contains the calendar.
DatePickerTableRow	The row of the calendar table.
DatePickerTableHead	The header of the calendar table.
DatePickerTableHeader	The header cell of the calendar table.
DatePickerTableBody	The body of the calendar table.
DatePickerTableCell	The cell of the calendar table.
DatePickerTableTrigger	The trigger of the cell in the calendar table.

Name	Default	Description
withModal	`false`	Whether the Picker is used within a `Dialog`.

Parts

The DatePickerParts API is an Object containing the full family of components.

Name	Description
Root	The `DatePickerRoot` component and main container for the date-picker items.
Label	The `DatePickerLabel` component and label for the date-picker.
Control	The `DatePickerControl` component and control for the date-picker.
Input	The `DatePickerInput` component and input field and trigger for the date-picker.
Trigger	The `DatePickerRoot` component and trigger for the date-picker.
ClearTrigger	The `DatePickerClearTrigger` component and trigger to clear the date-picker.
Positioner	The `DatePickerPositioner` component and positioner for the date-picker.
Content	The `DatePickerContent` component and content of the date-picker calendar.
YearSelect	The `DatePickerYearSelect` component and select input for the year in the date-picker.
MonthSelect	The `DatePickerMonthSelect` component and select input for the month in the date-picker.
View	The `DatePickerView` component and container (view) of the calendar.
Context	The `DatePickerContext` component and context provider for the date-picker calendar.
ViewControl	The `DatePickerViewControl` component and triggers that update the calendar in the view.
PrevTrigger	The `DatePickerPrevTrigger` component and trigger to navigate to the previous view.
NextTrigger	The `DatePickerNextTrigger` component and trigger to navigate to the next view.
ViewTrigger	The `DatePickerViewTrigger` component and trigger to navigate to a specific view.
RangeText	The `DatePickerRangeText` component and text that displays the range of dates selected.
Table	The `DatePickerTable` component and table that contains the calendar.
TableRow	The `DatePickerTableRow` component and row of the calendar table.
TableHead	The `DatePickerTableHead` component and header of the calendar table.
TableHeader	The `DatePickerTableHeader` component and header cell of the calendar table.
TableBody	The `DatePickerTableBody` component and body of the calendar table.
TableCell	The `DatePickerTableCell` component and cell of the calendar table.
TableTrigger	The `DatePickerTableTrigger` component and trigger of the cell in the calendar table.

Jan	Feb	Mar	Apr
May	Jun	Jul	Aug
Sep	Oct	Nov	Dec

2019	2020	2021	2022
2023	2024	2025	2026
2027	2028	2029	2030

Jan	Feb	Mar	Apr
May	Jun	Jul	Aug
Sep	Oct	Nov	Dec

2019	2020	2021	2022
2023	2024	2025	2026
2027	2028	2029	2030

Jan	Feb	Mar	Apr
May	Jun	Jul	Aug
Sep	Oct	Nov	Dec

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	1

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	1

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	1

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	1

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	1

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	1

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	1

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	1

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	1

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	1

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	1

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	1

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	1

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	1

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	1

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	1

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	1

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	1

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	1

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	1

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	1

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	1

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	1

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	1

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	1

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	1

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	1

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	1

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	1

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	1