A Date/Time picker component library for Blazor using NodaTime
Switch branches/tags
Nothing to show
Clone or download
Latest commit a57e77e Dec 8, 2018



NuGet Pre Release Build status CodeFactor

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

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: BlazorNodaTimeDateTimePicker in NuGet Package Manager, or by executing the following command in the Package Manager Console:

PM> Install-Package BlazorNodaTimeDateTimePicker -Version 0.0.5

Until the issue https://github.com/aspnet/Blazor/issues/1315 is resolved, insert the following line into your _ViewImports.cshtml file:

@addTagHelper *, BlazorNodaTimeDateTimePicker


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;


First Day of Week

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

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

DatePicker First Day of Week


Display day and month names in the specified culture:

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

DatePicker Localization DatePicker Localization Months

Disabled Days of Week

Disable specific days of the week:

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

DatePicker Disabled Days of Week

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
  • Month picker
  • Year picker
  • Support for different calendars
  • Timezone awareness
  • Locale support