Bootstrap Blazor enterprise-level UI component library

Select the day

Select the control based on the date of the day in 「day」as the base unit

Demo

2023 March

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8

<DatePickerBody @bind-Value="Value" OnConfirm="@OnConfirm" ShowFooter="false" />
<BlockLogger @ref="DateLogger" class="mt-3" />

@code {
    [NotNull]
    private BlockLogger? DateLogger { get; set; }

    private DateTime Value { get; set; } = DateTime.Today;

    private Task OnConfirm()
    {
        DateLogger.Log($"Value: {Value:yyyy-MM-dd}");
        return Task.CompletedTask;
    }
}

Select any point in time

You can choose any time

Demo

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

0
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

0
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

<TimePickerBody @bind-Value="@Value" OnConfirm="OnConfirm" />
<BlockLogger @ref="Logger" class="mt-3" />

@code {
    [NotNull]
    private BlockLogger? Logger { get; set; }

    private TimeSpan Value { get; set; } = DateTime.Now - DateTime.Today;

    private void OnConfirm()
    {
        Logger.Log($"Value: {Value:hh\\:mm\\:ss}");
    }
}

Data is bound in both directions

Click the confirm button to select the box value consistent with the text box value

Demo

TimeSpan

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

0
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

0
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

string

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

0
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

0
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

<div class="row g-3">
    <div class="col-12 col-sm-6">
        <div class="d-flex flex-column">
            <div class="mb-1"><code>TimeSpan</code></div>
            <TimePickerBody @bind-Value="@SpanValue" />
            <BootstrapInput Value="@SpanValue" TValue="TimeSpan" Formatter="@FormatterSpanString" Readonly="true" style="width: 180px; margin-top: 0.5rem;" />
        </div>
    </div>
    <div class="col-12 col-sm-6">
        <div class="d-flex flex-column">
            <div class="mb-1"><code>string</code></div>
            <TimePickerBody @bind-Value="@TimeValue" />
            <BootstrapInput Value="@TimeValue.ToString("hh\\:mm\\:ss")" TValue="string" Readonly="true" style="width: 180px; margin-top: 0.5rem;" />
        </div>
    </div>
</div>

@code {
    private TimeSpan TimeValue { get; set; } = DateTime.Now - DateTime.Today;

    private TimeSpan SpanValue { get; set; } = DateTime.Now.Subtract(DateTime.Today);

    private static string FormatterSpanString(TimeSpan ts)
    {
        return ts.ToString("hh\\:mm\\:ss");
    }
}

Client validation

Check data validity and prompt automatically based on custom validation rules

Demo

Value

2023 March

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8

@inject IStringLocalizer<DateTimePickerValidateDemo> Localizer

<ValidateForm Model="this">
    <div class="row g-3">
        <div class="col-12 col-sm-auto">
            <DateTimePicker @bind-Value="@Value" />
        </div>
        <div class="col-12 col-sm-auto align-self-end">
            <Button ButtonType="ButtonType.Submit" Text="@Localizer["SubmitText"]" Icon="fa-solid fa-floppy-disk" />
        </div>
    </div>
</ValidateForm>

@code {
    /// <summary>
    /// ModelValidateValue
    /// </summary>
    [Required]
    public DateTime? Value { get; set; }
}

Click on the pop-up date box

Select the control based on the date of the day in 「day」 as the base unit

Demo

2023 March

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8

<DateTimePicker TValue="DateTimeOffset?" Value="Value" />

@code {
    private DateTimeOffset? Value { get; set; } = DateTimeOffset.Now;
}

Data is bound in both directions

The values in the text box change as the date component time changes

Demo

2023 March

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8

<div class="row g-3">
    <div class="col-sm-6">
        <DateTimePicker @bind-Value="@BindValue" />
    </div>
    <div class="col-sm-6">
        <input class="form-control" @bind="@BindValueString" />
    </div>
</div>

@code {
    private DateTime? BindValue { get; set; } = DateTime.Today;

    private string BindValueString
    {
        get => BindValue.HasValue ? BindValue.Value.ToString("yyyy-MM-dd") : "";
        set => BindValue = DateTime.TryParse(value, out var d) ? d : null;
    }
}

Selector with time

Select the date and time in the same selector, click the confirm button and close the pop-up window

Demo

Set the value of the viewMode property to The DateTime of DatePickerViewMode.DateTime

Year

2020 - 2039

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8

2020	2021	2022	2023
2024	2025	2026	2027
2028	2029	2030	2031
2032	2033	2034	2035
2036	2037	2038	2039

Month

2023

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8

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

Date

2023 March

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8

DateTime

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

0
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

0
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

2023 March

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8

