Skip to content

This sample explains how to create a Blazor DateRangePicker component in the Blazor Server App. It contains features such as formatting, specific value and etc.

Notifications You must be signed in to change notification settings

SyncfusionExamples/create-blazor-daterange-picker-component-in-blazor-server-app

Repository files navigation

Create a Blazor DateRangePicker Component

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.

Related Links

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 70 UI components to work with Blazor server-side and client-side (Blazor WebAssembly) projects seamlessly. In addition to TreeView, 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 23,000+ customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.

Today, we provide 1600+ 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.


sales@syncfusion.com | www.syncfusion.com | 1-888-9 DOTNET

About

This sample explains how to create a Blazor DateRangePicker component in the Blazor Server App. It contains features such as formatting, specific value and etc.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published