https://github.com/mathisloge/flatpickrblazor

Blazor version of FlatPicker.js
https://github.com/mathisloge/flatpickrblazor

blazor blazor-component blazor-extensions blazor-interop blazor-server flatpickr

Last synced: about 2 months ago
JSON representation

Blazor version of FlatPicker.js

• Host: GitHub
• URL: https://github.com/mathisloge/flatpickrblazor
• Owner: mathisloge
• License: mit
• Created: 2019-11-05T15:36:35.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2024-06-11T22:23:33.000Z (7 months ago)
• Last Synced: 2024-08-08T21:12:53.356Z (5 months ago)
• Topics: blazor, blazor-component, blazor-extensions, blazor-interop, blazor-server, flatpickr
• Language: JavaScript
• Homepage: https://mathisloge.github.io/FlatpickrBlazorExample/
• Size: 255 KB
• Stars: 8
• Watchers: 2
• Forks: 6
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# FlatPickr Blazor

uses https://github.com/flatpickr/flatpickr under the hood. 

## For a ready to use example, visit https://github.com/mathisloge/FlatpickrBlazorExample

Nuget Version is availible under https://www.nuget.org/packages/FlatPickrBlazor

	Install-Package FlatPickrBlazor

## Usage

### MyFlatpickr.razor

```



	

	



@code{

    private Flatpickr _datepicker;

    private FlatpickrOptions calendarOpts = new FlatpickrOptions

    {

        Inline = true,

        WeekNumbers = true,

        MaxDate = DateTimeOffset.UtcNow,

        Locale = "de",

        Mode = FlatpickrOptionsMode.Range

    };

    private FlatpickrOptions monthPickerOpts = new FlatpickrOptions

    {

        Inline = true

    };

    // these are already default values, so new FlatpickrPluginOptions() would fullfill everything, if you want default values

    private FlatpickrPluginOptions monthPluginOptions = new FlatpickrPluginOptions

    {

        UseMonthSelectPlugin = new FlatpickrPluginOptions.MonthSelectOptions

        {

            ShortHand = false,

            DateFormat = "F Y",

            AltFormat = "F Y",

            Theme = "light"

        }

    };

    private void OnChangeDate(List dateTimes)

    {

        foreach (var dateTime in dateTimes)

        {

            Console.WriteLine(dateTime.ToString());

        }

    }

}

```

### _Host.cshtml

you have to include at a minimum these to your _Host.cshtml

	

	

	

to add a locale (specify in your FlatpickrOptions variable) add the following script:

	

and change the "de.js" with your choosed language

to add the plugins, you have to include the script and style files. e.g. for the month select plugin: