Date & Time

The FluentCalendar and FluentDatePicker components are not yet fully compatible with the EditForm and FluentEditForm elements. Some functionalities, such as error messages, the requirement message or the validation messages are missing.

The <FluentCalendar> is an implementation of a month calendar display leveraging the Fluent UI design system. It allows for setting selected and/or disabled dates and can handle a click on a day event (if not ReadOnly)

The <FluentDatePicker> is an input field that shows a calendar dropdown to select a date.

The <FluentTimePicker> allows for picking a specific time of day by selecting hour, minutes and AM/PM

note: FluentCalendar and FluentDatePicker are not yet fully compatible with accessibility.

Examples

Default calendar

Customized calendar

Selection

Culture

ReadOnly calendar with 2-digits and using French Culture

Default Date Picker

Default Time Picker

DateOnly, TimeOnly bindings

By design, the DatePicker component uses a Value property of type DateTime? To facilitate binding to a DateOnly type, you can use the methods ToDateTime and ToDateOnly methods.

If your variable is of type Nullable<DateTime>, you can continue to use @bind-Value. For other types, you must use the syntax value="..." ValueChanged="...".

    <FluentDatePicker Value="@MyDate.ToDateTime()"
                      ValueChanged="@(e => MyDate = e.ToDateOnly())" />
    @code {
        private DateOnly MyDate = DateOnly.FromDateTime(DateTime.Today);
    }

Conversion examples

ToTimeAgo() method

• Just now
• 25 seconds ago
• 14 minutes ago
• 9 hours ago
• 1 day ago
• 5 days ago
• 6 months ago
• 2 years ago

Documentation