NodaTimePicker

A Date/Time picker for Blazor, using NodaTime.

View the Demo

The aim of this project is to develop Date/Time picker components for Blazor applications, using NodaTime as the only dependency for Date and Time calculations, and CSS Grid for layout.

It is inspired by the very successful Javascript Date/Time picker developed by TempusDominus, though any dependencies on Bootstrap or jQuery have been removed - it is not simply a port of the code or interop, but a fresh start from a zero base.

Getting Started

Requirements

• https://blazor.net/docs/get-started.html

The easiest way to get started is to look at the Demo project, which has samples for most of the functionality.

The library can be downloaded from NuGet by searching for: NodaTimePicker in NuGet Package Manager, or by executing the following command in the Package Manager Console:

PM> Install-Package NodaTimePicker -Version 0.7.0

When using the component, you must add a using statement for NodaTime:

@using NodaTime

Inline

To display a simple inline DatePicker, use the following code:

<DatePicker Inline=true />

Bound to Input

To bind a DatePicker to an Input element, use Blazor event bindings:

<input type="text" @onfocus=@focussed />
<DatePicker Visible=@visible Selected=@selected />

@functions
{
    bool visible = false;
    void focussed(UIFocusEventArgs e)
    {
        visible = true;
    }
    
    void selected(LocalDate localDate)
    {
        visible = false;
        StateHasChanged();
    }
}

First Day of Week

Specify any weekday as the first day of the week (default is Monday):

<DatePicker Inline=true FirstDayOfWeek=IsoDayOfWeek.Thursday />

Localization

Display day and month names in the specified culture:

<DatePicker Inline=true FormatProvider="@(new System.Globalization.CultureInfo("fr-FR"))" />

Disabled Days of Week

Disable specific days of the week:

<DatePicker Inline=true DaysOfWeekDisabled=@(new IsoDayOfWeek[] { IsoDayOfWeek.Monday, IsoDayOfWeek.Wednesday }) />

Additional Features

• Min/Max selectable date
• Specifit disabled dates
• Disable specified date intervals
• Custom header formats
• Show/Hide action buttons

Future Development

• Time picker
• Date+Time picker
• Date range picker
• Date+Time range picker
• Week picker
• Month picker
• Year picker
• Support for different calendars
• Timezone awareness
• Locale support