Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

Example Razor C#Video

DatePicker

Used to select or enter a date

Select the day

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

Demo

2023 January

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	9	10	11

<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

<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

string

<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 January

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	9	10	11

@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 January

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	9	10	11

<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 January

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	9	10	11

<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
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	9	10	11

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
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	9	10	11

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

Date

2023 January

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	9	10	11

DateTime

2023 January

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	9	10	11

<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 January

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	9	10	11

<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 January

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	9	10	11

@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 January

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	9	10	11

<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

2023 January

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	9	10	11

<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 January

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	9	10	11

<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 January

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	9	10	11

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

InputGroup

combox with BootstrapInputGroupLabel inside BootstrapInputGroupLabel

Demo

2023 January

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	9	10	11

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	9	10	11

Suffix

2023 January

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	9	10	11

Suffix

@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>

Attributes

Event

@page "/datetimepickers"

<h3>DatePicker</h3>

<h4>Used to select or enter a date</h4>

<DemoBlock Title="Select the day" Introduction="Select the control based on the date of the day in 「day」as the base unit" Name="Normal" Demo="typeof(Demos.DateTimePicker.DatePickerBodyDemo)" />

<DemoBlock Title="Select any point in time" Introduction="You can choose any time" Name="ValueChanged" Demo="typeof(Demos.DateTimePicker.TimePickerBodyBindValueDemo)" />

<DemoBlock Title="Data is bound in both directions" Introduction="Click the confirm button to select the box value consistent with the text box value" Name="Time" Demo="typeof(Demos.DateTimePicker.TimePickerBodyDemo)" />

<DemoBlock Title="Client validation" Introduction="Check data validity and prompt automatically based on custom validation rules" Name="ValidateForm" Demo="typeof(Demos.DateTimePicker.DateTimePickerValidateDemo)" />

<DemoBlock Title="Click on the pop-up date box" Introduction="Select the control based on the date of the day in 「day」 as the base unit" Name="DateTimeOffset" Demo="typeof(Demos.DateTimePicker.DateTimePickerDateTimeOffsetDemo)" />

<DemoBlock Title="Data is bound in both directions" Introduction="The values in the text box change as the date component time changes" Name="BindValue" Demo="typeof(Demos.DateTimePicker.DateTimePickerBindValueDemo)" />

<DemoBlock Title="Selector with time" Introduction="Select the date and time in the same selector, click the confirm button and close the pop-up window" Name="ViewMode" Demo="typeof(Demos.DateTimePicker.DateTimePickerViewMode)">
    <p>Set the value of the <code>viewMode</code> property to The <code>DateTime</code> of DatePickerViewMode.DateTime</p>
</DemoBlock>

<DemoBlock Title="Allow empty time" Introduction="More for conditional selection" Name="NullValue" Demo="typeof(Demos.DateTimePicker.DateTimePickerNullValue)">
    <p>The <b>empty</b>button automatically appears when the binding value is <code>DateTime?</code> for an empty type</p>
</DemoBlock>

<DemoBlock Title="The label is displayed" Introduction="When you are a form component, the label in front of the component is displayed" Name="ShowLabel" Demo="typeof(Demos.DateTimePicker.DateTimePickerShowLabel)">
    <p>Set the <code>DisplayText</code> property value to <code>select time</code></p>
    <p>The pre-label explicit rules are consistent with the <code>BootstrapInput</code> component  of the <a href='inputs'>[portal]</a></p>
</DemoBlock>

<DemoBlock Title="Disable" Introduction="When you set the <code>IsDisabled</code> property value to <code>true</code>, the component suppresses input" Name="Disalbed" Demo="typeof(Demos.DateTimePicker.DateTimePickerDisalbed)" />

<DemoBlock Title="Sidebar with shortcuts" Introduction="When you set the <code>ShowSidebar</code> property value to <code>true</code>, the component displays the shortcut sidebar" Name="ShowSidebar" Demo="typeof(Demos.DateTimePicker.DateTimePickerShowSidebar)" />

