Awesome

Date Range Picker for Blazor

Live Demo

This date range picker component is a port of js DateRangePicker, rewritten using C# as a Razor Component. It creates a dropdown menu from which a user can select a range of dates.

There is no dependency with jquery, moment, or bootstrap

Features include limiting the selectable date range, localizable strings and date formats, a single date picker mode, and predefined date ranges.

JS Interop is used for popup positioning and outside click handling. With future releases of ASP.NET Core Blazor it will be possible without js.

Get Started

Download library from NuGet in the NuGet Package Manager, or by executing the following command in the Package Manager Console:

Install-Package BlazorDateRangePicker

The component uses css and js isolation, you don't need to add anything to your _Host.cshtml or index.html, just make sure the isolated styles are connected:

<link href="{ASSEMBLY NAME}.styles.css" rel="stylesheet">

Use the component:

@using BlazorDateRangePicker

<DateRangePicker/>

Gives you:

<input type="text"/>

Tag attributes will be passed to input field:

@using BlazorDateRangePicker

<DateRangePicker class="form-control form-control-sm" placeholder="Select dates..." />

Gives you:

<input type="text" class="form-control form-control-sm" placeholder="Select dates..."/>

Setting properties:

@using BlazorDateRangePicker

<DateRangePicker MinDate="DateTimeOffset.Now.AddYears(-10)" MaxDate="DateTimeOffset.Now" />

Two-way data binding:

@using BlazorDateRangePicker

<DateRangePicker @bind-StartDate="StartDate" @bind-EndDate="EndDate" />

@code {
    DateTimeOffset? StartDate { get; set; } = DateTime.Today.AddMonths(-1);
    DateTimeOffset? EndDate { get; set; } = DateTime.Today.AddDays(1).AddTicks(-1);
}

Handle selection event:

@using BlazorDateRangePicker

<DateRangePicker OnRangeSelect="OnRangeSelect" />

@code {
    public void OnRangeSelect(DateRange range)
    {
        //Use range.Start and range.End here
    }
}

More complex usage:

Using custom markup for picker.

@using BlazorDateRangePicker

<DateRangePicker Culture="@(System.Globalization.CultureInfo.GetCultureInfo("en-US"))">
    <PickerTemplate>
        <div id="@context.Id" @onclick="context.Toggle" style="background: #fff; cursor: pointer; padding: 5px 10px; width: 250px; border: 1px solid #ccc;">
            <i class="oi oi-calendar"></i>&nbsp;
            <span>@context.FormattedRange @(string.IsNullOrEmpty(context.FormattedRange) ? "Choose dates..." : "")</span>
            <i class="oi oi-chevron-bottom float-right"></i>
        </div>
    </PickerTemplate>
</DateRangePicker>

Set id="@context.Id" for outside click handling to root element.

Custom buttons:

<DateRangePicker @bind-StartDate="StartDate" @bind-EndDate="EndDate">
    <ButtonsTemplate>
        <button class="cancelBtn btn btn-sm btn-default"
            @onclick="@context.ClickCancel" type="button">Cancel</button>
        <button class="cancelBtn btn btn-sm btn-default"
            @onclick="@(e => ResetClick(e, context))" type="button">Reset</button>
        <button class="applyBtn btn btn-sm btn-primary" @onclick="@context.ClickApply"
            disabled="@(context.TStartDate == null || context.TEndDate == null)"
            type="button">Apply</button>
    </ButtonsTemplate>
</DateRangePicker>

@code {
    DateTimeOffset? StartDate { get; set; }
    DateTimeOffset? EndDate { get; set; }

    void ResetClick(MouseEventArgs e, DateRangePicker picker)
    {
        StartDate = null;
        EndDate = null;
        // Close the picker
        picker.Close();
        // Fire OnRangeSelectEvent
        picker.OnRangeSelect.InvokeAsync(new DateRange());
    }
}

Use Picker.TStartDate and Picker.TEndDate properties to get current picker state before a user clicks the 'apply' button.

One configuration for all pickers

#Startup.cs

using BlazorDateRangePicker;

//ConfigureServices
services.AddDateRangePicker(config =>
{
    config.Attributes = new Dictionary<string, object>
    {
        { "class", "form-control form-control-sm" }
    };
});

It's possible to create multiple named config instances and bind it to picker with "Config" property.

services.AddDateRangePicker(config => ..., configName: "CustomConfig");

<DateRangePicker Config="CustomConfig" />

Properties

Events

Methods

Types

DateRange:

public class DateRange
{
    public DateTimeOffset Start { get; set; }
    public DateTimeOffset End { get; set; }
}

Note: DateRange Start and End is in local timezone.

The Start property is the start of a selected day (dateTime.Date).

The End property is the end of a selected day (dateTime.Date.AddDays(1).AddTicks(-1)).

Changelog

5.3.0

1. Fixed the issue with TimePicker24Hour not working on left calendar (#104)

5.2.0

1. Fixed the issue with caching of clickAndPositionHandler.js (#96)

5.1.0

1. Fixed the issue with clickAndPositionHandler.js (#96, #97)

5.0.0

1. Removed inline style usage to make CSP work (#95)
2. Fixed awaiting change handlers before closing (#91)
3. Switched the component to use css and js isolation, you don't need to add js and css links to your _Host.cshtml manually anymore (#66)
4. Removed NET Core 3.1 and NET 5 support

4.5.0

1. Added net 8 support
2. Fixed TimePicker24Hour has wrong value issue (#90)
3. Added the ability to display two calendars in single date select mode (#87)

4.4.0

1. Made it possible to change culture on the fly (#89)
2. Added net 8 rc1 support

4.3.0

1. Updated to net 7

4.2.0

1. Fixed same date selection issue when TimePicker is enabled
2. Fixed predefined date ranges with time
3. Made ChosenLabel property public
4. Added net7 support

4.1.0

1. Fixed months adjustment issue (#69)
2. Fixed problems with dates 01/01/0001 and 31/12/9999

4.0.0

1. Updated to NET 6
2. Fixed issue with handling of DateTime.MinValue and DateTime.MaxValue dates (#65)

3.6.0

1. Disable AutoApply when TimePicker is enabled (#57)

3.5.0

1. Added time picker
2. Added Prerender property (ability to render DOM only after click on the input) (#52)

3.4.0

1. Added net 6 support

3.3.0

1. Fixed issue with month & year selection (#45)

3.2.0

1. Added ability to reset the picker by clearing the picker input (#42)
2. Added ResetOnClear property
3. Added OnReset event
4. Added Reset method

2.13.0

1. Added ability to change input field id attribute (#41)

2.12.0

1. Added new OnSelectionEnd event
2. Added new demo example which demonstrates how to override day click handlers
3. Exposed some internals that might be useful for picker customization

2.11.0

1. Fix month/year select box issue (#34, #35)

2.10.0

1. Add DayTemplate property to customize picker day cell

2. Demo applications refactored and updated with new examples

2.9.0

1. Fix issue with two-way dates binding (#32)
2. Fix issue with date range label selection
3. Fix issue with single date selection mode
4. OnSelectionStart event now returns selected start date

2.8.0

1. Add OnSelectionStart event (#29)
2. Add MinSpan property (#29)

2.7.0

1. Breaking change! CustomDateFunction changed from Func<DateTimeOffset, bool> to Func<DateTimeOffset, object> so that it can return string, bool, Task<string>, Task<bool>.
2. OnMonthChangedAsync event added to support data loading indication.
3. Fixed issue with compilerconfig.json file (#27).

2.6.0

1. Add inline mode (see Inline property, and last example in demo application) (#20)

2.5.0

1. Add OnMonthChanged event (#19)

2.4.0

1. Add ButtonsTemplate property to make custom picker buttons possible (#17)

2.3.0

1. Fix an issue with month selection in calendars (#14).
2. Add AutoAdjustCalendars property.
3. Expose LeftCalendar and RightCalendar DateRangePicker options (ability to select the months manually).
4. Fix an issue with FirstDayOfWeek property when the first day is not sunday or monday.

2.2.0

1. Fixed performance issue with js outside click handler.

2.1.0

1. OnCancel event added.

2.0.0

1. Updated to support .NET Core 3.1.0 projects
2. Now in Blazor WebAssembly we need to add library static assets manually

In .NET Core 3.0.0 projects you should stay on 1.*.* version

License

The MIT License (MIT)

Copyright (c) 2019-2024 Sergey Zaikin

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.