Awesome Open Source
Awesome Open Source

NodaTimePicker

Nuget (with prereleases) Nuget Build Status CodeFactor Quality Gate Status

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

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

DatePicker1

Bound to Input

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

<input type="text" @[email protected] />
<DatePicker [email protected] [email protected] />

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

DatePicker1

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

Localization

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 [email protected](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
  • Week picker
  • Month picker
  • Year picker
  • Support for different calendars
  • Timezone awareness
  • Locale support

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Asp Net Core (3,696
Blazor (932
Datepicker (612
Related Projects