<DemoBlock Title="Set the range of values" Introduction="Set the <code>MinValue</code> property value to the <code>MaxValue</code> limit the range of optional values, in this case setting the range to <b>45</b>days" Name="MinValue" Demo="typeof(Demos.DateTimePicker.DateTimePickerMinValue)" />

<DemoBlock Title="Auto close" Introduction="Auto close the popup window by se <code>AutoClose</code> to <code>true</code>" Name="AutoClose" Demo="typeof(Demos.DateTimePicker.DateTimePickerAutoClose)" />

<DemoBlock Title="InputGroup" Introduction="combox with <code>BootstrapInputGroupLabel</code> inside <code>BootstrapInputGroupLabel</code>" Name="Group" Demo="typeof(Demos.DateTimePicker.DateTimePickerGroup)" />

<AttributeTable Items="@GetAttributes()" />

<EventTable Items="@GetEvents()" />

// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// DateTimePickers
/// </summary>
public sealed partial class DateTimePickers
{
    [Inject]
    [NotNull]
    private IStringLocalizer<DateTimePickers>? Localizer { get; set; }

    /// <summary>
    /// 获得事件方法
    /// </summary>
    /// <returns></returns>
    private IEnumerable<EventItem> GetEvents() => new EventItem[]
    {
        new EventItem()
        {
            Name = "OnClickConfirm",
            Description = Localizer["Event1"],
            Type ="Action"
        },
        new EventItem()
        {
            Name = "ValueChanged",
            Description = Localizer["Event2"],
            Type ="EventCallback<DateTime?>"
        }
    };

    /// <summary>
    /// 获得属性方法
    /// </summary>
    /// <returns></returns>
    private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
        new AttributeItem() {
            Name = "ShowLabel",
            Description = Localizer["Att1"],
            Type = "bool",
            ValueList = "true|false",
            DefaultValue = "true"
        },
        new AttributeItem() {
            Name = "ShowSidebar",
            Description = Localizer["Att2"],
            Type = "bool",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = "DisplayText",
            Description = Localizer["Att3"],
            Type = "string",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "Format",
            Description = Localizer["Att4"],
            Type = "string",
            ValueList = " — ",
            DefaultValue = "yyyy-MM-dd"
        },
        new AttributeItem() {
            Name = "IsShown",
            Description = Localizer["Att5"],
            Type = "boolean",
            ValueList = "",
            DefaultValue = "false"
        },
        new AttributeItem()
        {
            Name = "IsDisabled",
            Description = Localizer["Att6"],
            Type = "bool",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = "Value",
            Description = Localizer["Att8"],
            Type = "TValue",
            ValueList = "DateTime | DateTime?",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "ViewMode",
            Description = Localizer["Att9"],
            Type = "DatePickerViewMode",
            ValueList = " Date / DateTime / Year / Month",
            DefaultValue = "Date"
        },
        new AttributeItem() {
            Name = "AutoClose",
            Description = Localizer["AttrAutoClose"],
            Type = "bool",
            ValueList = "true/false",
            DefaultValue = "false"
        }
    };
}

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	9	10	11

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	9	10	11

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	9	10	11

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	9	10	11

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	9	10	11

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	9	10	11

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	9	10	11

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	9	10	11

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	9	10	11

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	9	10	11

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	9	10	11

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	9	10	11

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	9	10	11

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	9	10	11

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	9	10	11

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	9	10	11

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	9	10	11

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	9	10	11

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	9	10	11

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	9	10	11

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.2.5-beta02

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	9	10	11

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	9	10	11

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	9	10	11

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	9	10	11

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	9	10	11

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	9	10	11

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	9	10	11

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	9	10	11

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	9	10	11

Sun	Mon	Tue	Wed	Thu	Fri	Sat
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	9	10	11