Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/nheath99/NodaTimePicker

A Date/Time picker component library for Blazor using NodaTime
https://github.com/nheath99/NodaTimePicker

asp-net-core blazor datepicker datetimepicker nodatime timepicker

Last synced: about 2 months ago
JSON representation

A Date/Time picker component library for Blazor using NodaTime

Host: GitHub
URL: https://github.com/nheath99/NodaTimePicker
Owner: nheath99
License: gpl-3.0
Created: 2018-09-21T13:59:28.000Z (about 6 years ago)
Default Branch: master
Last Pushed: 2020-08-18T20:02:23.000Z (about 4 years ago)
Last Synced: 2024-07-02T00:48:29.628Z (3 months ago)
Topics: asp-net-core, blazor, datepicker, datetimepicker, nodatime, timepicker
Language: CSS
Homepage:
Size: 595 KB
Stars: 51
Watchers: 8
Forks: 6
Open Issues: 8
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

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

````

![DatePicker1](/docs/images/DatePicker1.png)

## Bound to Input

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

````C#

@functions

{

    bool visible = false;

    void focussed(UIFocusEventArgs e)

    {

        visible = true;

    }

    

    void selected(LocalDate localDate)

    {

        visible = false;

        StateHasChanged();

    }

}

````

![DatePicker1](/docs/images/DatePicker_BoundToInput.png)

### First Day of Week

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

````C#

````

![DatePicker First Day of Week](/docs/images/DatePicker_FirstDayOfWeek.png)

### Localization

Display day and month names in the specified culture:

````C#

````

![DatePicker Localization](/docs/images/DatePicker_Localization.png)

![DatePicker Localization Months](/docs/images/DatePicker_Localization_Months.png)

### Disabled Days of Week

Disable specific days of the week:

````C#

````

![DatePicker Disabled Days of Week](/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