KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#developer-tools #typescript #dsh #dsh-plugin #ai-agent #codex #ai-agents #deepseek-harness #claude-code #cli #react #mcp

NodaTimePicker

★ 49 Open GitHub ↗

A Date/Time picker component library for Blazor using NodaTime

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# NodaTimePicker

[![Nuget (with prereleases)](https://img.shields.io/nuget/vpre/NodaTimePicker.svg)](https://www.nuget.org/packages/NodaTimePicker/)
[![Nuget](https://img.shields.io/nuget/dt/NodaTimePicker.svg)](https://www.nuget.org/packages/NodaTimePicker)
[![Build Status](https://dev.azure.com/nodatimepicker/NodaTimePicker/_apis/build/status/Live%20Build?branchName=master)](https://dev.azure.com/nodatimepicker/NodaTimePicker/_build/latest?definitionId=1&branchName=master)
[![CodeFactor](https://www.codefactor.io/repository/github/nheath99/nodatimepicker/badge)](https://www.codefactor.io/repository/github/nheath99/nodatimepicker)
[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=nheath99_NodaTimePicker&metric=alert_status)](https://sonarcloud.io/dashboard?id=nheath99_NodaTimePicker)

A Date/Time picker for [Blazor](https://github.com/aspnet/Blazor), using [NodaTime](https://github.com/nodatime/nodatime).

View the [Demo](https://nodatimepicker.z13.web.core.windows.net/)

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](https://github.com/tempusdominus/bootstrap-4), 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:
````shell
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:
````C#
<DatePicker Inline=true />
````
![DatePicker1](https://raw.githubusercontent.com/nheath99/NodaTimePicker/master/docs/images/DatePicker1.png)

## Bound to Input

To bind a DatePicker to an Input element, use Blazor event bindings:
````C#
<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();
    }
}
````
![DatePicker1](https://raw.githubusercontent.com/nheath99/NodaTimePicker/master/docs/images/DatePicker_BoundToInput.png)

### First Day of Week

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

````C#
<DatePicker Inline=true FirstDayOfWeek=IsoDayOfWeek.Thursday />
````
![DatePicker First Day of Week](https://raw.githubusercontent.com/nheath99/NodaTimePicker/master/docs/images/DatePicker_FirstDayOfWeek.png)

### Localization

Display day and month names in the specified culture:
````C#
<DatePicker Inline=true FormatProvider="@(new System.Globalization.CultureInfo("fr-FR"))" />
````
![DatePicker Localization](https://raw.githubusercontent.com/nheath99/NodaTimePicker/master/docs/images/DatePicker_Localization.png)
![DatePicker Localization Months](https://raw.githubusercontent.com/nheath99/NodaTimePicker/master/docs/images/DatePicker_Localization_Months.png)

### Disabled Days of Week

Disable specific days of the week:
````C#
<DatePicker Inline=true DaysOfWeekDisabled=@(new IsoDayOfWeek[] { IsoDayOfWeek.Monday, IsoDayOfWeek.Wednesday }) />
````
![DatePicker Disabled Days of Week](https://raw.githubusercontent.com/nheath99/NodaTimePicker/master/docs/images/DatePicker_DaysOfWeekDisabled.png)

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

NodaTimePicker

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README