For a ready to use example, visithttps://github.com/mathisloge/FlatpickrBlazorExample

Install-Package FlatPickrBlazor

Usage

MyFlatpickr.razor

<div><Flatpickr hidden @ref="_datepicker" Options="@calendarOpts" OnChange="@OnChangeDate" /><Flatpickr Options="@monthPickerOpts" PluginOptions="@monthPluginOptions" /></div>@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<DateTimeOffset> dateTimes)    {        foreach (var dateTime in dateTimes)        {            Console.WriteLine(dateTime.ToString());        }    }}

_Host.cshtml

<link href="_content/FlatpickrBlazor/flatpickr.min.css" rel="stylesheet" /><script src="_content/FlatpickrBlazor/flatpickr.min.js"></script><script src="_content/FlatpickrBlazor/flatpickr.blazor.js"></script>

<script src="_content/FlatpickrBlazor/l10n/de.js"></script>

<link href="_content/FlatpickrBlazor/plugins/monthSelect/style.css" rel="stylesheet" /><script src="_content/FlatpickrBlazor/plugins/monthSelect/index.js"></script>