<div class="row g-3">
    <div class="col-12 col-sm-6">
        <DateTimePicker TValue="DateTime" ShowLabel="true" DisplayText="Year" ViewMode="DatePickerViewMode.Year" Format="yyyy" />
    </div>
    <div class="col-12 col-sm-6">
        <DateTimePicker TValue="DateTime" ShowLabel="true" DisplayText="Month" ViewMode="DatePickerViewMode.Month" Format="yyyy-MM" />
    </div>
    <div class="col-12 col-sm-6">
        <DateTimePicker TValue="DateTime" ShowLabel="true" DisplayText="Date" ViewMode="DatePickerViewMode.Date" Format="yyyy-MM-dd" />
    </div>
    <div class="col-12 col-sm-6">
        <DateTimePicker TValue="DateTime" ShowLabel="true" DisplayText="DateTime" ViewMode="DatePickerViewMode.DateTime" Format="yyyy-MM-dd HH:mm:ss" />
    </div>
</div>

Allow empty time

More for conditional selection

Demo

The emptybutton automatically appears when the binding value is DateTime? for an empty type

2023 March

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8

<div class="row g-3">
    <div class="col-12 col-sm-8">
        <DateTimePicker @bind-Value="@BindNullValue" />
    </div>
    <div class="col-12 col-sm-4">
        <Display TValue="string" Value="@GetNullValueString" />
    </div>
</div>

@code {
    private DateTime? BindNullValue { get; set; }

    private string GetNullValueString => BindNullValue.HasValue ? BindNullValue.Value.ToString("yyyy-MM-dd") : "";
}

The label is displayed

When you are a form component, the label in front of the component is displayed

Demo

Set the DisplayText property value to select time

The pre-label explicit rules are consistent with the BootstrapInput component of the [portal]

Select the time

2023 March

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8

@inject IStringLocalizer<DateTimePickerShowLabel> Localizer

<DateTimePicker ShowLabel="true" DisplayText="@Localizer["DisplayText"]" @bind-Value="@BindNullValue" />

@code {
    private DateTime? BindNullValue { get; set; }
}

Disable

When you set the IsDisabled property value to true, the component suppresses input

Demo

2023 March

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8

<div class="row g-3">
    <div class="col-12 col-sm-6">
        <DateTimePicker TValue="DateTime" IsDisabled="IsDisabled" />
    </div>
    <div class="col-12 col-sm-6">
        <Switch @bind-Value="@IsDisabled" />
    </div>
</div>

@code {
    private bool IsDisabled { get; set; } = true;
}

Sidebar with shortcuts

When you set the ShowSidebar property value to true, the component displays the shortcut sidebar

Demo

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

0
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

0
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

2023 March

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8

<DateTimePicker TValue="DateTime" ShowSidebar="true" ViewMode="DatePickerViewMode.DateTime" />

Set the range of values

Set the MinValue property value to the MaxValue limit the range of optional values, in this case setting the range to 45days

Demo

2023 March

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8

<DateTimePicker TValue="DateTime"
                ViewMode="DatePickerViewMode.Date"
                Value="@(DateTime.Today.AddDays(3 - DateTime.Today.Day))"
                MinValue="@(DateTime.Today.AddDays(1 - DateTime.Today.Day))"
                MaxValue="@(DateTime.Today.AddDays(46 - DateTime.Today.Day))" />

Auto close

Auto close the popup window by se AutoClose to true

Demo

2023 March

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8

<DateTimePicker AutoClose="false" TValue="DateTime" ViewMode="DatePickerViewMode.Date" Value="@(DateTime.Today.AddDays(3 - DateTime.Today.Day))" />

InputGroup

combox with BootstrapInputGroupLabel inside BootstrapInputGroupLabel

Demo

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8

2023 March

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8

Suffix

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8

@inject IStringLocalizer<DateTimePickerGroup> Localizer

<div class="row g-3">
    <div class="col-12 col-sm-6 col-md-4">
        <BootstrapInputGroup>
            <BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupPrevLabel"]" />
            <DateTimePicker TValue="DateTime" ViewMode="DatePickerViewMode.Date" />
        </BootstrapInputGroup>
    </div>
    <div class="col-12 col-sm-6 col-md-4">
        <BootstrapInputGroup>
            <DateTimePicker TValue="DateTime" ViewMode="DatePickerViewMode.Date" />
            <BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupSuffixLabel"]" />
        </BootstrapInputGroup>
    </div>
    <div class="col-12 col-sm-6 col-md-4">
        <BootstrapInputGroup>
            <BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupPrevLabel"]" />
            <DateTimePicker TValue="DateTime" ViewMode="DatePickerViewMode.Date" />
            <BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupSuffixLabel"]" />
        </BootstrapInputGroup>
    </div>
</div>

DatePicker

Used to select or enter a date

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Attributes

Event

Bootstrap Blazor Component library updated to 7.4.4-beta01

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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	29	30	31	1
2	3	4	5	6	7	8