Breadcrumb arrow Back to Code Examples

Create A Blazor Daterangepicker Component

Sample date Updated on Sep 12, 2025
Browse Code Git logo Download
daterange daterangepicker filtering formats

The Blazor DateRangePicker is a lightweight and mobile-friendly component that allows end users to select start and end dates as a range from a calendar pop-up or by entering the value directly in an HTML input text box.

Prerequisites

  • Visual Studio 2022

How to run the project

  • Checkout this project to a location in your disk.
  • Open the solution file using the Visual Studio 2022.
  • Restore the NuGet packages by rebuilding the solution.
  • Run the project.

Features and benefits

Predefined set of date ranges

Define the preset of ranges (like last 30 days or last week) to set date ranges frequently used by the end users.

Format date

The Blazor DateRangePicker control formats the value displayed in the input. Formatting displays the date or number based on a specific culture or user need.

DateRangePicker with multiple language

Globalization translates the names of months, days, and the today button text to any supported language. The date format and first day of the week are set to specific cultures.

Limit the date selection range

Easily limit selection to a date range with specific minimum and maximum numbers of days (span of days) by setting the min and max days options. Date selection within a range Enter or select a value within a specific range of dates by defining the min and max properties.

Date-range validation

The Blazor Date Range Picker allows display of date ranges. When the date value is out of this range, validation error is triggered. . The invalid and out-of-date-range values are set in a disabled state to prevent users from entering them or selecting them.

Customize DateRangePicker

The appearance of the component can be completely changed. Customize the application’s look and feel according to the requirement.

Week number

Show the week numbers in the pop-up calendar.

First day of week

Change the first day of the week for every month.

Built-in themes

The Blazor DateRangePicker supports several built-in themes such as material, bootstrap, fabric (Office 365), and high contrast.

Learn about more Blazor DateRangePicker

Download Free Trial

Pricing

Documentation

Online Examples

Community Forums

Suggest a feature

About Syncfusion Blazor Components

Syncfusion's Blazor component library offers over 100 UI components to work with Blazor server-side and client-side (Blazor WebAssembly) projects seamlessly. In addition to DateRangePicker, we provide popular Blazor components such as DataGrid, Charts, Scheduler, Diagram, and Word Processor.

About Syncfusion

Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 29,000 customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.

Today, we provide 1800+ controls and frameworks for web (ASP.NET Core, ASP.NET MVC, ASP.NET Web Forms, JavaScript, Angular, React or Vue and Flutter), mobile (Xamarin, UWP and JavaScript), and desktop development (Windows Forms, WPF, WinUI(Preview) & UWP). We provide ready-to-deploy enterprise software for dashboards, reports, data integration, and big data processing. Many customers have saved millions in licensing fees by deploying our software.

[email protected] | www.syncfusion.com | 1-888-9 DOTNET

Up arrow