diff --git a/blazor/datepicker/accessibility.md b/blazor/datepicker/accessibility.md index df5e23f269..c5b8e6fc75 100644 --- a/blazor/datepicker/accessibility.md +++ b/blazor/datepicker/accessibility.md @@ -9,9 +9,9 @@ documentation: ug # Accessibility in Blazor DatePicker Component -The web accessibility defines a way to make web content and web applications more accessible to disabled people. It especially helps the dynamic content change and advanced user interface components developed with Ajax, HTML, JavaScript, and related technologies. +Web accessibility ensures that web content and applications are usable by people with disabilities. This is especially important for dynamic content and advanced UI components built with Ajax, HTML, and JavaScript. -The [Blazor DatePicker](https://www.syncfusion.com/blazor-components/blazor-datepicker) component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. +The [Blazor DatePicker](https://www.syncfusion.com/blazor-components/blazor-datepicker) component follows accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/), and [WAI-ARIA roles](https://www.w3.org/TR/wai-aria/#roles) commonly used to evaluate accessibility. The accessibility compliance for the Blazor DatePicker component is outlined below. @@ -20,7 +20,7 @@ The accessibility compliance for the Blazor DatePicker component is outlined bel | [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | Intermediate | | [Section 508 Support](../common/accessibility#accessibility-standards) | Intermediate | | [Screen Reader Support](../common/accessibility#screen-reader-support) | Yes | -| [Right-To-Left Support](../common/accessibility#right-to-left-support) | Yes | +| [Right-to-left (RTL) support](../common/accessibility#right-to-left-support) | Yes | | [Color Contrast](../common/accessibility#color-contrast) | Yes | | [Mobile Device Support](../common/accessibility#mobile-device-support) | Yes | | [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | Yes | @@ -40,27 +40,25 @@ The accessibility compliance for the Blazor DatePicker component is outlined bel ## WAI-ARIA attributes -The Blazor DatePicker provides built-in compliance with the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) specifications. WAI-ARIA supports can be achieved through the attributes like `aria-expanded`, `aria-disabled`, and `aria-activedescendant` applied to the input element. +The Blazor DatePicker provides built-in compliance with the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) specifications. Compliance is achieved through ARIA attributes such as `aria-expanded`, `aria-disabled`, and `aria-activedescendant` applied to the input, toggle button, and popup elements to convey state and relationships to assistive technologies. -To learn more about the accessibility of Calendar, refer to the Calendar's [Accessibility](../calendar/accessibility) section. +To learn more about the accessibility of the Calendar component, refer to the Calendar [Accessibility](../calendar/accessibility) section. -It provides information about the widget for assistive technology to the disabled person in screen reader. +These attributes expose the component’s state and behavior to assistive technologies used by people who rely on screen readers. -* **aria-expanded**: Attribute indicates the state of a collapsible element. - -* **aria-disabled**: Attribute indicates the disabled state of this DatePicker component. - -* **aria-activedescendent**: Attribute helps in managing the current active child of the DatePicker component. +* **aria-expanded**: Indicates the expanded or collapsed state of the popup element. +* **aria-disabled**: Indicates the disabled state of the DatePicker component. +* **aria-activedescendant**: Identifies the currently active child element within the DatePicker popup. ## Keyboard interaction -You can use the following keys to interact with the Blazor DatePicker. The component implements the keyboard navigation support by following the [WAI-ARIA practices](https://www.w3.org/WAI/ARIA/apg/). +Use the following keys to interact with the Blazor DatePicker. The component implements keyboard navigation support in line with the [WAI-ARIA practices](https://www.w3.org/WAI/ARIA/apg/). It supports the following list of shortcut keys: ### Input navigation -Before opening the pop-up, use the following list of keys to control the pop-up element: +Before opening the popup, use the following keys to control the popup element: | Windows | Mac | Description | | --- | --- | --- | @@ -70,7 +68,7 @@ Before opening the pop-up, use the following list of keys to control the pop-up ### Calendar navigation -Use the following list of keys to navigate the Calendar after the pop-up has been opened: +Use the following keys to navigate the calendar after the popup has been opened: | Windows | Mac | Description | | --- | --- | --- | @@ -84,13 +82,13 @@ Use the following list of keys to navigate the Calendar after the pop-up has bee | Page Down | Page Down | Focuses the same date in the next month. | | Enter | Enter | Selects the currently focused date. | | Shift + Page Up | ⇧ + Page Up | Focuses the same date in the previous year. | -| Shift + Page Down | ⇧ + Page Down | Focuses the same date in the previous year. | -| Ctrl + ↑ | ⌘ + ↑ | Moves into the inner level of view like month-year and year-decade | -| Ctrl + ↓ | ⌘ + ↓ | Moves out from the depth level view like decade-year and year-month | -| Control + Home | ⌘ | Focuses the starting date in the current year. | +| Shift + Page Down | ⇧ + Page Down | Focuses the same date in the next year. | +| Ctrl + ↑ | ⌘ + ↑ | Moves to a higher-level view (month to year, year to decade). | +| Ctrl + ↓ | ⌘ + ↓ | Moves to a lower-level view (decade to year, year to month). | +| Ctrl + Home | ⌘ + Home | Focuses the starting date in the current year. | | Ctrl + End | ⌘ + End | Focuses the ending date in the current year. | -N> To focus out the DatePicker component, use the `t` keys. For additional information about native event, [click](https://blazor.syncfusion.com/documentation/datepicker/native-events) here. +N> To move focus out of the DatePicker component, press the `t` key. For details about handling native events in DatePicker, see [Native events in DatePicker](https://blazor.syncfusion.com/documentation/datepicker/native-events). ```cshtml @using Syncfusion.Blazor.Calendars @@ -110,9 +108,9 @@ N> To focus out the DatePicker component, use the `t` keys. For additional infor ``` ## Ensuring accessibility -The Blazor DatePicker component's accessibility levels are ensured through an [axe-core](https://www.npmjs.com/package/axe-core) software tool during automated testing. +The Blazor DatePicker component's accessibility levels are validated using the [axe-core](https://www.npmjs.com/package/axe-core) tool during automated testing. -The accessibility compliance of the DatePicker component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/datepicker) in a new window to evaluate the accessibility of the DatePicker component with accessibility tools. +The accessibility compliance of the DatePicker component is demonstrated in the following sample. Open the [DatePicker accessibility sample](https://blazor.syncfusion.com/accessibility/datepicker) in a new window to evaluate the component with accessibility tools. ## See also diff --git a/blazor/datepicker/data-binding.md b/blazor/datepicker/data-binding.md index c5176f3bc9..75d14359e3 100644 --- a/blazor/datepicker/data-binding.md +++ b/blazor/datepicker/data-binding.md @@ -1,7 +1,7 @@ --- layout: post title: Data Binding in Blazor DatePicker Component | Syncfusion -description: Checkout and learn here all about Data Binding in Syncfusion Blazor DatePicker component and much more. +description: Learn how to bind values to the Syncfusion Blazor DatePicker using one-way binding, two-way binding with @bind-Value, and dynamic value updates. platform: Blazor control: DatePicker documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Data Binding in Blazor DatePicker Component -This section briefly explains how to bind the value to the DatePicker component in the below different ways. +This section explains how to bind values to the DatePicker component in the following ways. * One-Way Data Binding * Two-Way Data Binding @@ -17,7 +17,9 @@ This section briefly explains how to bind the value to the DatePicker component ## One-way binding -You can bind the value to the DatePicker component directly for `Value` property as mentioned in the following code example. In one-way binding, you need to pass property or variable name along with `@` (For Ex: "@DateValue"). +Bind a value to the DatePicker component using the `Value` property as shown in the following example. In one-way binding, pass the property or variable name prefixed with `@` (for example, `@DateValue`). Changes to the source update the UI, but edits in the UI do not update the source automatically. + +- API reference: [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_Value) ```cshtml @using Syncfusion.Blazor.Calendars @@ -27,7 +29,7 @@ You can bind the value to the DatePicker component directly for `Value` property @code { - public DateTime? DateValue {get;set;} = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 28); + public DateTime? DateValue { get; set; } = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 28); public void UpdateValue() { @@ -36,9 +38,17 @@ You can bind the value to the DatePicker component directly for `Value` property } ``` +Preview: +- The DatePicker initially shows the 28th of the current month. Selecting the “Update Value” button sets the input to today’s date. Typing or selecting a date in the UI does not change the underlying DateValue field. + ## Two-way data binding -Two-way binding can be achieved by using `bind-Value` attribute, which supports string, int, Enum, DateTime, bool types. If the component value has been changed, it will affect all places where the variable is bound for the **bind-value** attribute. +Two-way binding is achieved with the `@bind-Value` attribute. This binds the component’s value to the specified field and updates both the UI and the source when changes occur. Use a type that matches the component’s `TValue` (for example, `DateTime` or `DateTime?`). Clearing the input sets the value to `null` when using a nullable type. The `@bind-Value` syntax is shorthand for using the `Value`, `ValueChanged`, and `ValueExpression` parameters. + +- API references: + - [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_Value) + - [ValueChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_ValueChanged) + - [ValueExpression](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_ValueExpression) ```cshtml @using Syncfusion.Blazor.Calendars @@ -48,15 +58,20 @@ Two-way binding can be achieved by using `bind-Value` attribute, which supports @code { -public DateTime? DateValue { get; set; } = DateTime.Now; + public DateTime? DateValue { get; set; } = DateTime.Now; } ``` +Preview: +- The paragraph renders the current value from the bound field. Selecting a new date in the DatePicker updates the paragraph text immediately. Clearing the input results in a blank (null) display when using a nullable type. + ## Dynamic value binding -You can change the property value dynamically by manually calling the `StateHasChanged()` method inside public event of **Blazor DatePicker component** only. This method notifies the component that its state has changed and queues a re-render. +The value can be updated programmatically in response to component events (such as the DatePicker’s `ValueChange`) or from external logic. When updating state within component event callbacks, the UI re-renders automatically. -There is no need to call this method for native events since it’s called after any lifecycle method has been called and can also be invoked manually to trigger a re-render. Refer the below mentioned code example. +- API references: + - [ValueChange event](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_ValueChange) + - [ChangedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.ChangedEventArgs-1.html) ```cshtml @using Syncfusion.Blazor.Calendars @@ -64,17 +79,16 @@ There is no need to call this method for native events since it’s called after

DatePicker value is: @DateValue

- + @code { + public DateTime? DateValue { get; set; } = DateTime.Now; -public DateTime? DateValue { get; set; } = DateTime.Now; - -private void onChange(Syncfusion.Blazor.Calendars.ChangedEventArgs args) + private void OnChange(Syncfusion.Blazor.Calendars.ChangedEventArgs args) { DateValue = args.Value; - StateHasChanged(); + // StateHasChanged() is not required here because event callbacks trigger re-rendering. } } -``` + diff --git a/blazor/datepicker/date-format.md b/blazor/datepicker/date-format.md index dadaed823d..5fbe45631f 100644 --- a/blazor/datepicker/date-format.md +++ b/blazor/datepicker/date-format.md @@ -1,41 +1,64 @@ --- layout: post -title: Date Format in Blazor DatePicker Component | Syncfusion +title: Date Format in Blazor DatePicker Component | Syncfusion description: Checkout and learn here all about Date Format in Syncfusion Blazor DatePicker component and much more. platform: Blazor control: DatePicker documentation: ug --- -# Date Format in Blazor DatePicker Component +# Date Format in Blazor DatePicker Component + +This article describes how to control the display and input formats in the Blazor DatePicker component using the Format and InputFormats properties, along with .NET standard and custom date-time format strings. ## Display Format -The display format can be used to specify how the date value is displayed or entered in a `DatePicker` control +The display format specifies how a date value is rendered in the DatePicker input. This controls the visual representation of the selected value (for example, dd-MM-yyyy, MM/dd/yyyy, or MMM dd, yyyy). -The string format of the date value specifies how the date value should be represented as a string. Different countries and regions have different conventions for representing the date value in a string format. In addition to representing the date value in different string formats, it is also possible to specify the order in which the day, month, and year values appear in the string. For example, the day/month/year format could be written as `28-12-2022` or `28.12.2022` +By default, the DatePicker display format is based on the current culture. A custom or standard .NET date and time format string can be applied using the [Custom Format](https://learn.microsoft.com/en-us/dotnet/standard/base-types/custom-date-and-time-format-strings) or [Standard Format](https://learn.microsoft.com/en-us/dotnet/standard/base-types/standard-date-and-time-format-strings) options via the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_Format) property. -By default, the DatePicker's format is based on the culture. You can also set the own [Custom Format](https://learn.microsoft.com/en-us/dotnet/standard/base-types/custom-date-and-time-format-strings) or [Standard Format](https://learn.microsoft.com/en-us/dotnet/standard/base-types/standard-date-and-time-format-strings) by using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_Format) property. +Note: When a display format is set, it consistently controls how the value is shown, regardless of culture-specific date order or separators. The underlying value type remains DateTime/DateTime?, and localized month/day names still follow the active culture where applicable. -> Once the display format property has been defined, it will be applied consistently to all cultures, regardless of their conventions for representing the date value. In other words, the display format property serves as a standardized way of representing the date value, ensuring that it is displayed and entered consistently regardless of the culture or region in which the application is used. +```cshtml +@using Syncfusion.Blazor.Calendars -{% highlight Razor %} +

Selected date (display format): @DateValue

-{% include_relative code-snippet/DatePicker.razor %} + + -{% endhighlight %} +@code { + public DateTime? DateValue { get; set; } = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 15); +} +``` +Preview: +- The input renders the selected date in the form “Sep 15, 2025” (based on the chosen format), while the bound value remains a DateTime?. ![Date Format in Blazor DatePicker](./images/DatePicker.png) ## Input Formats -The input format can be used to specify how the date value is entered in a `DatePicker` control. +The input format defines how typed dates are parsed into a valid DatePicker value. Typed input is interpreted according to the current culture and any configured input patterns. After input is confirmed (for example, by pressing Enter or Tab, or when the input loses focus), the value is reformatted using the display format. + +Multiple input patterns can be accepted by specifying [.NET custom](https://learn.microsoft.com/en-us/dotnet/standard/base-types/custom-date-and-time-format-strings) or [standard](https://learn.microsoft.com/en-us/dotnet/standard/base-types/standard-date-and-time-format-strings) patterns in the [InputFormats](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_InputFormats) property (for example, d-M-yy, d/M/yyyy, yyyy-MM-dd). -The string format of the date value specifies how the date should be represented as a string when entered by the user. When the user types the date in the input format, it will be automatically converted to the display format after pressing enter, tab key, or when the input loses focus. This enhances the user experience by allowing intuitive data entry through various custom input formats. You can also set your own [Custom Format](https://learn.microsoft.com/en-us/dotnet/standard/base-types/custom-date-and-time-format-strings) or [Standard Format](https://learn.microsoft.com/en-us/dotnet/standard/base-types/standard-date-and-time-format-strings) by using [InputFormats](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_InputFormats) property. +```cshtml +@using Syncfusion.Blazor.Calendars -{% highlight Razor %} +

Selected date (input formats): @DateValue

-{% include_relative code-snippet/InputFormat.razor %} + + -{% endhighlight %} \ No newline at end of file +@code { + public DateTime? DateValue { get; set; } = DateTime.Today; +} +``` +Preview: +- The input accepts dates typed as “1-9-25”, “01/09/2025”, or “2025-09-01”. After confirmation, the value is reformatted and displayed as “01-09-2025” according to the configured Format “dd-MM-yyyy”. diff --git a/blazor/datepicker/date-range.md b/blazor/datepicker/date-range.md index eb326f2aae..1cca77093e 100644 --- a/blazor/datepicker/date-range.md +++ b/blazor/datepicker/date-range.md @@ -1,7 +1,7 @@ --- layout: post title: Date Range in Blazor DatePicker Component | Syncfusion -description: Checkout and learn here all about Date Range in Syncfusion Blazor DatePicker component and much more. +description: Learn how to define a date range in the Syncfusion Blazor DatePicker using Min and Max, and understand StrictMode behavior for out-of-range values. platform: Blazor control: DatePicker documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Date Range in Blazor DatePicker Component -The DatePicker provides an option to select a date value within a specified range by using the [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Min) and [Max](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Max) properties. Always the Min value has to be lesser than the Max value. The `Value` property depends on the Min/Max with respect to the [StrictMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_StrictMode) property. For more information about StrictMode, refer to the [Strict Mode](./strict-mode) section from the documentation. +The DatePicker supports selecting a date within a specified range using the [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Min) and [Max](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Max) properties. Min must be less than Max. The `Value` must fall within this range, and its behavior when out of range depends on the [StrictMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_StrictMode) property. When StrictMode is disabled, the component can hold an out-of-range value and the input is highlighted with an error style. When StrictMode is enabled, invalid or out-of-range input results in a `null` model value and an error style. For details, see the [Strict Mode](./strict-mode) section. The following code allows selecting a date within the range from 7th to 27th in a month. @@ -25,11 +25,9 @@ The following code allows selecting a date within the range from 7th to 27th in } ``` +![Selecting a date within the allowed range in the Blazor DatePicker](./images/blazor-datepicker-date-selection.png) - -![Date Selection in Blazor DatePicker](./images/blazor-datepicker-date-selection.png) - -When the Min and Max properties are configured and the selected date value is out-of-range or invalid, then the model value will be set to `out of range` date value or `null` respectively with highlighted `error` class to indicate the date is out of range or invalid. +When the Min and Max properties are configured and the selected date is out of range or invalid, the model value and UI state behave as follows: with StrictMode disabled, the model can contain the out-of-range date and the input is highlighted with an `error` class; with StrictMode enabled, the model value becomes `null` and the input is highlighted to indicate the invalid selection. ```cshtml @using Syncfusion.Blazor.Calendars @@ -43,8 +41,6 @@ When the Min and Max properties are configured and the selected date value is ou } ``` +![Out-of-range date highlighted with error state in the Blazor DatePicker](./images/blazor-datepicker-selected-date.png) - -![Blazor DatePicker displays Selected Date](./images/blazor-datepicker-selected-date.png) - -N> If the value of `Min` or `Max` properties changed through code behind, you have to update the `Value` property to set within the range. \ No newline at end of file +N> If the values of `Min` or `Max` are changed in code-behind at runtime, the `Value` property must also be updated to remain within the defined range. Disabled dates cannot be selected, and keyboard navigation respects the configured minimum and maximum. \ No newline at end of file diff --git a/blazor/datepicker/dateonly-support.md b/blazor/datepicker/dateonly-support.md index 8df7d1f4c4..4edca9a281 100644 --- a/blazor/datepicker/dateonly-support.md +++ b/blazor/datepicker/dateonly-support.md @@ -1,7 +1,7 @@ --- layout: post -title: DateOnly Support in Blazor DatePicker Component | Syncfusion -description: Checkout and learn here all about DateOnly Support in Syncfusion Blazor DatePicker component and much more. +title: DateOnly Support in Blazor DatePicker Component | Syncfusion +description: Learn how to use DateOnly with the Syncfusion Blazor DatePicker, including .NET 7+ support, TValue configuration, and two-way binding behavior. platform: Blazor control: DatePicker documentation: ug @@ -9,15 +9,47 @@ documentation: ug # DateOnly Support in Blazor DatePicker Component -The [DateOnly](https://learn.microsoft.com/en-us/dotnet/api/system.dateonly?view=net-7.0) type is a new type in .NET 6 that allows you to represent a date without a time component. To use it with the Blazor DatePicker component, set the type parameter to `DateOnly`. +The [DateOnly](https://learn.microsoft.com/en-us/dotnet/api/system.dateonly?view=net-7.0) type was introduced in .NET 6 to represent a date without a time component. To use DateOnly with the Blazor DatePicker component, set the generic type parameter to `DateOnly`. -> Blazor DatePicker Component supports `DateOnly` type in .NET 7 and above version only, even though it introduced in .NET 6 itself due to serialization problem. +> The Blazor DatePicker component supports the `DateOnly` type in .NET 7 and later. Although DateOnly was introduced in .NET 6, full support in Blazor requires .NET 7 due to serialization and model binding changes. -{% highlight Razor %} +Key points when using DateOnly: +- Set the component’s `TValue` to `DateOnly` (or `DateOnly?` for nullable scenarios and clearing values). +- Use `@bind-Value` for two-way binding with a DateOnly model property. +- Ensure related properties (such as `Min`, `Max`, and `Value`) use compatible types when working with DateOnly. +- Formatting and parsing follow the current culture; DateOnly represents dates only and does not include time. -{% include_relative code-snippet/DateOnly.razor %} +```cshtml +@using Syncfusion.Blazor.Calendars -{% endhighlight %} +

Selected date: @DateValue

+ + -![Blazor TimePicker with DateOnly](./images/DatePickerDateOnly.gif) \ No newline at end of file +@code { + // Initial value + public DateOnly? DateValue { get; set; } = + new DateOnly(DateTime.Now.Year, DateTime.Now.Month, 15); + + // Range compatible with DateOnly + public DateOnly MonthStart { get; set; } = + new DateOnly(DateTime.Now.Year, DateTime.Now.Month, 1); + + public DateOnly MonthEnd { get; set; } = + new DateOnly( + DateTime.Now.Year, + DateTime.Now.Month, + DateTime.DaysInMonth(DateTime.Now.Year, DateTime.Now.Month) + ); +} +``` + +Preview: +- The DatePicker binds to a `DateOnly?` model, displays the value using the `yyyy-MM-dd` format, and restricts selection to the current month via `Min`/`Max`. + +![Blazor DatePicker with DateOnly](./images/DatePickerDateOnly.gif) diff --git a/blazor/datepicker/events.md b/blazor/datepicker/events.md index e9d9609a1a..d2bbf31868 100644 --- a/blazor/datepicker/events.md +++ b/blazor/datepicker/events.md @@ -1,7 +1,7 @@ --- layout: post title: Events in Blazor DatePicker Component | Syncfusion -description: Checkout and learn here all about Events in Syncfusion Blazor DatePicker component and much more details. +description: Learn about events in the Syncfusion Blazor DatePicker component, including ValueChange, OnOpen, OnClose, OnRenderDayCell, and more. platform: Blazor control: DatePicker documentation: ug @@ -9,186 +9,261 @@ documentation: ug # Events in Blazor DatePicker Component -This section explains the list of events of the DatePicker component which will be triggered for appropriate DatePicker actions. +This section lists and describes the events raised by the DatePicker component for common user interactions and component lifecycle actions. -N> From `v17.2.*` added only the limited number of events for the DatePicker component. The event names are different from the previous releases and also removed several events. The following are the event name changes from `v17.1.*` to `v17.2.*` +N> Starting with `v17.2.*`, the DatePicker exposes a streamlined set of events. Event names were changed from previous releases, and several events were removed. The following table shows the event name changes from `v17.1.*` to `v17.2.*`. Event Name(`v17.1.*`) |Event Name(`v17.2.*`) -----|----- -change |[ValueChange](events#valuechange) -close |[OnClose](events#onclose) -open |[OnOpen](events#onopen) -renderDayCell |[OnRenderDayCell](events#onrenderdaycell) +change |[ValueChange](#valuechange) +close |[OnClose](#onclose) +open |[OnOpen](#onopen) +renderDayCell |[OnRenderDayCell](#onrenderdaycell) ## Blur -`Blur` event triggers when the input loses the focus. +The `Blur` event is triggered when the input loses focus. +- API: [Blur](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_Blur) ```cshtml @using Syncfusion.Blazor.Calendars +

Last event: @LastEvent

+ -@code{ +@code{ + private string LastEvent { get; set; } = "None"; public void BlurHandler(Syncfusion.Blazor.Calendars.BlurEventArgs args) { - // Here, you can customize your code. + LastEvent = $"Blur at {DateTime.Now:T}"; } } ``` +Preview: +- When the input loses focus, the paragraph updates to show “Blur at HH:MM:SS”. + ## ValueChange -`ValueChange` event triggers when the Calendar value is changed. +The `ValueChange` event is triggered when the DatePicker value changes. +- API: [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_ValueChange) +- Args: [ChangedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.ChangedEventArgs-1.html) ```cshtml @using Syncfusion.Blazor.Calendars +

Current value: @CurrentValue

+ -@code{ +@code{ + private string CurrentValue { get; set; } = "None"; public void ValueChangeHandler(ChangedEventArgs args) { - // Here, you can customize your code. + CurrentValue = args.Value?.ToString("yyyy-MM-dd") ?? "null"; } } ``` +Preview: +- Selecting a date updates the paragraph to the selected date (or “null” when cleared). + ## OnClose -`OnClose` event triggers when the popup is closed. +The `OnClose` event is triggered when the popup is closed. +- API: [OnClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_OnClose) +- Args: [PopupObjectArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.PopupObjectArgs.html) ```cshtml @using Syncfusion.Blazor.Calendars +

Popup state: @PopupState

+ -@code{ +@code{ + private string PopupState { get; set; } = "Idle"; public void OnCloseHandler(PopupObjectArgs args) { - // Here, you can customize your code. + PopupState = "Closed"; } } ``` +Preview: +- Closing the popup updates the paragraph to “Closed”. + ## Created -`Created` event triggers when the component is created. +The `Created` event is triggered when the component is created. +- API: [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_Created) ```cshtml @using Syncfusion.Blazor.Calendars +

Lifecycle: @LifecycleState

+ -@code{ +@code{ + private string LifecycleState { get; set; } = "Initializing..."; public void CreatedHandler(object args) { - // Here, you can customize your code. + LifecycleState = "Created"; } } ``` +Preview: +- After the component initializes, the paragraph shows “Created”. + ## Destroyed -`Destroyed` event triggers when the component is destroyed. +The `Destroyed` event is triggered when the component is destroyed. +- API: [Destroyed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_Destroyed) ```cshtml @using Syncfusion.Blazor.Calendars - - - -@code{ +

Lifecycle: @LifecycleState

+@if (ShowPicker) +{ + + + +} + + +@code{ + private bool ShowPicker = true; + private string LifecycleState { get; set; } = "Mounted"; public void DestroyHandler(object args) { - // Here, you can customize your code. + LifecycleState = "Destroyed"; } } ``` +Preview: +- Clicking “Toggle” to remove the component updates the paragraph to “Destroyed”. + ## Focus -`Focus` event triggers when the input gets focus. +The `Focus` event is triggered when the input gains focus. +- API: [Focus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_Focus) +- Args: [FocusEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.FocusEventArgs.html) ```cshtml @using Syncfusion.Blazor.Calendars +

Last event: @LastEvent

+ -@code{ +@code{ + private string LastEvent { get; set; } = "None"; public void FocusHandler(FocusEventArgs args) { - // Here, you can customize your code. + LastEvent = $"Focus at {DateTime.Now:T}"; } } ``` +Preview: +- Focusing the input updates the paragraph to “Focus at HH:MM:SS”. + ## Navigated -`Navigated` event triggers when the Calendar is navigated to another level or within the same level of view. +The `Navigated` event is triggered when navigating between calendar views (such as month, year, or decade) or within the same view. +- API: [Navigated](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_Navigated) +- Args: [NavigatedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.NavigatedEventArgs.html) ```cshtml @using Syncfusion.Blazor.Calendars +

Navigation: @NavInfo

+ -@code{ +@code{ + private string NavInfo { get; set; } = "None"; public void NavigateHandler(NavigatedEventArgs args) { - // Here, you can customize your code. + NavInfo = $"Action: {args.Action}, View: {args.View}"; } } ``` +Preview: +- Navigating the calendar updates the paragraph with the navigation action and current view. + ## OnOpen -`OnOpen` event triggers when the popup is opened. +The `OnOpen` event is triggered when the popup is opened. +- API: [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_OnOpen) +- Args: [PopupObjectArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.PopupObjectArgs.html) ```cshtml @using Syncfusion.Blazor.Calendars +

Popup state: @PopupState

+ -@code{ +@code{ + private string PopupState { get; set; } = "Idle"; public void OpenHandler(PopupObjectArgs args) { - // Here, you can customize your code. + PopupState = "Opened"; } } ``` +Preview: +- Opening the popup updates the paragraph to “Opened”. + ## OnRenderDayCell -`OnRenderDayCell` event triggers when each day cell of the Calendar is rendered. +The `OnRenderDayCell` event is triggered when each day cell of the calendar is rendered. +- API: [OnRenderDayCell](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_OnRenderDayCell) +- Args: [RenderDayCellEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.RenderDayCellEventArgs.html) ```cshtml @using Syncfusion.Blazor.Calendars - + -@code{ - public void onRenderDayCellHandler(RenderDayCellEventArgs args) +@code{ + public void OnRenderDayCellHandler(RenderDayCellEventArgs args) { - // Here, you can customize your code. + // Example: mark weekends as disabled + if (args.Date.DayOfWeek is DayOfWeek.Saturday or DayOfWeek.Sunday) + { + args.IsDisabled = true; + } } } ``` -N> Datepicker will be limited with these events and new events will be added in future based on the user requests. If the event you are looking for is not in the list, then request [here](https://www.syncfusion.com/feedback/blazor-components). +Preview: +- Weekend dates appear disabled in the calendar. + +N> The DatePicker supports the events listed above. Additional events may be introduced in future releases. Requests can be submitted on the [Syncfusion Feedback](https://www.syncfusion.com/feedback/blazor-components) portal. diff --git a/blazor/datepicker/getting-started-with-web-app.md b/blazor/datepicker/getting-started-with-web-app.md index 757dbdcf5b..a25831186f 100644 --- a/blazor/datepicker/getting-started-with-web-app.md +++ b/blazor/datepicker/getting-started-with-web-app.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting Started with Syncfusion Blazor DatePicker Component in WebApp +title: Getting Started with Syncfusion Blazor DatePicker Component in Web App description: Checkout and learn about the documentation for getting started with Blazor DatePicker Component in Blazor Web App. platform: Blazor component: DatePicker @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor DatePicker Component in Web App -This section briefly explains about how to include [Blazor DatePicker](https://www.syncfusion.com/blazor-components/blazor-datepicker) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section explains how to include the [Blazor DatePicker](https://www.syncfusion.com/blazor-components/blazor-datepicker) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. {% tabcontents %} @@ -21,17 +21,17 @@ This section briefly explains about how to include [Blazor DatePicker](https://w ## Create a new Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) when creating the application. ## Install Syncfusion® Blazor Calendars and Themes NuGet in the Blazor Web App -To add **Blazor DatePicker** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor DatePicker** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using `WebAssembly` or `Auto` render modes, install the Syncfusion® Blazor packages in the client project of the Blazor Web App. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, use the following Package Manager commands: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -42,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on NuGet. For the full package list and component details, see [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages). {% endtabcontent %} @@ -54,11 +54,11 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) when creating the application. -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. +For example, for a Blazor Web App with the `Auto` interactive render mode, use the following commands: {% tabs %} {% highlight c# tabtitle="Blazor Web App" %} @@ -70,15 +70,15 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). +N> For details on creating a **Blazor Web App** with various interactive modes and locations, refer to the [render interactive modes](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes) topic. ## Install Syncfusion® Blazor Calendars and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using `WebAssembly` or `Auto` render modes, install the Syncfusion® Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure the command is run in the project directory that contains the `.csproj` file. +* Run the following commands to install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/): {% tabs %} @@ -92,7 +92,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on NuGet. For the full package list and component details, see [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages). {% endtabcontent %} @@ -102,10 +102,10 @@ N> Syncfusion® Blazor components are availa | Interactive Render Mode | Description | | -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| -| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| +| WebAssembly or Auto | Open **~/_Imports.razor** from the client project. | +| Server | Open **~/_Imports.razor** in the `Components` folder. | -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendar` namespace. +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -116,9 +116,9 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendar` namespace. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +Now, register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in both **~/Program.cs** files (server and client) of the Blazor Web App. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -152,7 +152,7 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. +If the **Interactive Render Mode** is set to `Server`, the project contains a single **~/Program.cs** file. In this case, register the Syncfusion® Blazor service only in that file. {% tabs %} {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} @@ -173,6 +173,8 @@ var app = builder.Build(); {% endhighlight %} {% endtabs %} +N> A valid Syncfusion license is required. For details on generating and registering a license, refer to the [License key registration](https://blazor.syncfusion.com/documentation/common/essential-studio/licensing/overview) documentation. + ## Add stylesheet and script resources The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: @@ -189,11 +191,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for different ways to reference themes ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)). For script reference options, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references). ## Add Syncfusion® Blazor DatePicker component -Add the Syncfusion® Blazor DatePicker component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +Add the Syncfusion® Blazor DatePicker component in a `.razor` file inside the `Pages` folder. If the interactivity location is set to `Per page/component`, define a render mode at the top of the component as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | @@ -202,7 +204,7 @@ Add the Syncfusion® Blazor DatePicker compo | | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If the **Interactivity Location** is set to `Global` and the **Render Mode** is `Auto`, `WebAssembly`, or `Server`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -221,13 +223,13 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DatePicker component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor DatePicker component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LXVptWruKtEfoXQa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DatePicker Component](./images/blazor-datepicker-component.png)" %} ## Setting the Value and Min and Max dates -The following example demonstrates how to set the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Value) and [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html) and [Max](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Max) dates on initializing the DatePicker. Here, you can select a date within the range from 5th to 27th of this month. `TValue` specifies the type of the DatePicker component. +The following example demonstrates how to set the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Value), [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Min), and [Max](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Max) dates when initializing the DatePicker. In this example, a date can be selected within the range from the 5th to the 27th of the current month. `TValue` specifies the type of the DatePicker component. {% tabs %} {% highlight razor %} @@ -251,5 +253,4 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- 1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) 2. [Getting Started with Syncfusion® Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) -3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) - +3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) \ No newline at end of file diff --git a/blazor/datepicker/getting-started.md b/blazor/datepicker/getting-started.md index fd4a6deeb7..acd3db0400 100644 --- a/blazor/datepicker/getting-started.md +++ b/blazor/datepicker/getting-started.md @@ -9,9 +9,9 @@ documentation: ug # Getting Started with Blazor DatePicker Component -This section briefly explains about how to include [Blazor DatePicker](https://www.syncfusion.com/blazor-components/blazor-datepicker) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section explains how to include the [Blazor DatePicker](https://www.syncfusion.com/blazor-components/blazor-datepicker) component in a Blazor WebAssembly app using Visual Studio and Visual Studio Code. -To get start quickly with Blazor DatePicker component, you can check on this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DatePicker) sample. +To get started quickly with the Blazor DatePicker component, review the following video or the [GitHub sample](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DatePicker). {% youtube "youtube:https://www.youtube.com/watch?v=ZN0zSIU59nY"%} @@ -26,11 +26,11 @@ To get start quickly with Blazor DatePicker component, you can check on this vid ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor Calendars and Themes NuGet in the App -To add **Blazor DatePicker** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor DatePicker** component to the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -41,7 +41,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [NuGet.org](https://www.nuget.org/packages?q=syncfusion.blazor). For the complete list of packages and component details, see the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic. {% endtabcontent %} @@ -53,9 +53,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application using the following commands in the terminal (Ctrl+`). {% tabs %} @@ -71,8 +71,8 @@ cd BlazorApp ## Install Syncfusion® Blazor Calendars and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure the command is run in the project root directory where the `.csproj` file is located. +* Run the following commands to install the [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed. {% tabs %} @@ -86,7 +86,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [NuGet.org](https://www.nuget.org/packages?q=syncfusion.blazor). For the complete list of packages and component details, see the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic. {% endtabcontent %} @@ -94,7 +94,7 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. +Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -105,7 +105,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +Now, register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor WebAssembly app. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -127,6 +127,8 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} +N> A valid Syncfusion license is required. For details on generating and registering a license, refer to the [License key registration](https://blazor.syncfusion.com/documentation/common/essential-studio/licensing/overview) documentation. + ## Add stylesheet and script resources The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. @@ -138,7 +140,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application. ## Add Blazor DatePicker component @@ -152,13 +154,13 @@ Add the Syncfusion® Blazor DatePicker compo {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DatePicker component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This launches the application and renders the Syncfusion® Blazor DatePicker component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LXVptWruKtEfoXQa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DatePicker Component](./images/blazor-datepicker-component.png)" %} ## Setting the Value and Min and Max dates -The following example demonstrates how to set the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Value) and [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Min) and [Max](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Max) dates on initializing the DatePicker. Here, you can select a date within the range from 5th to 27th of this month. `TValue` specifies the type of the DatePicker component. +The following example demonstrates how to set the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Value) and [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Min) and [Max](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Max) dates when initializing the DatePicker. In this example, a date can be selected within the range from the 5th to the 27th of the current month. `TValue` specifies the type of the DatePicker component. {% tabs %} {% highlight razor %} @@ -180,4 +182,4 @@ The following example demonstrates how to set the [Value](https://help.syncfusio * [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion® Blazor for Server-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) \ No newline at end of file diff --git a/blazor/datepicker/globalization.md b/blazor/datepicker/globalization.md index 5373b05738..2262e749e8 100644 --- a/blazor/datepicker/globalization.md +++ b/blazor/datepicker/globalization.md @@ -1,7 +1,7 @@ --- layout: post title: Globalization in Blazor DatePicker Component | Syncfusion -description: Checkout and learn here all about globalization support in Syncfusion Blazor DatePicker component, it's elements and more. +description: Learn about globalization in the Syncfusion Blazor DatePicker, including localization, culture-specific formatting, and right-to-left (RTL) layout support. platform: Blazor control: DatePicker documentation: ug @@ -9,13 +9,13 @@ documentation: ug # Globalization in Blazor DatePicker Component -[Blazor DatePicker](https://www.syncfusion.com/blazor-components/blazor-datepicker) component can be localized. Refer to [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion® Blazor components. +The [Blazor DatePicker](https://www.syncfusion.com/blazor-components/blazor-datepicker) component supports localization and culture-specific formatting. See the [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic for details on configuring localization for Syncfusion® Blazor components. When a Locale is set, the component reflects the culture’s date formats, month and day names, and other culture-specific settings. To apply localization, ensure that the required culture data is loaded using the localization utilities before rendering the component. ## Right-To-Left -The DatePicker supports RTL (right-to-left) functionality for languages like Arabic and Hebrew to display the text in the right-to-left direction. Use the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_EnableRtl) property to set the RTL direction. +The DatePicker supports right-to-left (RTL) layout for languages such as Arabic and Hebrew. Use the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_EnableRtl) property to render the component in RTL direction. RTL layout is independent of the Locale setting; both can be used together to achieve the desired language and layout. -The following code example initializes the DatePicker component in `Arabic` culture. +The following code example initializes the DatePicker component with the `ar` (Arabic) culture and RTL layout. ```cshtml @using Syncfusion.Blazor.Calendars @@ -33,6 +33,6 @@ The following code example initializes the DatePicker component in `Arabic` cult } ``` +N> Ensure that the required locale JSON files (such as `ar.json`) are available to load culture data. In newer .NET versions, `GetFromJsonAsync` is typically used instead of `GetJsonAsync`, but the logic remains the same: load the culture data and then set the culture. - -![Right to Left in Blazor DatePicker with Arabic Culture](./images/blazor-datepicker-right-to-left.png) \ No newline at end of file +![Blazor DatePicker in Arabic culture with right-to-left layout](./images/blazor-datepicker-right-to-left.png) \ No newline at end of file diff --git a/blazor/datepicker/how-to/disabled-the-datepicker-component.md b/blazor/datepicker/how-to/disabled-the-datepicker-component.md index 2ee43b52bc..72d5ba422a 100644 --- a/blazor/datepicker/how-to/disabled-the-datepicker-component.md +++ b/blazor/datepicker/how-to/disabled-the-datepicker-component.md @@ -1,7 +1,7 @@ --- layout: post title: Disabled the Blazor DatePicker Component | Syncfusion -description: Check out and learn here all about disabling the Syncfusion Blazor DatePicker Component and much more. +description: Learn how to disable the Syncfusion Blazor DatePicker component using the Enabled property to prevent user input and opening the popup. platform: Blazor control: DatePicker documentation: ug @@ -9,9 +9,9 @@ documentation: ug # Disabled the Blazor DatePicker Component -To disable the DatePicker, use its [Enabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_Enabled) property. +Disable user interaction with the DatePicker by setting the [Enabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_Enabled) property to `false`. When disabled, the input cannot receive focus, typing is blocked, and the calendar popup cannot be opened. The default value of `Enabled` is `true`, and this property can be data-bound to enable or disable the component dynamically at runtime. -The following code demonstrates the DatePicker in disabled state. +The following code demonstrates the DatePicker in a disabled state. ```cshtml @using Syncfusion.Blazor.Calendars @@ -23,6 +23,4 @@ The following code demonstrates the DatePicker in disabled state. } ``` - - -![Disable State in Blazor DatePicker](../images/blazor-datepicker-disable-state.png) \ No newline at end of file +![Blazor DatePicker shown in a disabled state](../images/blazor-datepicker-disable-state.png) \ No newline at end of file diff --git a/blazor/datepicker/how-to/open-datepicker-popup-on-input-click.md b/blazor/datepicker/how-to/open-datepicker-popup-on-input-click.md index 603840c712..b253decd76 100644 --- a/blazor/datepicker/how-to/open-datepicker-popup-on-input-click.md +++ b/blazor/datepicker/how-to/open-datepicker-popup-on-input-click.md @@ -9,7 +9,9 @@ documentation: ug # Open the Blazor DatePicker popup on Focus -You can open the DatePicker popup on input focus by calling the `ShowPopupAsync` method in the input `focus` event. +Open the DatePicker popup when the input receives focus. This can be done by calling `ShowPopupAsync` from the input’s focus event, or by enabling the built-in `OpenOnFocus` property as shown below. + +The DatePicker popup can be opened on input focus by calling the [`ShowPopupAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_ShowPopupAsync) method in the input `focus` event. The following example demonstrates how to open the DatePicker popup when the input is focused. @@ -28,12 +30,11 @@ The following example demonstrates how to open the DatePicker popup when the inp } ``` -![Opening Blazor DatePicker Popup](../images/blazor-datepicker-popup.png) +![Opening the Blazor DatePicker popup on input focus via Focus event](../images/blazor-datepicker-popup.png) ## Open the Blazor DatePicker popup on Focus - -You can also open the DatePicker popup on input focus by setting the [OpenOnFocus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_OpenOnFocus) property to true. +The DatePicker popup can also be opened on input focus by setting the [OpenOnFocus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_OpenOnFocus) property to `true`. This is the built-in option and does not require handling the focus event manually. The following example demonstrates how to open the DatePicker popup when the input is focused. @@ -41,8 +42,6 @@ The following example demonstrates how to open the DatePicker popup when the inp @using Syncfusion.Blazor.Calendars - ``` -![Opening Blazor DatePicker Popup](../images/blazor-datepicker-open-focus.gif) - +![Opening the Blazor DatePicker popup using the OpenOnFocus property](../images/blazor-datepicker-open-focus.gif) \ No newline at end of file diff --git a/blazor/datepicker/how-to/set-the-placeholder.md b/blazor/datepicker/how-to/set-the-placeholder.md index 0874ae0587..286f5ccd75 100644 --- a/blazor/datepicker/how-to/set-the-placeholder.md +++ b/blazor/datepicker/how-to/set-the-placeholder.md @@ -1,7 +1,7 @@ --- layout: post title: Set the Placeholder in Blazor DatePicker Component | Syncfusion -description: Checkout and learn here all about Set the Placeholder in Syncfusion Blazor DatePicker component and more. +description: Learn how to set the Placeholder in the Syncfusion Blazor DatePicker component to display hint text in the input. platform: Blazor control: DatePicker documentation: ug @@ -9,9 +9,9 @@ documentation: ug # Set the Placeholder in Blazor DatePicker Component -The following example demonstrates how to set `Placeholder` in the DatePicker component. +The following example demonstrates how to set the `Placeholder` in the DatePicker component. -Using [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_Placeholder), you can display a short hint in the input element. +Using the [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_Placeholder) property, a short hint can be displayed in the input element to guide users before a value is selected. ```cshtml @using Syncfusion.Blazor.Calendars @@ -19,6 +19,4 @@ Using [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Cale ``` - - -![Blazor DatePicker displays Hint Element](../images/blazor-datepicker-hint-element.png) \ No newline at end of file +![Blazor DatePicker displays hint text using the Placeholder property](../images/blazor-datepicker-hint-element.png) \ No newline at end of file diff --git a/blazor/datepicker/how-to/set-the-readonly.md b/blazor/datepicker/how-to/set-the-readonly.md index 559502ddb2..d8c3bdda31 100644 --- a/blazor/datepicker/how-to/set-the-readonly.md +++ b/blazor/datepicker/how-to/set-the-readonly.md @@ -9,30 +9,41 @@ documentation: ug # Set the Readonly in Blazor DatePicker Component +This article describes how the DatePicker properties Readonly, AllowEdit, and Enabled control end-user interaction, including typing in the input, opening the popup calendar, and overall interactivity. A comparison and example are provided. + ## Enabled -By default, the Enabled property is true, it specifies the input can be focused, editable, and allows you to select date from the popup. But when enabled property is false, the input is not focusable, non-editable and cannot open the popup. +By default, the `Enabled` property is `true`. When `Enabled` is `true`, the input can receive focus, text entry is allowed (subject to `AllowEdit`), and the popup calendar can be opened and used to select a date. When `Enabled` is set to `false`, the component is fully disabled: the input cannot be focused or edited, and the popup cannot be opened. This property can be data-bound to toggle the disabled state at runtime. + +- API reference: [Enabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_Enabled) ## AllowEdit -By default, the AllowEdit property is true, it allows the textbox input to be changed as well as the user can select the value from the popup and false state defines the input is not editable but allows to select the value from the popup. +By default, the `AllowEdit` property is `true`. When `AllowEdit` is `true`, the input accepts typing and a value can also be selected from the popup. When `AllowEdit` is `false`, typing in the textbox is blocked, but the popup can still be opened to select a value with the mouse or keyboard. This setting is suitable for selection-only scenarios while keeping the component interactive. + +- API reference: [AllowEdit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_AllowEdit) ## Readonly -By default, the Readonly property is false, it allows the input to be editable, and also allows value selection from the popup, and the true state does not allow user input, nor does it open popup, but the input can be focused. If you want to use the property Readonly, then you must disable the AllowEdit API. +By default, the `Readonly` property is `false`. When `Readonly` is `true`, user-initiated value changes are prevented. The input remains focusable for accessibility and form navigation, but editing is blocked and the popup is not interactive for changing the value. To present a fully read-only UI surface (no typing and no date selection), set `Readonly="true"` and also set `AllowEdit="false"`. -The following code demonstrates how to set `Readonly` in DatePicker component. You can achieve this by using the [Readonly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_Readonly) and [AllowEdit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_AllowEdit) properties. +- API reference: [Readonly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_Readonly) + +The following code demonstrates how to configure the DatePicker for read-only display by combining `Readonly` and `AllowEdit`. ```cshtml @using Syncfusion.Blazor.Calendars - + + @code { public DateTime? DateValue { get; set; } = DateTime.Now; } ``` - - -![Blazor DatePicker in Read-only Mode](../images/blazor-datepicker-read-only-mode.png) \ No newline at end of file +![Blazor DatePicker in read-only mode](../images/blazor-datepicker-read-only-mode.png) diff --git a/blazor/datepicker/islamic-calendar.md b/blazor/datepicker/islamic-calendar.md index 39efc88939..60790ff23c 100644 --- a/blazor/datepicker/islamic-calendar.md +++ b/blazor/datepicker/islamic-calendar.md @@ -1,7 +1,7 @@ --- layout: post title: Islamic Calendar in Blazor DatePicker Component | Syncfusion -description: Checkout and learn here all about Islamic Calendar in the Syncfusion Blazor DatePicker component and much more. +description: Learn how to use the Islamic (Hijri) calendar in the Syncfusion Blazor DatePicker component, including enabling CalendarMode.Islamic and related behaviors. platform: Blazor control: DatePicker documentation: ug @@ -9,14 +9,14 @@ documentation: ug # Islamic Calendar in Blazor DatePicker Component -In addition to the Gregorian calendar, the DatePicker control supports displaying the Islamic calendar (Hijri calendar). Islamic calendar or Hijri calendar is a lunar calendar consisting of 12 months in a year of 354 or 355 days.Users can either select a date from the Islamic calendar or manually enter a date. Additionally, you can use the ConvertToHijri and ConvertToGregorian methods to parse dates. +In addition to the Gregorian calendar, the DatePicker component supports the Islamic (Hijri) calendar. The Islamic calendar is a lunar calendar consisting of 12 months in a year of 354 or 355 days. Users can select a date from the Islamic calendar or manually enter a date. Additionally, helper methods such as ConvertToHijri and ConvertToGregorian can be used to convert dates between calendar systems. -Also, it consists of all Gregorian calendar functionalities as like min and max date, week number, start day of the week, multi selection, enable RTL, start and depth view, localization, highlight and customize the specific dates.By default, calendar mode is in Gregorian. You can enable the Islamic mode by setting the [CalendarMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_CalendarMode) as CalendarType.Islamic. +The DatePicker preserves its core features in Islamic mode, such as minimum and maximum date constraints, first day of the week, right-to-left (RTL) support, start and depth views, localization, and the ability to highlight and customize specific dates. By default, the calendar mode is Gregorian. Enable the Islamic mode by setting the [CalendarMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_CalendarMode) property to CalendarType.Islamic. The selected value continues to be handled as a date value while the UI uses the Hijri calendar for display and navigation. -The following example demonstrates how to display the Islamic Calendar (Hijri Calendar). +The following example demonstrates how to display the Islamic calendar (Hijri calendar). {% highlight Razor %} {% include_relative code-snippet/Islamic-Calendar.razor %} -{% endhighlight %} +{% endhighlight %} \ No newline at end of file diff --git a/blazor/datepicker/mask-support.md b/blazor/datepicker/mask-support.md index 2b8532824e..e69682772d 100644 --- a/blazor/datepicker/mask-support.md +++ b/blazor/datepicker/mask-support.md @@ -1,7 +1,7 @@ --- layout: post -title: Mask Support in Blazor DatePicker Component | Syncfusion -description: Checkout and learn here all about Mask Support in Syncfusion Blazor DatePicker component and much more. +title: Mask Support in Blazor DatePicker Component | Syncfusion +description: Learn how to use input mask support in the Syncfusion Blazor DatePicker, including EnableMask, Format-based patterns, and culture-aware placeholders. platform: Blazor control: DatePicker documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Mask Support in Blazor DatePicker Component -The masking feature allows users to enter a date in the correct format, as specified by the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_Format) property. This helps to ensure that the date is entered correctly and can also make it easier for users to understand how to enter the date. The [EnableMask](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_EnableMask) property in the DatePicker component allows you to enable or disable the masking functionality. When enabled, the input field will be displayed as masked with a specific date format pattern for entering the date. +The masking feature guides users to enter dates that match the display format defined by the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_Format) property. Enable or disable this behavior using the [EnableMask](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_EnableMask) property. When enabled, the input shows a mask pattern derived from the specified Format and the current culture, including localized separators and literals. Masking streamlines input but does not, by itself, validate out-of-range values or business rules. {% highlight Razor %} @@ -17,23 +17,19 @@ The masking feature allows users to enter a date in the correct format, as speci {% endhighlight %} - - -![Blazor DatePicker with EnableMask](./images/DatePickerMask.gif) +![Blazor DatePicker with masked input using the configured Format](./images/DatePickerMask.gif) ## MaskPlaceholder -The [DatePickerMaskPlaceholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DatePickerMaskPlaceholder.html) directive allows you to set custom placeholder text for each segment of the date format in a `DatePicker` component. This can be used to provide additional context or instructions to the user about the expected format for the input. To use the directive, include it in the component's configuration along with the [EnableMask](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_EnableMask) property. +The [DatePickerMaskPlaceholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DatePickerMaskPlaceholder.html) directive sets custom placeholder text for each segment of the date format in the `DatePicker` component. Use it together with [EnableMask](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_EnableMask) to provide guidance for expected input. Placeholders apply to the segments used by the configured Format (for example, dd/MM/yyyy or MM/dd/yy). The `DatePickerMaskPlaceholder` tag directive has the following properties: -* [Day](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_Day) : Specifies the placeholder text for the day (`dd`) segment of the date value. - -* [Month](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_Month) : Specifies the placeholder text for the month (`MM`) segment of the date value. - -* [Year](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_Year) : Specifies the placeholder text for the year (`yy`) segment of the date value. +- [Day](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_Day): Placeholder text for the day segment (such as `d`/`dd`). +- [Month](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_Month): Placeholder text for the month segment (such as `M`/`MM`). +- [Year](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_Year): Placeholder text for the year segment (such as `yy`/`yyyy`). -The `DatePicker` component uses placeholder text from the current culture's resources file for each segment of the date format by default. If you want to use custom placeholder text instead, you can specify it using the `DatePickerMaskPlaceholder` directive and its properties. +By default, the component uses placeholder text from the current culture’s resource file for each date segment. To override these defaults, specify custom values using the `DatePickerMaskPlaceholder` directive. {% highlight Razor %} @@ -41,6 +37,6 @@ The `DatePicker` component uses placeholder text from the current culture's reso {% endhighlight %} -![Blazor DatePicker Mask Support with MaskPlaceholder](./images/DatePickerMaskPlaceholder.gif) +![Blazor DatePicker mask with custom segment placeholders](./images/DatePickerMaskPlaceholder.gif) -> If you do not specify custom placeholder text for any segment of the date format, the component will use the default placeholder text from the current culture based resources file for not specified segments. \ No newline at end of file +> If custom placeholder text is not specified for a segment, the component uses the default placeholder from the current culture’s resource file. The mask pattern and separators are culture-aware, and validation behavior (such as handling incomplete or out-of-range input) follows the component’s configuration, including properties like StrictMode. \ No newline at end of file diff --git a/blazor/datepicker/native-events.md b/blazor/datepicker/native-events.md index e4dbf24aa3..48f27fcb76 100644 --- a/blazor/datepicker/native-events.md +++ b/blazor/datepicker/native-events.md @@ -1,7 +1,7 @@ --- layout: post title: Native Events in Blazor DatePicker Component | Syncfusion -description: Checkout and learn here all about native events in Syncfusion Blazor DatePicker component and much more. +description: Learn how to use native DOM events with the Syncfusion Blazor DatePicker component, bind event handlers, and pass event data. platform: Blazor control: DatePicker documentation: ug @@ -9,51 +9,53 @@ documentation: ug # Native Events in Blazor DatePicker Component -This section explains the steps to include native events and pass data to event handler in the DatePicker component. +This section explains how to attach native DOM events to the DatePicker component and how to pass event data to the event handler. ## Bind native events to DatePicker -You can access any native event by using on `` attribute with a component. The attribute's value is treated as an event handler. +Native events can be attached by using the `@on` attribute on the component. The attribute value is treated as the event handler. For keyboard scenarios, `onkeydown` or `onkeyup` is recommended. -In the following example, the KeyPressed method is called every time the key is pressed on input. +In the following example, the `KeyDown` method is called every time a key is pressed in the input. ```cshtml @using Syncfusion.Blazor.Calendars - + @code { - public void KeyPressed(){ - Console.WriteLine("Key Pressed!"); - } + public void KeyDown() + { + Console.WriteLine("Key pressed."); + } } ``` -Also, you can rewrite the previous code example as follows using the Lambda expressions. +The previous example can also be written using a lambda expression. ```cshtml @using Syncfusion.Blazor.Calendars - + ``` ## Pass event data to event handler -Blazor provides a set of argument types to map to native events. The list of event types and event arguments are: +Blazor provides argument types that map to native DOM events. The common event categories and argument types include: -* Focus Events - FocusEventArgs -* Mouse Events - MouseEventArgs -* Keyboard Events - KeyboardEventArgs -* Input Events - ChangeEventArgs/EventArgs -* Touch Events – TouchEventArgs -* Pointer Events – PointerEventArgs +- Focus events – FocusEventArgs +- Mouse events – MouseEventArgs +- Keyboard events – KeyboardEventArgs +- Input/change events – ChangeEventArgs/EventArgs +- Touch events – TouchEventArgs +- Pointer events – PointerEventArgs -In the following example, the KeyPressed method is called every time any key is pressed inside the input. But, the message will be printed when you press the "5" key. +In the following example, the `KeyPressed` method is invoked on each key press, and a message is written only when the "5" key is pressed. ```cshtml @using Syncfusion.Blazor.Calendars +@using Microsoft.AspNetCore.Components.Web - + @code { public void KeyPressed(KeyboardEventArgs args) @@ -66,7 +68,12 @@ In the following example, the KeyPressed method is called every time any key is } ``` -Using Lambda expression, you can pass the event data to the event handler. +Lambda expressions can be used to pass the event data to the handler. For more details about Blazor event arguments, refer to the Microsoft documentation: https://learn.microsoft.com/aspnet/core/blazor/components/event-handling. For DatePicker component details, refer to the Syncfusion documentation: https://blazor.syncfusion.com/documentation/datepicker/getting-started + +## Preview of the code snippet + +- When any key is pressed while the DatePicker input is focused, a console message is written. +- When the "5" key is pressed, a specific console message indicating that "5 was pressed" is written. ## List of native events supported @@ -75,4 +82,4 @@ Using Lambda expression, you can pass the event data to the event handler. | onclick | onblur | onfocus | onfocusout | | onmousemove | onmouseover | onmouseout | onmousedown | onmouseup | | ondblclick | onkeydown | onkeyup | onkeypress | -| ontouchend | onfocusin | onmouseup | ontouchstart | \ No newline at end of file +| ontouchend | onfocusin | onmouseup | ontouchstart | diff --git a/blazor/datepicker/special-dates.md b/blazor/datepicker/special-dates.md index 40f1c34ad6..c5bd972490 100644 --- a/blazor/datepicker/special-dates.md +++ b/blazor/datepicker/special-dates.md @@ -1,7 +1,7 @@ --- layout: post title: Special Dates in Blazor DatePicker Component | Syncfusion -description: Checkout and learn here all about Special Dates in Syncfusion Blazor DatePicker component and more details. +description: Learn how to customize special dates in the Syncfusion Blazor DatePicker using the OnRenderDayCell event to highlight or disable specific days. platform: Blazor control: DatePicker documentation: ug @@ -9,84 +9,100 @@ documentation: ug # Special Dates in Blazor DatePicker Component -You can customize specific dates in a DatePicker by using the [OnRenderDayCell](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DatePickerEvents-1.html#Syncfusion_Blazor_Calendars_DatePickerEvents_1_OnRenderDayCell) event. This event gets triggered on each day cell element creation that allows you to customize or disable the specific dates in the DatePicker. Here, list of dates in the current month are customized with custom styles by adding the personal-appointment and official-appointment class. +Customize specific dates in the DatePicker using the [OnRenderDayCell](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DatePickerEvents-1.html#Syncfusion_Blazor_Calendars_DatePickerEvents_1_OnRenderDayCell) event. This event is triggered for each day cell as it is created, allowing customization or disabling of specific dates. In the following example, selected dates in the current month are styled by adding the CSS classes personal-appointment and official-appointment defined in the sample. ```cshtml @using Syncfusion.Blazor.Calendars +
+
Selected Day : @SelectedValue
+ @code { public DateTime? SelectedDate { get; set; } public string SelectedValue { get; set; } = DateTime.Now.ToString("M/d/yyyy"); - public DateTime? CurrentDate { get; set; } = DateTime.Now; + public DateTime CurrentDate { get; set; } = DateTime.Now; public void CustomDates(RenderDayCellEventArgs args) { - var CurrentMonth = CurrentDate.Value.Month; - if (args.Date.Month == CurrentMonth && (args.Date.Day == 7 || args.Date.Day == 14 || args.Date.Day == 24 || args.Date.Day == 29)) { + var currentMonth = CurrentDate.Month; + + // Highlight selected special days in the current month + if (args.Date.Month == currentMonth && (args.Date.Day == 7 || args.Date.Day == 14 || args.Date.Day == 24 || args.Date.Day == 29)) + { args.CellData.ClassList += " personal-appointment"; } - if (args.Date.Month == CurrentMonth && (args.Date.Day == 3 || args.Date.Day == 11 || args.Date.Day == 17 || args.Date.Day == 22)) + + if (args.Date.Month == currentMonth && (args.Date.Day == 3 || args.Date.Day == 11 || args.Date.Day == 17 || args.Date.Day == 22)) { args.CellData.ClassList += " official-appointment"; } } + public void OnChange(ChangedEventArgs args) { - var Count = 0; - var CurrentMonth = CurrentDate.Value.Month; - if (args.Value.Value.Month == CurrentMonth && (args.Value.Value.Day == 7 || args.Value.Value.Day == 14 || args.Value.Value.Day == 24 || args.Value.Value.Day == 29)) + // Handle null safely when value is cleared + if (!args.Value.HasValue) { - this.SelectedValue = this.SelectedDate?.ToString("M/d/yyyy") + " (Personal appointment)"; - Count++; + SelectedValue = string.Empty; + return; } - if (args.Value.Value.Month == CurrentMonth && (args.Value.Value.Day == 3 || args.Value.Value.Day == 11 || args.Value.Value.Day == 17 || args.Value.Value.Day == 22)) + + var value = args.Value.Value; + var currentMonth = CurrentDate.Month; + + if (value.Month == currentMonth && (value.Day == 7 || value.Day == 14 || value.Day == 24 || value.Day == 29)) { - this.SelectedValue = this.SelectedDate?.ToString("M/d/yyyy") + " (Official appointment)"; - Count++; + SelectedValue = SelectedDate?.ToString("M/d/yyyy") + " (Personal appointment)"; } - if (Count == 0) + else if (value.Month == currentMonth && (value.Day == 3 || value.Day == 11 || value.Day == 17 || value.Day == 22)) { - this.SelectedValue = this.SelectedDate?.ToString("M/d/yyyy"); + SelectedValue = SelectedDate?.ToString("M/d/yyyy") + " (Official appointment)"; + } + else + { + SelectedValue = SelectedDate?.ToString("M/d/yyyy"); } } } + - ``` - - -![Blazor DatePicker with special dates](./images/blazor_datepicker_special_dates.png) \ No newline at end of file +![Blazor DatePicker with special dates highlighted for personal and official appointments](./images/blazor_datepicker_special_dates.png) diff --git a/blazor/datepicker/strict-mode.md b/blazor/datepicker/strict-mode.md index 5384c81d86..4fd1f8c808 100644 --- a/blazor/datepicker/strict-mode.md +++ b/blazor/datepicker/strict-mode.md @@ -1,7 +1,7 @@ --- layout: post title: Strict Mode in Blazor DatePicker Component | Syncfusion -description: Checkout and learn here all about Strict Mode in Syncfusion Blazor DatePicker component and much more. +description: Learn how StrictMode works in the Syncfusion Blazor DatePicker, including behavior for invalid and out-of-range input with Min and Max dates. platform: Blazor control: DatePicker documentation: ug @@ -9,13 +9,14 @@ documentation: ug # Strict Mode in Blazor DatePicker Component -The [StrictMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_StrictMode) is an act that allows the users to enter only the valid date within the specified `Min/Max` range in text box. If the date is invalid, then the component will stay with the previous value. Else, if the date is out of range, then the component will set the date to the Min/Max date. +The [StrictMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_StrictMode) property controls how typed input is handled with respect to the configured `Min` and `Max` range. By default, StrictMode is disabled (false). -The following example demonstrates the DatePicker in `StrictMode` with Min/Max range of 5th to 25th in a month of May. Here, it allows the users to enter only the valid date within the specified range. +When StrictMode is enabled (true): +- Only valid dates within the `Min` and `Max` range are accepted in the textbox. +- If the entered date is invalid (for example, 31 in a month with 30 days), the component retains the previous valid value. +- If the entered date is out of range, the component clamps the value to the nearest boundary (sets to `Min` when below range, or to `Max` when above range). -* If you are trying to enter the out-of-range value like 28th of May, then the Value will be set to the Max date of 25th May since the value 28th is greater than Max value of 25th. - -* If you are trying to enter the invalid date, then the Value will stay with the previous value. +The following example demonstrates the DatePicker in StrictMode with a `Min`/`Max` range from the 5th to the 25th of May. Only valid dates within the range are accepted. ```cshtml @using Syncfusion.Blazor.Calendars @@ -29,17 +30,14 @@ The following example demonstrates the DatePicker in `StrictMode` with Min/Max r } ``` - - ![Strict Mode in Blazor DatePicker](./images/blazor-datepicker-strict-mode.png) -By default, the DatePicker act in `StrictMode` false state allows you to enter the invalid or out-of-range date in text box. - -If the date is out-of-range or invalid, then the model value will be set to `out of range` date value or `null` respectively with highlighted `error` class to indicate the date is out of range or invalid. +When StrictMode is disabled (false): +- The textbox allows invalid or out-of-range dates to be entered. +- If the date is invalid, the model value becomes `null`. +- If the date is out of range, the model can hold the out-of-range value. The input is highlighted with an `error` style to indicate an invalid or out-of-range entry. -The following code demonstrates the `StrictMode` as false. Here, it allows you to enter the valid or invalid value in text box. - -If you are entering out-of-range or invalid date value, then the model value will be set to `out of range` date value or `null` respectively with highlighted `error` class to indicate the date is out of range or invalid. +The following example demonstrates StrictMode set to false. Both valid and invalid values can be entered in the textbox. ```cshtml @using Syncfusion.Blazor.Calendars @@ -53,8 +51,6 @@ If you are entering out-of-range or invalid date value, then the model value wil } ``` - - ![Blazor DatePicker without Strict Mode](./images/blazor-datepicker-without-strict-mode.png) -N> If the value of `Min` or `Max` properties changed through code behind, you have to update the `Value` property to set within the range. \ No newline at end of file +N> Calendar selection always respects `Min` and `Max` regardless of StrictMode; disabled dates cannot be picked from the popup. If the values of `Min` or `Max` are changed through code-behind at runtime, update the `Value` property to ensure it remains within the defined range. \ No newline at end of file diff --git a/blazor/datepicker/style-appearance.md b/blazor/datepicker/style-appearance.md index 42b37a8c69..43b7c35ffc 100644 --- a/blazor/datepicker/style-appearance.md +++ b/blazor/datepicker/style-appearance.md @@ -1,6 +1,6 @@ --- layout: post -title: Style and appearance in Blazor DatePicker Component | Syncfusion +title: Style and Appearance in Blazor DatePicker Component | Syncfusion description: Checkout and learn here all about Style and appearance in Syncfusion Blazor DatePicker component and more. platform: Blazor control: DatePicker @@ -9,59 +9,95 @@ documentation: ug # Style and Appearance in Blazor DatePicker Component -The following content provides the exact CSS structure that can be used to modify the control's appearance based on the user preference. +This section describes how to tailor the DatePicker component’s appearance with CSS, component properties, and mobile full-screen support. For theming guidance, refer to Syncfusion themes and appearance documentation. -## Customizing the appearance of DatePicker container element +- Syncfusion Blazor themes overview: https://blazor.syncfusion.com/documentation/common/appearance +- DatePicker component: https://blazor.syncfusion.com/documentation/datepicker/getting-started -Use the following CSS to customize the appearance of DatePicker container element. +## Customize the DatePicker container element + +Adjust the visible input height and font size by targeting the DatePicker wrapper. The following example scopes styles with a wrapper class to prevent affecting other inputs on the page. + +```cshtml +@using Syncfusion.Blazor.Calendars + +
+ +
+``` ```css -/* To specify height and font size */ -.e-input-group input.e-input, .e-input-group.e-control-wrapper input.e-input { - height: 40px; - font-size: 20px; +/* Scoped container/input size adjustments */ +.dp-container-custom .e-input-group input.e-input, +.dp-container-custom .e-input-group.e-control-wrapper input.e-input { + height: 40px; + font-size: 20px; } ``` -## Customizing the DatePicker icon element +Preview: +- The DatePicker input renders taller with a 40px height, and text appears larger at 20px font size. + +## Customize the DatePicker icon element + +Modify the DatePicker’s icon size and background color with a scoped wrapper. + +```cshtml +@using Syncfusion.Blazor.Calendars -Use the following CSS to customize the DatePicker icon element +
+ +
+``` ```css -/* To specify background color and font size */ -.e-input-group .e-input-group-icon:last-child, .e-input-group.e-control-wrapper .e-input-group-icon:last-child { - font-size: 12px; - background-color: darkgray; +/* Scoped icon size and background color */ +.dp-icon-custom .e-input-group .e-input-group-icon:last-child, +.dp-icon-custom .e-input-group.e-control-wrapper .e-input-group-icon:last-child { + font-size: 12px; + background-color: darkgray; } ``` -## Customizing the appearance of the DatePicker label +Preview: +- The calendar icon displays slightly smaller glyphs and a dark gray background on the icon button. + +## Customize the appearance of the DatePicker label + +To adjust the floating label’s size and color, use the CssClass property with custom CSS. The example below applies a compact label size and blue color. -To customize the appearance of the DatePicker label, you can use the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfInputTextBase-1.html#Syncfusion_Blazor_Inputs_SfInputTextBase_1_CssClass) property in combination with custom CSS. +- CssClass API: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfInputTextBase-1.html#Syncfusion_Blazor_Inputs_SfInputTextBase_1_CssClass ```cshtml @using Syncfusion.Blazor.Calendars +@using Syncfusion.Blazor.Inputs - + - ``` + ```css - .data-color.e-float-input.e-control-wrapper label.e-float-text, - .data-color.e-float-input input:valid~label.e-float-text, - .data-color.e-float-input input~label.e-label-top.e-float-text, - .data-color.e-float-input.e-input-focus label.e-float-text, - .data-color.e-float-input:not(.e-error) input:valid~label.e-float-text, - .data-color.e-float-input:not(.e-error) input~label.e-label-top.e-float-text - { - font-size : 10px; - color: blue; - } +.data-color.e-float-input.e-control-wrapper label.e-float-text, +.data-color.e-float-input input:valid ~ label.e-float-text, +.data-color.e-float-input input ~ label.e-label-top.e-float-text, +.data-color.e-float-input.e-input-focus label.e-float-text, +.data-color.e-float-input:not(.e-error) input:valid ~ label.e-float-text, +.data-color.e-float-input:not(.e-error) input ~ label.e-label-top.e-float-text { + font-size: 10px; + color: blue; +} ``` -## Adding background color to DatePicker container element +Preview: +- The floating label renders in a compact 10px size and blue color above the input, including when focused or when the input has a value. -You can customize the background color of the container element for the DatePicker by targeting its CSS class, `input.e-input`, and setting the desired color to the `background-color` property. +## Add background color to the DatePicker container element + +Customize the background color of the visible input by targeting the wrapper class and setting the background-color property. {% tabs %} {% highlight razor %} @@ -71,21 +107,18 @@ You can customize the background color of the container element for the DatePick {% endhighlight %} {% endtabs %} -![DatePicker with background color](./images/blazor-datepicker-background_color.png) +![Blazor DatePicker with a customized background color](./images/blazor-datepicker-background_color.png) + +## Full screen mode support on mobiles and tablets -## Full screen mode support in mobiles and tablets +The DatePicker supports full-screen mode on mobile devices to improve popup visibility. Set the FullScreen property to true. On mobile devices, the calendar expands to occupy the entire screen; desktop behavior remains unchanged. -The DatePicker component's full-screen mode feature enables users to view the component popup element in full-screen mode on mobile devices with improved visibility and a better user experience. It is important to mention that this feature is exclusively available for mobile devices in both landscape and portrait orientations. To activate the full screen mode within the DatePicker component, simply set the [FullScreen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_FullScreen) API value to `true`. This action will extend the calendar element to occupy the entire screen on mobile devices. +- FullScreen API: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_FullScreen ```cshtml @using Syncfusion.Blazor.Calendars - - + ``` -![DatePickerFullScreen](./images/blazor-datepicker-full-screen.gif) - -Also check the below section to customize the style and appearance of the Calendar component - -[Customizing Calendar's style and appearance](../calendar/style-appearance) +![Blazor DatePicker popup displayed in mobile full-screen mode](./images/blazor-datepicker-full-screen.gif) diff --git a/blazor/datepicker/view.md b/blazor/datepicker/view.md index e3791b4ca7..de08b1bfcc 100644 --- a/blazor/datepicker/view.md +++ b/blazor/datepicker/view.md @@ -1,7 +1,7 @@ --- layout: post title: Start and Depth View in Blazor DatePicker Component | Syncfusion -description: Checkout and learn here all about Start and Depth View in Syncfusion Blazor DatePicker component and more. +description: Learn how to configure Start and Depth views in the Syncfusion Blazor DatePicker to control initial view and navigation between Month, Year, and Decade. platform: Blazor control: DatePicker documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Start and Depth View in Blazor DatePicker Component -The DatePicker has the following predefined views that provides a flexible way to navigate back and forth to select the date: +The DatePicker provides predefined calendar views and properties to control the initial view and navigation depth when selecting a date. | **View** | **Description** | | --- | --- | @@ -19,40 +19,42 @@ The DatePicker has the following predefined views that provides a flexible way t ## Start view -You can use the [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Start) property to define the initial rendering view. +Use the [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Start) property to define the initial view shown when the popup opens. If not set, the initial view defaults to Month. -The following example demonstrates how to create a DatePicker with `Decade` as initial rendering view. +The following example demonstrates how to create a DatePicker with `Decade` as the initial view. ```cshtml @using Syncfusion.Blazor.Calendars - + @code { - public DateTime? DateValue {get;set;} = DateTime.Now; + public DateTime? DateValue { get; set; } = DateTime.Now; } ``` - - -![Blazor DatePicker displays Start View](./images/blazor-datepicker-view.png) +![Blazor DatePicker showing the configured start view](./images/blazor-datepicker-view.png) ## Depth view -Define the [Depth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Depth) property to control the view navigation. +Use the [Depth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Depth) property to control how far navigation can drill down. Depth must be the same as, or a more detailed view than, Start (Month is more detailed than Year, and Year is more detailed than Decade). For DatePicker (which selects a day), set Depth to Month to enable date selection. -> Always the Depth view has to be smaller than the Start view, otherwise the view restriction will be not restricted. - -The following example demonstrates how to create a DatePicker that allows users to select a month. +The following example demonstrates configuring the DatePicker to start at the Decade view and allow drilling down to the Month view (day grid) for date selection: ```cshtml @using Syncfusion.Blazor.Calendars - + @code { public DateTime? DateValue { get; set; } = DateTime.Now; } ``` -N> To learn more about Calendar views, refer to the Calendar's [Calendar Views](../calendar/calendar-views) section. \ No newline at end of file +Preview of the Depth example: +- The popup initially shows a Decade view with a grid of years. +- Selecting a year drills down to the Year view (grid of months). +- Selecting a month drills down to the Month view (grid of days). +- A date is selected from the Month view, which is the configured Depth for DatePicker. + +N> To learn more about Calendar views, refer to the Calendar’s [Calendar Views](../calendar/calendar-views) section. \ No newline at end of file diff --git a/blazor/datepicker/week-number.md b/blazor/datepicker/week-number.md index 55340192d3..8b1fff62e7 100644 --- a/blazor/datepicker/week-number.md +++ b/blazor/datepicker/week-number.md @@ -7,35 +7,60 @@ control: DatePicker documentation: ug --- -# Week Number in Blazor DatePicker Component +# Week Numbers in Blazor DatePicker Component -You can enable WeekNumber in the DatePicker by using the [WeekNumber](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html?&_ga=2.27644924.1192045546.1630297484-1815315561.1628088345#Syncfusion_Blazor_Calendars_CalendarBase_1_WeekNumber) property. +Enable week numbers in the DatePicker to display the week index in the calendar’s left column. Turn this on using the [WeekNumber](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_WeekNumber) property. ```cshtml @using Syncfusion.Blazor.Calendars - ``` +Preview: +- The calendar displays a week index column on the left side of the month view. - -![Blazor DatePicker with week numbers](./images/blazor_datepicker_weeknumber.png) +![Blazor DatePicker showing week numbers in the left column](./images/blazor_datepicker_weeknumber.png) ## Week Rule -You can enable `WeekRule` in the DatePicker by using the [WeekRule](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_WeekRule) property. This property provide an option to specify the rule for defining the first week of the year. Find the possible values of `WeekRule` property. +Configure how the first week of the year is determined using the [WeekRule](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_WeekRule) property. This setting controls how week numbers roll over at the start of the year. The following values are supported (aligned with .NET’s CalendarWeekRule): -Types |Description +Types | Description -----|----- -FirstDay |Set the first week of the year's week number to be started from 1. Then it followed as 1, 2, 3 ... -FirstFullWeek |Set the first week of the year's week number to be started from 52 or 53 (i.e December last week's week Number). Then it followed as 53, 1, 2 ... -FirstFourDayWeek | Set the week number based on the majority of dates present in the week for the respected months. If January dates are presented in the week more than December, the first week of the year's week number will be started from 1. If December dates are presented in the week more than January, the first week of the year's week number will be started from 52 or 53. +FirstDay | The first week starts on the first day of the year; subsequent weeks are numbered 1, 2, 3, and so on. +FirstFullWeek | The first full week of the year is week 1; days before the first full week belong to the last week (52 or 53) of the previous year. +FirstFourDayWeek | The first week with at least four days in the new year is week 1; otherwise, the week is counted as the last week (52 or 53) of the previous year. + +```cshtml +@using Syncfusion.Blazor.Calendars +@using System.Globalization + +
+
+

FirstDay

+ +
+
+

FirstFullWeek

+ +
+
+

FirstFourDayWeek

+ +
+
+``` +Preview: +- FirstDay: Week 1 begins on the first day of the new year. +- FirstFullWeek: Week 1 begins on the first full week; days before that belong to the previous year’s final week. +- FirstFourDayWeek: Week 1 begins on the first week containing at least four days in the new year. +N> The culture (Locale) and the first day of the week influence week numbering. By default, the DatePicker uses the current culture’s settings unless overridden. -![Blazor DatePicker displays Week Rule of FirstDay](./images/blazor-datepicker-first-day.png) +![Blazor DatePicker with WeekRule set to FirstDay](./images/blazor-datepicker-first-day.png) -![Blazor DatePicker displays Week Rule of FirstFullWeek](./images/blazor-datepicker-first-full-week.png) +![Blazor DatePicker with WeekRule set to FirstFullWeek](./images/blazor-datepicker-first-full-week.png) -![Blazor DatePicker displays Week Rule of FirstFourDayWeek](./images/blazor-datepicker-first-four-Day-Week.png) \ No newline at end of file +![Blazor DatePicker with WeekRule set to FirstFourDayWeek](./images/blazor-datepicker-first-four-Day-Week.png) \ No newline at end of file diff --git a/blazor/daterangepicker/accessibility.md b/blazor/daterangepicker/accessibility.md index 40fba04fbf..4aae1c7413 100644 --- a/blazor/daterangepicker/accessibility.md +++ b/blazor/daterangepicker/accessibility.md @@ -9,7 +9,7 @@ documentation: ug # Accessibility in Blazor DateRangePicker Component -The [Blazor DateRangePicker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. +The [Blazor DateRangePicker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) component follows accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) practices that are commonly used to evaluate accessibility. The accessibility compliance for the Blazor DateRangePicker component is outlined below. @@ -38,26 +38,25 @@ The accessibility compliance for the Blazor DateRangePicker component is outline ## WAI-ARIA attributes -The web accessibility makes web content and web applications more accessible for people with disabilities. It especially helps in dynamic content change and development of advanced user interface controls with AJAX, HTML, JavaScript, and related technologies. DateRangePicker provides built-in compliance with [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) specifications. WAI-ARIA -support is achieved through the attributes like `aria-expanded`, `aria-disabled`, and `aria-activedescendant` applied as an input element. +Web accessibility makes web content and applications more usable for people with disabilities, especially for dynamic content and advanced UI controls. DateRangePicker provides built-in compliance with [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) specifications. -To learn about the accessibility of Calendar, refer to the Calendar's [Accessibility](https://blazor.syncfusion.com/documentation/calendar/accessibility) section. +Common roles and attributes used include: +- Roles: combobox/textbox (input), dialog or popup container, grid for the calendar, and gridcell for individual dates. +- `aria-expanded`: Indicates whether the popup is open or closed on the input/combobox element. +- `aria-disabled`: Indicates the disabled state of the DateRangePicker. +- `aria-activedescendant`: Identifies the currently focused date cell within the calendar grid. -It helps people with disabilities by providing information about the widget for assistive technology in the screen readers. DateRangePicker component contains grid role and grid cell for each day cell. - -* **aria-expanded**: Indicates the currently selected date of the DateRangePicker component. - -* **aria-disabled**: Indicates the disabled state of the DateRangePicker component. +For information about the accessibility of Calendar, refer to the Calendar [Accessibility](https://blazor.syncfusion.com/documentation/calendar/accessibility) section. These roles and attributes help assistive technologies convey meaningful information to users. ## Keyboard interaction -Use the following keys to interact with the DateRangePicker. This component implements the keyboard navigation support by following the [WAI-ARIA practices](https://www.w3.org/WAI/ARIA/apg/). +The following keys provide interaction with the DateRangePicker. This component implements keyboard navigation support by following the [WAI-ARIA practices](https://www.w3.org/WAI/ARIA/apg/). -It supports the following list of shortcut keys: +The following list of shortcut keys is supported. ### Input navigation -Before opening the popup, use the following list of keys to control the popup element. +Before opening the popup, the following keys control the popup element. | Windows | Mac | Actions | | --- | --- | --- | @@ -67,7 +66,7 @@ Before opening the popup, use the following list of keys to control the popup el ### Calendar navigation -Use the following list of keys to navigate the currently focused Calendar after the popup has opened: +The following keys navigate the currently focused Calendar after the popup has opened: | Windows | Mac | Actions | | --- | --- | --- | @@ -79,15 +78,15 @@ Use the following list of keys to navigate the currently focused Calendar after | End | End | Focuses the last day of the month. | | Page Up | Page Up | Focuses the same date of the previous month. | | Page Down | Page Down | Focuses the same date of the next month. | -| Enter | Enter | Selects the currently focused date. | +| Enter | Enter | Selects the currently focused date. In range selection, the first press sets the start date and the next press sets the end date. | | Shift + Page Up | ⇧ + Page Up | Focuses the same date for the previous year. | | Shift + Page Down | ⇧ + Page Down | Focuses the same date for the next year. | | Ctrl + Home | ⌘ + Home | Focuses the first date of the current year. | | Ctrl + End | ⌘ + End | Focuses the last date of the current year. | -| Alt + → | ⌥ + → | Focuses through out the pop-up container in forward direction. | -| Alt + ← | ⌥ + ← | Focuses through out the pop-up container in backward direction. | +| Alt + → | ⌥ + → | Moves focus forward within the popup container. | +| Alt + ← | ⌥ + ← | Moves focus backward within the popup container. | -N> To focus out the DateRangePicker component, use the `t` keys. For additional information about native event, [click](https://blazor.syncfusion.com/documentation/daterangepicker/native-events) here. +N> The “t” key behavior in the following example is custom to the sample and not a built-in shortcut. For details about native events, see [Native events in DateRangePicker](https://blazor.syncfusion.com/documentation/daterangepicker/native-events). ```cshtml @using Syncfusion.Blazor.Calendars @@ -106,13 +105,15 @@ N> To focus out the DateRangePicker component, use the `t` keys. For additional } ``` -N> You can refer to our [Blazor Date Range Picker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Date Range Picker example](https://blazor.syncfusion.com/demos/daterangepicker/default-functionalities?theme=bootstrap4) to understand how to present and manipulate data. +Preview of the code snippet: When the DateRangePicker input has focus, pressing the “t” key invokes FocusOutAsync on the SfDateRangePicker instance, causing the component to lose focus and the popup to close if it is open. + +Additional resources: The [Blazor Date Range Picker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) feature tour page provides an overview of capabilities. A live [Blazor Date Range Picker example](https://blazor.syncfusion.com/demos/daterangepicker/default-functionalities?theme=bootstrap5) demonstrates default functionalities. ## Ensuring accessibility -The Blazor DateRangePicker component's accessibility levels are ensured through an [axe-core](https://www.npmjs.com/package/axe-core) software tool during automated testing. +The Blazor DateRangePicker component’s accessibility levels are validated using the [axe-core](https://www.npmjs.com/package/axe-core) tool during automated testing. -The accessibility compliance of the DateRangePicker component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/daterangepicker) in a new window to evaluate the accessibility of the DateRangePicker component with accessibility tools. +The accessibility compliance of the DateRangePicker component is demonstrated in the following sample. A standalone [sample](https://blazor.syncfusion.com/accessibility/daterangepicker) is available for evaluation with accessibility tools. ## See also diff --git a/blazor/daterangepicker/customization.md b/blazor/daterangepicker/customization.md index f4034139fc..009dc304e4 100644 --- a/blazor/daterangepicker/customization.md +++ b/blazor/daterangepicker/customization.md @@ -1,7 +1,7 @@ --- layout: post title: Customization in Blazor DateRangePicker Component | Syncfusion -description: Checkout and learn here all about Customization in Syncfusion Blazor DateRangePicker component and more. +description: Learn how to customize the Syncfusion Blazor DateRangePicker, including configuring the first day of the week with the FirstDayOfWeek property. platform: Blazor control: DateRangePicker documentation: ug @@ -9,11 +9,11 @@ documentation: ug # Customization in Blazor DateRangePicker Component -The DateRangePicker is available for UI customization that can be achieved by using the available properties and events in the component. +The DateRangePicker supports UI customization through built-in properties and events. This topic shows how to configure the first day of the week. ## First day of week -Start day in a week will differ based on the culture, but you can also customize this based on the application needs. For this, use the [FirstDayOfWeek](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DateRangePickerModel-1.html#Syncfusion_Blazor_Calendars_DateRangePickerModel_1_FirstDayOfWeek) property. By default, first day of a week in en-US is Sunday. In the following example, it is customized to Wednesday with the help of this property. +The first day of the week varies by culture, and the DateRangePicker uses the current culture’s default when not explicitly set. To override the default, use the [FirstDayOfWeek](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DateRangePickerModel-1.html#Syncfusion_Blazor_Calendars_DateRangePickerModel_1_FirstDayOfWeek) property. Valid values are integers 0–6, corresponding to Sunday (0) through Saturday (6). For example, in en-US the default first day is Sunday; the following example sets it to Wednesday by specifying `3`. ```cshtml @using Syncfusion.Blazor.Calendars @@ -21,7 +21,6 @@ Start day in a week will differ based on the culture, but you can also customize ``` +![Customization in Blazor DateRangePicker showing Wednesday as the first day of the week](./images/blazor-daterangepicker-customization.png) -![Customization in Blazor DateRangePicker](./images/blazor-daterangepicker-customization.png) - -N> You can refer to our [Blazor Date Range Picker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Date Range Picker example](https://blazor.syncfusion.com/demos/daterangepicker/default-functionalities?theme=bootstrap5) to understand how to present and manipulate data. \ No newline at end of file +N> Additional resources: The [Blazor Date Range Picker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) feature tour page provides an overview of capabilities. A live [Blazor Date Range Picker example](https://blazor.syncfusion.com/demos/daterangepicker/default-functionalities?theme=bootstrap5) demonstrates default functionalities. \ No newline at end of file diff --git a/blazor/daterangepicker/data-binding.md b/blazor/daterangepicker/data-binding.md index 061992cbea..84bfb47b00 100644 --- a/blazor/daterangepicker/data-binding.md +++ b/blazor/daterangepicker/data-binding.md @@ -9,15 +9,15 @@ documentation: ug # Data Binding in Blazor DateRangePicker Component -This section briefly explains how to bind the value to the DateRangePicker component in the below different ways. +This section explains how to bind values to the DateRangePicker component in the following ways. -* One-Way Data Binding -* Two-Way Data Binding -* Dynamic Value Binding +- One-Way Data Binding +- Two-Way Data Binding +- Dynamic Value Binding ## One-way binding -You can bind the value to the DateRangePicker component directly for `StartDate` and `EndDate` properties as mentioned in the following code example. In one-way binding, You need to pass property or variable name along with `@` (For Ex: "@StartValue"). +Bind values to the DateRangePicker using the `StartDate` and `EndDate` properties as shown below. In one-way binding, pass the property or variable name prefixed with `@` (for example, `@StartValue`). Changes to the source update the UI, but user edits do not update the source automatically. ```cshtml @using Syncfusion.Blazor.Calendars @@ -27,9 +27,7 @@ You can bind the value to the DateRangePicker component directly for `StartDate` @code { - public DateTime? StartValue { get; set; } = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 28); - public DateTime? EndValue { get; set; } = new DateTime(DateTime.Now.Year, DateTime.Now.Month + 1, 28); public void UpdateValue() @@ -40,53 +38,59 @@ You can bind the value to the DateRangePicker component directly for `StartDate` } ``` +Preview of the code snippet: Selecting Update Value changes the underlying StartDate and EndDate fields, and the DateRangePicker reflects the new range. Editing the input does not change the StartValue or EndValue fields. + ## Two-way data binding -Two-way binding can be achieved by using the `bind-StartDate` and `bind-EndDate` attributes and it supports string, int, Enum, DateTime, bool types. If the component value has been changed, it will affect all places where the variable is bound for the **bind-StartDate** and **bind-EndDate**attributes. +Two-way binding is achieved with the `@bind-StartDate` and `@bind-EndDate` attributes. These attributes bind the component’s values to the specified fields and keep the UI and source in sync. Use types that match the component’s `TValue` (for example, `DateTime` or `DateTime?`). The `@bind-...` syntax is shorthand for using the corresponding parameter, change callback, and expression. ```cshtml @using Syncfusion.Blazor.Calendars -

DateRangePickers StarteDate and EndDate is: @StartValue and @EndValue

+

DateRangePicker StartDate and EndDate: @StartValue and @EndValue

- + + @code { - -public DateTime? StartValue { get; set; } = DateTime.Now; - -public DateTime? EndValue { get; set; } = DateTime.Now; + public DateTime? StartValue { get; set; } = DateTime.Now; + public DateTime? EndValue { get; set; } = DateTime.Now; } ``` -## Dynamic value binding +Preview of the code snippet: Changing the selected range updates StartValue and EndValue immediately, and updating the bound fields in code updates the displayed range. -You can change the property value dynamically by manually calling the `StateHasChanged()` method inside public event of **Blazor DateRangePicker component** only. This method notifies the component that its state has changed and queues a re-render. +## Dynamic value binding -There is no need to call this method for native events since it’s called after any lifecycle method has been called and can also be invoked manually to trigger a re-render. Refer the below mentioned code example. +Values can be updated programmatically in response to component events (such as `ValueChange`) or from external logic. Event callbacks trigger re-rendering automatically. The following example updates the range in the DateRangePicker’s `ValueChange` event. ```cshtml @using Syncfusion.Blazor.Calendars -

DateRangePicker StarteDate and EndDate is: @StartValue and @EndValue

+

DateRangePicker StartDate and EndDate: @StartValue and @EndValue

- + @code { + public DateTime? StartValue { get; set; } = DateTime.Now; + public DateTime? EndValue { get; set; } = DateTime.Now; -public DateTime? StartValue { get; set; } = DateTime.Now; - -public DateTime? EndValue { get; set; } = DateTime.Now; - -private void onChange(RangePickerEventArgs args) -{ - StartValue = args.StartDate; - EndValue = args.EndDate; - StateHasChanged(); -} + private void OnChange(RangePickerEventArgs args) + { + StartValue = args.StartDate; + EndValue = args.EndDate; + // StateHasChanged() is not required here because event callbacks re-render automatically. + } } ``` -N> You can refer to our [Blazor Date Range Picker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Date Range Picker example](https://blazor.syncfusion.com/demos/daterangepicker/default-functionalities?theme=bootstrap5) to understand how to present and manipulate data. \ No newline at end of file +Preview of the code snippet: Selecting a new range raises ValueChange, and the paragraph displays the updated StartDate and EndDate values. + +## Additional resources + +- Blazor Date Range Picker feature tour: https://www.syncfusion.com/blazor-components/blazor-daterangepicker +- Blazor Date Range Picker example: https://blazor.syncfusion.com/demos/daterangepicker/default-functionalities?theme=bootstrap5 \ No newline at end of file diff --git a/blazor/daterangepicker/dateonly-support.md b/blazor/daterangepicker/dateonly-support.md index 4d0bab84a2..a45d240d30 100644 --- a/blazor/daterangepicker/dateonly-support.md +++ b/blazor/daterangepicker/dateonly-support.md @@ -1,7 +1,7 @@ ---- +da--- layout: post -title: DateOnly Support in Blazor DateRangePicker Component | Syncfusion -description: Checkout and learn here all about DateOnly Support in Syncfusion Blazor DateRangePicker component and much more. +title: DateOnly Support in Blazor DateRangePicker Component | Syncfusion +description: Learn how to use DateOnly with the Syncfusion Blazor DateRangePicker, including .NET 7+ support, TValue configuration, and binding StartDate/EndDate. platform: Blazor control: DateRangePicker documentation: ug @@ -9,9 +9,15 @@ documentation: ug # DateOnly Support in Blazor DateRangePicker Component -The [DateOnly](https://learn.microsoft.com/en-us/dotnet/api/system.dateonly?view=net-7.0) type is a new type in .NET 6 that allows you to represent a date without a time component. To use it with the Blazor DateRangePicker component, set the type parameter to `DateOnly`. +The [DateOnly](https://learn.microsoft.com/en-us/dotnet/api/system.dateonly?view=net-7.0) type was introduced in .NET 6 to represent a date without a time component. To use DateOnly with the Blazor DateRangePicker component, set the generic type parameter (`TValue`) to `DateOnly`. + +> The Blazor DateRangePicker component supports the `DateOnly` type in .NET 7 and later. Although DateOnly was introduced in .NET 6, full support in Blazor requires .NET 7 due to serialization and model binding updates. -> Blazor DateRangePicker Component supports `DateOnly` type in .NET 7 and above version only, even though it introduced in .NET 6 itself due to serialization problem. +Key points when using DateOnly: +- Configure `TValue="DateOnly"` (or `DateOnly?` for nullable scenarios, such as clearing the range). +- Ensure `StartDate` and `EndDate` properties and bindings use `DateOnly` (or `DateOnly?`) to match `TValue`. +- Use `@bind-StartDate` and `@bind-EndDate` for two-way binding with DateOnly properties. +- DateOnly represents dates only; formatting and parsing follow the current culture and do not include time or time zone. {% highlight Razor %} @@ -19,5 +25,4 @@ The [DateOnly](https://learn.microsoft.com/en-us/dotnet/api/system.dateonly?view {% endhighlight %} - -![Blazor DateRangePicker with DateOnly](./images/DateRangePickerDateOnly.gif) \ No newline at end of file +![Blazor DateRangePicker using DateOnly for range selection](./images/DateRangePickerDateOnly.gif) \ No newline at end of file diff --git a/blazor/daterangepicker/events.md b/blazor/daterangepicker/events.md index 6888e5b3b0..358ac5c173 100644 --- a/blazor/daterangepicker/events.md +++ b/blazor/daterangepicker/events.md @@ -1,7 +1,7 @@ --- layout: post title: Events in Blazor DateRangePicker Component | Syncfusion -description: Checkout and learn here all about Events in Syncfusion Blazor DateRangePicker component and much more. +description: Learn about events in the Syncfusion Blazor DateRangePicker component, including ValueChange, OnOpen, OnClose, OnRenderDayCell, RangeSelected, and more. platform: Blazor control: DateRangePicker documentation: ug @@ -9,11 +9,11 @@ documentation: ug # Events in Blazor DateRangePicker Component -This section explains the list of events of the DateRangePicker component which will be triggered for appropriate DateRangePicker actions. +This section lists and describes the events raised by the DateRangePicker component for common user interactions and lifecycle actions. -The events should be provided to the DateRangePicker using **DateRangePickerEvents** component. +The events are configured using the DateRangePickerEvents child component. -N> From `v17.2.*` added only the limited number of events for the DateRangePicker component. The event names are different from the previous releases and also removed several events. The following are the event name changes from `v17.1.*` to `v17.2.*` +N> Starting with `v17.2.*`, the DateRangePicker exposes a streamlined set of events. Event names were changed from previous releases, and several events were removed. The following table shows the event name changes from `v17.1.*` to `v17.2.*`. Event Name(`v17.1.*`) |Event Name(`v17.2.*`) -----|----- @@ -25,7 +25,7 @@ select |[RangeSelected](events#rangeselected) ## Blur -`Blur` event triggers when the input loses the focus. +The `Blur` event is triggered when the input loses focus. ```cshtml @using Syncfusion.Blazor.Calendars @@ -33,18 +33,20 @@ select |[RangeSelected](events#rangeselected) -@code{ +@code { public void BlurHandler(Syncfusion.Blazor.Calendars.BlurEventArgs args) { - // Here, you can customize your code. + // Add logic to handle input losing focus. } } ``` +Preview: When the input field loses focus, the BlurHandler method executes. + ## ValueChange -`ValueChange` event triggers when the Calendar value is changed. +The `ValueChange` event is triggered when the DateRangePicker value (start or end date) changes. ```cshtml @using Syncfusion.Blazor.Calendars @@ -52,18 +54,20 @@ select |[RangeSelected](events#rangeselected) -@code{ +@code { public void ValueChangeHandler(RangePickerEventArgs args) { - // Here, you can customize your code. + // Add logic to respond to start/end date changes. } } ``` +Preview: Selecting or modifying the range invokes ValueChangeHandler with the updated start and end dates. + ## OnClose -`OnClose` event triggers when the DateRangePicker is closed. +The `OnClose` event is triggered when the DateRangePicker popup is closed. ```cshtml @using Syncfusion.Blazor.Calendars @@ -71,18 +75,20 @@ select |[RangeSelected](events#rangeselected) -@code{ +@code { public void OnCloseHandler(RangePopupEventArgs args) { - // Here, you can customize your code. + // Add logic to handle popup close action. } } ``` +Preview: Closing the popup triggers OnCloseHandler after the popup is dismissed. + ## Created -`Created` event triggers when the component is created. +The `Created` event is triggered when the component is initialized. ```cshtml @using Syncfusion.Blazor.Calendars @@ -90,18 +96,20 @@ select |[RangeSelected](events#rangeselected) -@code{ +@code { public void CreatedHandler(object args) { - // Here, you can customize your code. + // Add initialization logic after component creation. } } ``` +Preview: After the component is initialized and rendered, CreatedHandler executes once. + ## Destroyed -`Destroyed` event triggers when the component is destroyed. +The `Destroyed` event is triggered when the component is disposed. ```cshtml @using Syncfusion.Blazor.Calendars @@ -109,38 +117,41 @@ select |[RangeSelected](events#rangeselected) -@code{ +@code { public void DestroyHandler(object args) { - // Here, you can customize your code. + // Add cleanup logic during component disposal. } } ``` +Preview: When the component is disposed, DestroyHandler runs for cleanup operations. + ## Focus -`Focus` event triggers when the input gets focus. +The `Focus` event is triggered when the input gains focus. ```cshtml @using Syncfusion.Blazor.Calendars - + -@code{ - +@code { public void FocusHandler(Syncfusion.Blazor.Calendars.FocusEventArgs args) { - // Here, you can customize your code. + // Add logic to handle input focus. } } ``` +Preview: When the input receives focus, FocusHandler is executed. + ## Navigated -`Navigated` event triggers when the Calendar is navigated to another level or within the same level of view. +The `Navigated` event is triggered when navigating between calendar views (such as month, year, or decade) or within the same view. ```cshtml @using Syncfusion.Blazor.Calendars @@ -149,18 +160,19 @@ select |[RangeSelected](events#rangeselected) -@code{ - +@code { public void NavigateHandler(NavigatedEventArgs args) { - // Here, you can customize your code. + // Add logic to respond to view navigation. } } ``` +Preview: Changing the calendar view or moving within a view triggers NavigateHandler with navigation details. + ## OnOpen -`OnOpen` event triggers when the DateRangePicker is opened. +The `OnOpen` event is triggered when the DateRangePicker popup is opened. ```cshtml @using Syncfusion.Blazor.Calendars @@ -169,38 +181,41 @@ select |[RangeSelected](events#rangeselected) -@code{ - +@code { public void OpenHandler(RangePopupEventArgs args) { - // Here, you can customize your code. + // Add logic to handle popup open action. } } ``` +Preview: Opening the popup invokes OpenHandler before interaction with the calendar. + ## OnRenderDayCell -`OnRenderDayCell` event triggers when each day cell of the Calendar is rendered. +The `OnRenderDayCell` event is triggered when each day cell of the calendar is rendered, allowing customization or disabling of specific dates. ```cshtml @using Syncfusion.Blazor.Calendars - + -@code{ - - public void onRenderDayCellHandler(RenderDayCellEventArgs args) +@code { + public void OnRenderDayCellHandler(RenderDayCellEventArgs args) { - // Here, you can customize your code. + // Add logic to customize or disable specific dates. + // Example: args.IsDisabled = true; // to disable a date } } ``` +Preview: As each calendar day cell is rendered, OnRenderDayCellHandler executes, enabling customization such as disabling dates or adding styles. + ## RangeSelected -`RangeSelected` event triggers on selecting the start and end date. +The `RangeSelected` event is triggered after selecting both the start and end dates of the range. ```cshtml @using Syncfusion.Blazor.Calendars @@ -209,13 +224,14 @@ select |[RangeSelected](events#rangeselected) -@code{ - +@code { public void RangeSelectHandler(RangePickerEventArgs args) { - // Here, you can customize your code. + // Add logic to respond after the full range is selected. } } ``` -N> Datepicker will be limited with these events and new events will be added in future based on the user requests. If the event you are looking for is not in the list, then request [here](https://www.syncfusion.com/feedback/blazor-components). +Preview: After both dates are selected, RangeSelectHandler receives the finalized start and end dates. + +N> The DateRangePicker currently supports the events listed above. Additional events may be introduced in future releases based on feature requests. If a required event is not listed, submit a request on the [Syncfusion Feedback](https://www.syncfusion.com/feedback/blazor-components) portal. \ No newline at end of file diff --git a/blazor/daterangepicker/getting-started-with-web-app.md b/blazor/daterangepicker/getting-started-with-web-app.md index 0c6449b4f4..6cd8a8de1e 100644 --- a/blazor/daterangepicker/getting-started-with-web-app.md +++ b/blazor/daterangepicker/getting-started-with-web-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor DateRangePicker Component in Web App -This section briefly explains about how to include [Blazor DateRangePicker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section explains how to include the [Blazor DateRangePicker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. {% tabcontents %} @@ -21,17 +21,17 @@ This section briefly explains about how to include [Blazor DateRangePicker](http ## Create a new Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) when creating the application. ## Install Syncfusion® Blazor Calendars and Themes NuGet in the Blazor Web App -To add **Blazor DateRangePicker** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor DateRangePicker** component, the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution) can be used to install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +For `WebAssembly` or `Auto` render modes, install the Syncfusion® Blazor packages in the client project of the Blazor Web App. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, the following Package Manager commands can be used: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -42,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on NuGet. For the full package list and component details, see the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic. {% endtabcontent %} @@ -54,11 +54,11 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) when creating the application. -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. +For example, for a Blazor Web App with the `Auto` interactive render mode, the following commands create the project and navigate to the client: {% tabs %} {% highlight c# tabtitle="Blazor Web App" %} @@ -70,15 +70,14 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). +N> For details on creating a **Blazor Web App** with various interactive modes and locations, see the [render interactive modes](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes) topic. ## Install Syncfusion® Blazor Calendars and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +For `WebAssembly` or `Auto` render modes, install the Syncfusion® Blazor component NuGet packages in the client project. -* Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Open the integrated terminal in Visual Studio Code (Ctrl+`). +* Run the following commands from the project directory that contains the `.csproj` file to install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/): {% tabs %} @@ -92,7 +91,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on NuGet. For the full package list and component details, see the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic. {% endtabcontent %} @@ -103,9 +102,9 @@ N> Syncfusion® Blazor components are availa | Interactive Render Mode | Description | | -- | -- | | WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| -| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| +| Server | Open **~/_Imports.razor** file, which is located in the `Components` folder.| -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -116,9 +115,9 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in both **~/Program.cs** files of the Blazor Web App. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -152,7 +151,7 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. +If the **Interactive Render Mode** is set to `Server`, the project contains a single **~/Program.cs** file. In this case, register the Syncfusion® Blazor Service only in that **~/Program.cs** file. {% tabs %} {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} @@ -173,6 +172,8 @@ var app = builder.Build(); {% endhighlight %} {% endtabs %} +N> A valid Syncfusion license is required. For details on generating and registering a license, refer to the [License key registration](https://blazor.syncfusion.com/documentation/common/essential-studio/licensing/overview) documentation. + ## Add stylesheet and script resources The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: @@ -189,11 +190,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Refer to the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) to reference themes in a Blazor application. Also, refer to the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn approaches for adding script references. ## Add Syncfusion® Blazor DateRangePicker component -Add the Syncfusion® Blazor DateRangePicker component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +Add the Syncfusion® Blazor DateRangePicker component in a `.razor` file inside the `Pages` folder. If the interactivity location is `Per page/component`, define a render mode at the top of the component as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | @@ -202,7 +203,7 @@ Add the Syncfusion® Blazor DateRangePicker | | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If the **Interactivity Location** is set to `Global` and the **Render Mode** is `Auto`, `WebAssembly`, or `Server`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -221,13 +222,13 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DateRangePicker component in your default web browser. +- The application can be launched with Ctrl+F5 (Windows) or ⌘+F5 (macOS). This renders the Syncfusion® Blazor DateRangePicker component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/rDhTZCBOqWgwMmva?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DateRangePicker Component](./images/blazor-daterangepicker-component.png)" %} ## Setting the Min and Max -The minimum and maximum date range can be defined with the help of [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DateRangePickerModel-1.html#Syncfusion_Blazor_Calendars_DateRangePickerModel_1_Min) and [Max](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DateRangePickerModel-1.html#Syncfusion_Blazor_Calendars_DateRangePickerModel_1_Max) properties. +The minimum and maximum date range can be defined with the [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DateRangePickerModel-1.html#Syncfusion_Blazor_Calendars_DateRangePickerModel_1_Min) and [Max](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DateRangePickerModel-1.html#Syncfusion_Blazor_Calendars_DateRangePickerModel_1_Max) properties. {% tabs %} {% highlight razor %} @@ -251,4 +252,3 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- 1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) 2. [Getting Started with Syncfusion® Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) 3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) - diff --git a/blazor/daterangepicker/getting-started.md b/blazor/daterangepicker/getting-started.md index c3d9e6776a..df7679fc90 100644 --- a/blazor/daterangepicker/getting-started.md +++ b/blazor/daterangepicker/getting-started.md @@ -9,9 +9,9 @@ documentation: ug # Getting Started with Blazor DateRangePicker Component -This section briefly explains about how to include [Blazor DateRangePicker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section explains how to include the [Blazor DateRangePicker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) component in a Blazor WebAssembly app using Visual Studio and Visual Studio Code. -To get start quickly with Blazor DateRangePicker component, you can check on this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DateRangePicker) sample. +To get started quickly with the Blazor DateRangePicker component, watch the following video or explore the [GitHub sample](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DateRangePicker). {% youtube "youtube:https://www.youtube.com/watch?v=1xB_h1Zixl0"%} @@ -26,11 +26,11 @@ To get start quickly with Blazor DateRangePicker component, you can check on thi ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor Calendars and Themes NuGet in the App -To add **Blazor DateRangePicker** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor DateRangePicker** component to the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for, and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -41,7 +41,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [NuGet.org](https://www.nuget.org/packages?q=syncfusion.blazor). For the complete list of packages and component details, see the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic. {% endtabcontent %} @@ -53,9 +53,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application using the following commands in the terminal (Ctrl+`). {% tabs %} @@ -70,9 +70,8 @@ cd BlazorApp ## Install Syncfusion® Blazor Calendars and Themes NuGet in the App -* Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Open the integrated terminal in Visual Studio Code (Ctrl+`). +* From the project root directory that contains the `.csproj` file, run the following commands to install the [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and restore dependencies. {% tabs %} @@ -86,7 +85,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [NuGet.org](https://www.nuget.org/packages?q=syncfusion.blazor). For the complete list of packages and component details, see the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic. {% endtabcontent %} @@ -94,7 +93,7 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. +Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -105,7 +104,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly app. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -138,7 +137,8 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. + +N> Refer to the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in a Blazor application. Also, refer to the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references. ## Add Blazor DateRangePicker component @@ -152,13 +152,13 @@ Add the Syncfusion® Blazor DateRangePicker {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DateRangePicker component in your default web browser. +- Launch the application with Ctrl+F5 (Windows) or ⌘+F5 (macOS). This renders the Syncfusion® Blazor DateRangePicker component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/rDhTZCBOqWgwMmva?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DateRangePicker Component](./images/blazor-daterangepicker-component.png)" %} ## Setting the Min and Max -The minimum and maximum date range can be defined with the help of [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DateRangePickerModel-1.html#Syncfusion_Blazor_Calendars_DateRangePickerModel_1_Min) and [Max](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DateRangePickerModel-1.html#Syncfusion_Blazor_Calendars_DateRangePickerModel_1_Max) properties. +Define the minimum and maximum selectable dates using the [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DateRangePickerModel-1.html#Syncfusion_Blazor_Calendars_DateRangePickerModel_1_Min) and [Max](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DateRangePickerModel-1.html#Syncfusion_Blazor_Calendars_DateRangePickerModel_1_Max) properties. {% tabs %} {% highlight razor %} diff --git a/blazor/daterangepicker/globalization.md b/blazor/daterangepicker/globalization.md index 1b6363d693..e811f55150 100644 --- a/blazor/daterangepicker/globalization.md +++ b/blazor/daterangepicker/globalization.md @@ -1,7 +1,7 @@ --- layout: post title: Globalization in Blazor DateRangePicker Component | Syncfusion -description: Checkout and learn here all about Globalization in Syncfusion Blazor DateRangePicker component and more. +description: Learn about globalization in the Syncfusion Blazor DateRangePicker, including localization, culture-specific formatting, and right-to-left (RTL) layout support. platform: Blazor control: DateRangePicker documentation: ug @@ -9,13 +9,13 @@ documentation: ug # Globalization in Blazor DateRangePicker Component -[Blazor DateRangePicker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) component can be localized. Refer to [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion® Blazor components. +The [Blazor DateRangePicker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) component supports localization and culture-specific formatting. For setup details, see the [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic for Syncfusion® Blazor components. When a Locale is set, the component reflects the culture’s date formats, month and day names, and other culture-specific settings. Ensure that the required culture data is loaded using the provided localization utilities before rendering the component. ## Right-To-Left -The DateRangePicker supports RTL (right-to-left) functionality for languages like Hebrew and Hebrew to display the text in the right-to-left direction. Use [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateRangePicker-1.html#Syncfusion_Blazor_Calendars_SfDateRangePicker_1_EnableRtl) property to set the RTL direction. +The DateRangePicker supports right-to-left (RTL) layout for languages such as Arabic and Hebrew. Use the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateRangePicker-1.html#Syncfusion_Blazor_Calendars_SfDateRangePicker_1_EnableRtl) property to render the component in RTL direction. RTL layout is independent of the Locale setting; both can be used together to achieve the desired language and layout. -The following code example initialize the DateRangePicker component in `Hebrew` culture. +The following code example initializes the DateRangePicker component with the `ar` (Arabic) culture and RTL layout. ```cshtml @using Syncfusion.Blazor.Calendars @@ -30,10 +30,9 @@ The following code example initialize the DateRangePicker component in `Hebrew` { this.JsRuntime.Sf().LoadLocaleData(await Http.GetJsonAsync("blazor-locale/src/ar.json")).SetCulture("ar"); } +} ``` +![Blazor DateRangePicker in Arabic culture with right-to-left layout](./images/blazor-daterangepicker-right-to-left.png) - -![Right to Left in Blazor DateRangePicker with Hebrew Culture](./images/blazor-daterangepicker-right-to-left.png) - -N> You can refer to our [Blazor Date Range Picker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Date Range Picker example](https://blazor.syncfusion.com/demos/daterangepicker/default-functionalities?theme=bootstrap5) to understand how to present and manipulate data. +N> Additional resources: The [Blazor Date Range Picker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) feature tour page provides an overview of capabilities. A live [Blazor Date Range Picker example](https://blazor.syncfusion.com/demos/daterangepicker/default-functionalities?theme=bootstrap5) demonstrates default functionalities. \ No newline at end of file diff --git a/blazor/daterangepicker/how-to/customization-using-cssclass.md b/blazor/daterangepicker/how-to/customization-using-cssclass.md index 07cba2625d..676b3b7058 100644 --- a/blazor/daterangepicker/how-to/customization-using-cssclass.md +++ b/blazor/daterangepicker/how-to/customization-using-cssclass.md @@ -9,46 +9,46 @@ documentation: ug # Customization Using CssClass in Blazor DateRangePicker Component -To customize UI, you can use [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DateRangePickerModel-1.html#Syncfusion_Blazor_Calendars_DateRangePickerModel_1_CssClass) that will be added to the DateRangePicker component as the root CSS class. With this CSS class, you can override existing styles of DateRangePicker. +To customize the UI, use [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DateRangePickerModel-1.html#Syncfusion_Blazor_Calendars_DateRangePickerModel_1_CssClass), which adds a custom class to the DateRangePicker root element. By targeting this class in CSS, existing styles can be overridden in a scoped and maintainable way. Multiple class names can be provided (space-separated). Depending on the selected theme, increased selector specificity may be required to override defaults. -Following is the list of classes that provides flexible way to customize the DateRangePicker component: +Following is the list of classes that provide a flexible way to customize the DateRangePicker component: -| **Class Name** | **Description** | +| Class Name | Description | | --- | --- | -| e-date-range-wrapper | Applied to DateRangePicker wrapper. | -| e-range-icon | Applied to DateRangePicker icon. | -| e-popup | Applied to DateRangePicker popup wrapper.| -| e-calendar | Applied to both Calendar element. | -| e-right-calendar | Applied to right Calendar element. | -| e-left-calendar | Applied to left Calendar element. | -| e-start-label | Applied to start label in a popup. | -| e-end-calendar | Applied to end label in a popup. | -| e-day-span | Applied to day span details label in a popup. | -| e-footer | Applied to footer elements in a popup. | -| e-apply | Applied to apply button in footer in a popup. | -| e-cancel | Applied to cancel button in footer in a popup. | -| e-header | Applied to Calendar header.| -| e-title |Applied to Calendar title. | -| e-icon-container | Applied to Calendar previous and next icon container.| -| e-prev | Applied to Calendar previous icon.| -| e-next | Applied to Calendar next icon.| -| e-weekend | Applied to Calendar weekend dates.| -| e-other-month | Applied to Calendar other month dates.| -| e-day | Applied to each day cell of the Calendar.| -| e-selected | Applied to Calendar selected dates.| -| e-disabled | Applied to Calendar disabled dates.| +| e-date-range-wrapper | Applied to the DateRangePicker wrapper. | +| e-range-icon | Applied to the DateRangePicker icon. | +| e-popup | Applied to the DateRangePicker popup wrapper. | +| e-calendar | Applied to both calendar elements. | +| e-right-calendar | Applied to the right calendar element. | +| e-left-calendar | Applied to the left calendar element. | +| e-start-label | Applied to the start label in the popup. | +| e-end-label | Applied to the end label in the popup. | +| e-day-span | Applied to the day span details label in the popup. | +| e-footer | Applied to footer elements in the popup. | +| e-apply | Applied to the Apply button in the popup footer. | +| e-cancel | Applied to the Cancel button in the popup footer. | +| e-header | Applied to the calendar header. | +| e-title | Applied to the calendar title. | +| e-icon-container | Applied to the calendar previous and next icon container. | +| e-prev | Applied to the calendar previous icon. | +| e-next | Applied to the calendar next icon. | +| e-weekend | Applied to calendar weekend dates. | +| e-other-month | Applied to calendar other-month dates. | +| e-day | Applied to each day cell of the calendar. | +| e-selected | Applied to selected dates in the calendar. | +| e-disabled | Applied to disabled dates in the calendar. | ```cshtml @using Syncfusion.Blazor.Calendars - + ``` +![Blazor DateRangePicker customized with CssClass to style selected, today, and weekend dates](../images/blazor-daterangepicker-cssclass-customization.png) -![Customization using CssClass Blazor DateRangePicker](../images/blazor-daterangepicker-cssclass-customization.png) - -N> You can refer to our [Blazor Date Range Picker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Date Range Picker example](https://blazor.syncfusion.com/demos/daterangepicker/default-functionalities?theme=bootstrap5) to understand how to present and manipulate data. \ No newline at end of file +Additional references: +- Blazor Date Range Picker feature tour: https://www.syncfusion.com/blazor-components/blazor-daterangepicker +- Blazor Date Range Picker example (Default Functionalities): https://blazor.syncfusion.com/demos/daterangepicker/default-functionalities diff --git a/blazor/daterangepicker/how-to/disable-the-daterangepicker-component.md b/blazor/daterangepicker/how-to/disable-the-daterangepicker-component.md index 8700518611..f4c766acc7 100644 --- a/blazor/daterangepicker/how-to/disable-the-daterangepicker-component.md +++ b/blazor/daterangepicker/how-to/disable-the-daterangepicker-component.md @@ -1,7 +1,7 @@ --- layout: post title: Disable the Syncfusion Blazor DateRangePicker Component | Syncfusion -description: Checkout and learn here all about disabling the Syncfusion Blazor DateRangePicker Component and much more. +description: Learn how to disable the Syncfusion Blazor DateRangePicker component using the Enabled property to prevent focus, typing, popup opening, and user selection. platform: Blazor control: DateRangePicker documentation: ug @@ -9,12 +9,12 @@ documentation: ug # Disable the Blazor DateRangePicker Component -DateRangePicker can be deactivated on a page. Setting [Enabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateRangePicker-1.html#Syncfusion_Blazor_Calendars_SfDateRangePicker_1_Enabled) value to false will disable the component completely from all user interactions, including form post. The following code demonstrates the disabled component. +DateRangePicker can be disabled on a page by setting the [Enabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateRangePicker-1.html#Syncfusion_Blazor_Calendars_SfDateRangePicker_1_Enabled) property to `false`. When disabled, the input cannot receive focus, typing is blocked, and the popup cannot be opened; user selection is not possible. Disabled inputs are typically excluded from form posts. The default value of `Enabled` is `true`, and this property can be data-bound to toggle the disabled state at runtime. Programmatic values (such as `StartDate` and `EndDate`) can still be set in code even when the component is disabled. ```cshtml @using Syncfusion.Blazor.Calendars - + @code { public DateTime? Start { get; set; } = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 20); @@ -22,7 +22,11 @@ DateRangePicker can be deactivated on a page. Setting [Enabled](https://help.syn } ``` +Preview: +- The DateRangePicker input appears disabled, does not accept focus or typing, and the popup cannot be opened. -![Disable State in Blazor DateRangePicker](../images/blazor-daterangepicker-disable-state.png) +![Blazor DateRangePicker shown in a disabled state](../images/blazor-daterangepicker-disable-state.png) -N> You can refer to our [Blazor Date Range Picker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Date Range Picker example](https://blazor.syncfusion.com/demos/daterangepicker/default-functionalities?theme=bootstrap5) to understand how to present and manipulate data. \ No newline at end of file +Additional references: +- Blazor DateRangePicker feature tour: https://www.syncfusion.com/blazor-components/blazor-daterangepicker +- Blazor DateRangePicker example (Default Functionalities): https://blazor.syncfusion.com/demos/daterangepicker/default-functionalities \ No newline at end of file diff --git a/blazor/daterangepicker/how-to/open-popup-on-input-click.md b/blazor/daterangepicker/how-to/open-popup-on-input-click.md index fe654ab7cd..ebaf5e8903 100644 --- a/blazor/daterangepicker/how-to/open-popup-on-input-click.md +++ b/blazor/daterangepicker/how-to/open-popup-on-input-click.md @@ -1,7 +1,7 @@ --- layout: post title: Open the Blazor DateRangePicker popup on Focus | Syncfusion -description: Learn here all about opening the Syncfusion Blazor DateRangePicker popup upon focusing input and much more. +description: Learn how to open the Syncfusion Blazor DateRangePicker popup when the input receives focus by enabling the OpenOnFocus property. platform: Blazor control: DateRangePicker documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Open the Blazor DateRangePicker popup on Focus -You can also open the DateRangePicker popup on input focus by setting the [OpenOnFocus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateRangePicker-1.html#Syncfusion_Blazor_Calendars_SfDateRangePicker_1_OpenOnFocus) property to true. +Open the DateRangePicker popup when the input receives focus by setting the [OpenOnFocus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateRangePicker-1.html#Syncfusion_Blazor_Calendars_SfDateRangePicker_1_OpenOnFocus) property to `true`. The following example demonstrates how to open the DateRangePicker popup when the input is focused. @@ -20,6 +20,4 @@ The following example demonstrates how to open the DateRangePicker popup when th ``` -![Opening Blazor DateRangePicker Popup](../images/blazor-daterangepicker-open-focus.gif) - - +![Opening the Blazor DateRangePicker popup when the input is focused](../images/blazor-daterangepicker-open-focus.gif) \ No newline at end of file diff --git a/blazor/daterangepicker/how-to/set-the-placeholder.md b/blazor/daterangepicker/how-to/set-the-placeholder.md index 98dbce3656..bcb2fc1f22 100644 --- a/blazor/daterangepicker/how-to/set-the-placeholder.md +++ b/blazor/daterangepicker/how-to/set-the-placeholder.md @@ -1,7 +1,7 @@ --- layout: post title: Set the Placeholder in Blazor DateRangePicker Component | Syncfusion -description: Checkout and learn here all about Set the Placeholder in Syncfusion Blazor DateRangePicker component and more. +description: Learn how to set the Placeholder in the Syncfusion Blazor DateRangePicker component to display hint text in the input. platform: Blazor control: DateRangePicker documentation: ug @@ -9,9 +9,9 @@ documentation: ug # Set the Placeholder in Blazor DateRangePicker Component -The following code demonstrates how to set [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateRangePicker-1.html#Syncfusion_Blazor_Calendars_SfDateRangePicker_1_Placeholder) in the DateRangePicker component. +The following code demonstrates how to set the [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateRangePicker-1.html#Syncfusion_Blazor_Calendars_SfDateRangePicker_1_Placeholder) in the DateRangePicker component. -Using `Placeholder`, you can display a short hint in the input element. +Using the `Placeholder` property, a short hint can be displayed in the input element before a value is selected. ```cshtml @using Syncfusion.Blazor.Calendars @@ -19,7 +19,8 @@ Using `Placeholder`, you can display a short hint in the input element. ``` +![Blazor DateRangePicker displaying hint text using the Placeholder property](../images/blazor-daterangepicker-hint-element.png) -![Blazor DateRangePicker with Hint Element](../images/blazor-daterangepicker-hint-element.png) - -N> You can refer to our [Blazor Date Range Picker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Date Range Picker example](https://blazor.syncfusion.com/demos/daterangepicker/default-functionalities?theme=bootstrap5) to understand how to present and manipulate data. \ No newline at end of file +Additional references: +- Blazor DateRangePicker feature tour: https://www.syncfusion.com/blazor-components/blazor-daterangepicker +- Blazor DateRangePicker example (Default Functionalities): https://blazor.syncfusion.com/demos/daterangepicker/default-functionalities?theme=bootstrap5 diff --git a/blazor/daterangepicker/native-events.md b/blazor/daterangepicker/native-events.md index 2d9a5ae54f..3f12ce6162 100644 --- a/blazor/daterangepicker/native-events.md +++ b/blazor/daterangepicker/native-events.md @@ -1,7 +1,7 @@ --- layout: post title: Native Events in Blazor DateRangePicker Component | Syncfusion -description: Checkout and learn here all about Native Events in Syncfusion Blazor DateRangePicker component and more. +description: Learn how to use native DOM events with the Syncfusion Blazor DateRangePicker component, bind event handlers, and pass event data. platform: Blazor control: DateRangePicker documentation: ug @@ -9,13 +9,13 @@ documentation: ug # Native Events in Blazor DateRangePicker Component -The following section explains steps to include native events and pass data to event handler in the DateRangePicker component. +The following section explains how to attach native DOM events to the DateRangePicker component and pass event data to the handler. ## Bind native events to DateRangePicker -You can access any native event by using on `` attribute with a component. The attribute's value is treated as an event handler. +Native events can be attached using the `@on` attribute on the component. The attribute value is treated as the event handler. -In the following example, the KeyPressed method is called every time the key is pressed on input. +In the following example, the `KeyPressed` method is called every time a key is pressed in the input. ```cshtml @using Syncfusion.Blazor.Calendars @@ -23,32 +23,36 @@ In the following example, the KeyPressed method is called every time the key is @code { - public void KeyPressed(){ - Console.WriteLine("Key Pressed!"); - } + public void KeyPressed() + { + Console.WriteLine("Key Pressed!"); + } } ``` -Also, you can rewrite the above example code as follows using Lambda expressions. +Preview: Pressing a key while the input is focused triggers KeyPressed and writes a message to the console. + +The previous example can also be written using a lambda expression. ```cshtml @using Syncfusion.Blazor.Calendars - + ``` -## Pass event data to event handler +Preview: Each key press executes the inline lambda and writes a message to the console. -Blazor provides a set of argument types to map to native events. The list of event types and event arguments are: +## Pass event data to event handler -* Focus Events - FocusEventArgs -* Mouse Events - MouseEventArgs -* Keyboard Events - KeyboardEventArgs -* Input Events - ChangeEventArgs/EventArgs -* Touch Events – TouchEventArgs -* Pointer Events – PointerEventArgs +Blazor provides argument types that map to native DOM events. Common event categories and argument types include: +- Focus events - FocusEventArgs +- Mouse events - MouseEventArgs +- Keyboard events - KeyboardEventArgs +- Input events - ChangeEventArgs/EventArgs +- Touch events - TouchEventArgs +- Pointer events - PointerEventArgs -In the following example, the KeyPressed method is called every time any key is pressed inside input. But the message will be printed when you press "5" key. +In the following example, the `KeyPressed` method is invoked on each key press, and a message is written only when the "5" key is pressed. ```cshtml @using Syncfusion.Blazor.Calendars @@ -66,15 +70,15 @@ In the following example, the KeyPressed method is called every time any key is } ``` -Using Lambda expression also, you can pass the event data to the event handler. +Preview: Pressing keys raises KeyPressed with KeyboardEventArgs; when the key value is "5", the console logs a message. ## List of native events supported -| List of Native events | | | | +| Event | Event | Event | Event | | --- | --- | --- | --- | | onclick | onblur | onfocus | onfocusout | -| onmousemove | onmouseover | onmouseout | onmousedown | onmouseup | -| ondblclick | onkeydown | onkeyup | onkeypress | -| ontouchend | onfocusin | onmouseup | ontouchstart | +| onmousemove | onmouseover | onmouseout | onmousedown | +| onmouseup | ondblclick | onkeydown | onkeyup | +| onkeypress | ontouchstart | ontouchend | onfocusin | -N> You can refer to our [Blazor Date Range Picker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Date Range Picker example](https://blazor.syncfusion.com/demos/daterangepicker/default-functionalities?theme=bootstrap4) to understand how to present and manipulate data. \ No newline at end of file +Additional resources: The [Blazor Date Range Picker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) feature tour page provides an overview of capabilities. A live [Blazor Date Range Picker example](https://blazor.syncfusion.com/demos/daterangepicker/default-functionalities?theme=bootstrap5) demonstrates default functionalities. \ No newline at end of file diff --git a/blazor/daterangepicker/range-restriction.md b/blazor/daterangepicker/range-restriction.md index 0b2d0a2510..fd4afe7b3b 100644 --- a/blazor/daterangepicker/range-restriction.md +++ b/blazor/daterangepicker/range-restriction.md @@ -1,7 +1,7 @@ --- layout: post title: Range Restriction in Blazor DateRangePicker Component | Syncfusion -description: Checkout and learn here all about Range Restriction in Syncfusion Blazor DateRangePicker component and more. +description: Learn how to restrict selectable ranges in the Syncfusion Blazor DateRangePicker using Min, Max, MinDays, MaxDays, and StrictMode to control valid input and selection. platform: Blazor control: DateRangePicker documentation: ug @@ -9,16 +9,16 @@ documentation: ug # Range Restriction in Blazor DateRangePicker Component -Range selection in a DateRangePicker can be made-to-order with desired restrictions based on the application needs. +Range selection in the DateRangePicker can be constrained to meet application requirements using built-in properties. ## Restrict the range within a range -You can restrict the minimum and maximum date that can be allowed as Start and End date in a range selection with the help of [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DateRangePickerModel-1.html#Syncfusion_Blazor_Calendars_DateRangePickerModel_1_Min) and [Max](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DateRangePickerModel-1.html#Syncfusion_Blazor_Calendars_DateRangePickerModel_1_Max) properties. +Limit the earliest and latest selectable dates using the [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DateRangePickerModel-1.html#Syncfusion_Blazor_Calendars_DateRangePickerModel_1_Min) and [Max](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DateRangePickerModel-1.html#Syncfusion_Blazor_Calendars_DateRangePickerModel_1_Max) properties. -* `Min`: Sets the minimum date that can be selected as StartDate. -* `Max`: Sets the maximum date that can be selected as EndDate. +- `Min`: Sets the earliest date allowed for `StartDate`. +- `Max`: Sets the latest date allowed for `EndDate`. -In the following sample, you can select a range from 15th day of this month to 15th day of next month. +In the following sample, the selectable range is limited from the 15th of the current month to the 15th of the next month. ```cshtml @using Syncfusion.Blazor.Calendars @@ -26,82 +26,81 @@ In the following sample, you can select a range from 15th day of this month to 1 @code { - public DateTime MinDate {get;set;} = new DateTime(DateTime.Now.Year,DateTime.Now.Month,15); - public DateTime MaxDate {get;set;} = new DateTime(DateTime.Now.Year, DateTime.Now.Month+1, 15); + public DateTime MinDate {get;set;} = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 15); + public DateTime MaxDate {get;set;} = new DateTime(DateTime.Now.Year, DateTime.Now.Month + 1, 15); } ``` - -![Range Restriction in Blazor DateRangePicker](./images/blazor-daterangepicker-range-restriction.png) +![Range restriction applied in the Blazor DateRangePicker](./images/blazor-daterangepicker-range-restriction.png) ## Range span -Span between ranges can be limited to avoid excess or less days selection towards the required days in a range. In this, minimum and maximum span allowed within the date range can be customized by the [MinDays](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateRangePicker-1.html#Syncfusion_Blazor_Calendars_SfDateRangePicker_1_MinDays) and [MaxDays](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateRangePicker-1.html#Syncfusion_Blazor_Calendars_SfDateRangePicker_1_MaxDays) properties. +Constrain the length of the selected range using the [MinDays](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateRangePicker-1.html#Syncfusion_Blazor_Calendars_SfDateRangePicker_1_MinDays) and [MaxDays](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateRangePicker-1.html#Syncfusion_Blazor_Calendars_SfDateRangePicker_1_MaxDays) properties. -* `MinDays`: Sets the minimum number of days between Start and EndDate. -* `MaxDays`: Sets the maximum number of days between Start and EndDate. +- `MinDays`: Sets the minimum number of days between `StartDate` and `EndDate`. +- `MaxDays`: Sets the maximum number of days between `StartDate` and `EndDate`. -In the following sample, the range selection should be greater than 5 days and less than 10 days, else it will not set. +In the following example, the selected range must be greater than 5 days and less than 10 days; otherwise, the range is not set. ```cshtml @using Syncfusion.Blazor.Calendars - + ``` - -![Blazor DateRangePicker Selection in Span between Range](./images/blazor-daterangepicker-range-span.png) +![Blazor DateRangePicker enforcing a span between start and end dates](./images/blazor-daterangepicker-range-span.png) ## Strict mode -DateRangePicker provides an option to limit the user towards entering the valid date. With `StrictMode`, you can set only the valid date. If any invalid range is specified, the date range value resets to previous value. This restriction can be availed by setting the [StrictMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateRangePicker-1.html#Syncfusion_Blazor_Calendars_SfDateRangePicker_1_StrictMode) property to true. +The [StrictMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateRangePicker-1.html#Syncfusion_Blazor_Calendars_SfDateRangePicker_1_StrictMode) property controls how typed input is validated against `Min` and `Max`. + +When StrictMode is enabled (true): +- Only valid dates within the `Min` and `Max` range are accepted. +- If an invalid date range is entered, the component reverts to the previous valid value. +- If a date is out of range, the value is clamped to the nearest boundary (`Min` or `Max`). ```cshtml @using Syncfusion.Blazor.Calendars - + @code { - public DateTime MinDate {get;set;} = new DateTime(DateTime.Now.Year,DateTime.Now.Month,15); - public DateTime MaxDate {get;set;} = new DateTime(DateTime.Now.Year, DateTime.Now.Month+1, 15); - public DateTime? Start {get;set;} = new DateTime(DateTime.Now.Year,DateTime.Now.Month,20); - public DateTime? End {get;set;} = new DateTime(DateTime.Now.Year, DateTime.Now.Month+1, 25); + public DateTime MinDate {get;set;} = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 15); + public DateTime MaxDate {get;set;} = new DateTime(DateTime.Now.Year, DateTime.Now.Month + 1, 15); + public DateTime? Start {get;set;} = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 20); + public DateTime? End {get;set;} = new DateTime(DateTime.Now.Year, DateTime.Now.Month + 1, 25); } ``` -If the value of `Min` or `Max` property is changed through code behind, update the `StartDate` and `EndDate` properties to set within the range. - -If the Start and End dates are out of specified date range, a validation error class will be appended to the input element. If `StrictMode` is enabled and both the Start and End dates are less than the Min date, then the Start and End dates will be updated with Min date. - -If both the Start and End dates are higher than the Max date, then Start and End dates will be updated with the Max date. +If the values of `Min` or `Max` are changed through code-behind, update the `StartDate` and `EndDate` to keep them within the defined range. -If StartDate is less than Min date, it will be updated with Min date. If EndDate is greater than Max date, it will be updated with the Max date. +If the start/end dates fall outside the allowed range, an error style is applied to the input. With `StrictMode` enabled, out-of-range dates are adjusted to the boundary: +- If both start and end are less than `Min`, they are set to `Min`. +- If both are greater than `Max`, they are set to `Max`. +- If only the start is less than `Min`, it is set to `Min`. +- If only the end is greater than `Max`, it is set to `Max`. +![Blazor DateRangePicker with StrictMode enabled](./images/blazor-daterangepicker-strict-mode.png) -![Blazor DateRangePicker in Strict Mode](./images/blazor-daterangepicker-strict-mode.png) - -By default, the DatePicker acts in `StrictMode` false state that allows you to enter the invalid or out-of-range date in text box. - -If the Start and End dates are out of specified date range or invalid, then the model value will be set to `out of range` value or `null` respectively with highlighted `error` class to indicate the value is out of range or invalid. - -The following code demonstrates the `StrictMode` as false. Here, it allows you to enter the valid or invalid value in text box. +When StrictMode is disabled (false) (default): +- The textbox allows invalid or out-of-range dates to be entered. +- If the entered date is invalid, the model value becomes `null`. +- If the date is out of range, the model can hold the out-of-range value, and an `error` style indicates the condition. ```cshtml @using Syncfusion.Blazor.Calendars - + @code { - public DateTime MinDate {get;set;} = new DateTime(DateTime.Now.Year,DateTime.Now.Month,15); - public DateTime MaxDate {get;set;} = new DateTime(DateTime.Now.Year, DateTime.Now.Month+1, 15); - public DateTime? Start {get;set;} = new DateTime(DateTime.Now.Year,DateTime.Now.Month,20); - public DateTime? End {get;set;} = new DateTime(DateTime.Now.Year, DateTime.Now.Month+1, 25); + public DateTime MinDate {get;set;} = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 15); + public DateTime MaxDate {get;set;} = new DateTime(DateTime.Now.Year, DateTime.Now.Month + 1, 15); + public DateTime? Start {get;set;} = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 20); + public DateTime? End {get;set;} = new DateTime(DateTime.Now.Year, DateTime.Now.Month + 1, 25); } ``` +![Blazor DateRangePicker with StrictMode disabled](./images/blazor-daterangepicker-without-strict-mode.png) - -![Blazor DateRangePicker without Strict Mode](./images/blazor-daterangepicker-without-strict-mode.png) - -N> You can refer to our [Blazor Date Range Picker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Date Range Picker example](https://blazor.syncfusion.com/demos/daterangepicker/default-functionalities?theme=bootstrap5) to understand how to present and manipulate data. \ No newline at end of file +N> Additional resources: The [Blazor Date Range Picker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) feature tour page provides an overview of capabilities. A live [Blazor Date Range Picker example](https://blazor.syncfusion.com/demos/daterangepicker/default-functionalities?theme=bootstrap5) demonstrates default functionalities. \ No newline at end of file diff --git a/blazor/daterangepicker/style-appearance.md b/blazor/daterangepicker/style-appearance.md index 7cbe765de2..fddc05559c 100644 --- a/blazor/daterangepicker/style-appearance.md +++ b/blazor/daterangepicker/style-appearance.md @@ -1,6 +1,6 @@ --- layout: post -title: Style and appearance in Blazor DateRangePicker Component | Syncfusion +title: Style and Appearance in Blazor DateRangePicker Component | Syncfusion description: Checkout and learn here all about style and appearance in Syncfusion Blazor DateRangePicker component and more. platform: Blazor control: DateRangePicker @@ -9,161 +9,193 @@ documentation: ug # Style and Appearance in Blazor DateRangePicker Component -The following content provides the exact CSS structure that can be used to modify the control's appearance based on the user preference. +Use the following CSS selectors to tailor the DateRangePicker component’s appearance based on user preferences and application themes. ## Customizing the appearance of DateRangePicker container element -Use the following CSS to customize the appearance like height and font size of the DateRangePicker container element. +Use the following CSS to adjust the input’s font size and height for the DateRangePicker container element. ```css /* To specify height and font size */ -.e-input-group input.e-input, .e-input-group.e-control-wrapper input.e-input { - font-size: 20px; - height: 40px; +.e-input-group input.e-input, +.e-input-group.e-control-wrapper input.e-input { + font-size: 20px; + height: 40px; } ``` +Preview of the code snippet: The DateRangePicker input field renders taller with a 40px height and displays larger text at 20px. + ## Customizing the DateRangePicker icon element -Use the following CSS to customize the DateRangePicker icon element. +Use the following CSS to style the DateRangePicker icon’s background color and size. ```css /* To specify background color and font size */ -.e-input-group .e-input-group-icon:last-child, .e-input-group.e-control-wrapper .e-input-group-icon:last-child { - background-color: darkgray; - font-size: 14px; +.e-input-group .e-input-group-icon:last-child, +.e-input-group.e-control-wrapper .e-input-group-icon:last-child { + background-color: darkgray; + font-size: 14px; } ``` +Preview of the code snippet: The calendar icon at the right end of the input shows a dark gray background and slightly larger icon glyph. + ## Customizing the DateRangePicker popup calendar header -Use the following CSS to customize the DateRangePicker popup calendar header. +Use the following CSS to customize the popup calendar header area (range summary section). ```css /* To specify background and height */ .e-daterangepicker.e-popup .e-range-header { - background: beige; - height: 80px; + background: beige; + height: 80px; } ``` +Preview of the code snippet: The popup header area displays a beige background with increased vertical space (80px height). + ## Customizing the DateRangePicker popup calendar header title -Use the following CSS to customize the DateRangePicker popup calendar header title. +Use the following CSS to style the start and end labels in the popup header. ```css /* To specify color and font size */ -.e-daterangepicker.e-popup .e-range-header .e-start-label, .e-daterangepicker.e-popup .e-range-header .e-end-label { - color: brown; - font-size: 30px; +.e-daterangepicker.e-popup .e-range-header .e-start-label, +.e-daterangepicker.e-popup .e-range-header .e-end-label { + color: brown; + font-size: 30px; } ``` +Preview of the code snippet: The “Start Date” and “End Date” labels in the popup header appear in brown with large 30px text. + ## Customizing the DateRangePicker popup calendar content -Use the following CSS to customize the DateRangePicker popup calendar content. +Use the following CSS to change the popup calendar content background. ```css /* To specify background color */ .e-daterangepicker.e-popup .e-calendar { - background-color: brown; + background-color: brown; } ``` +Preview of the code snippet: The calendar area inside the popup uses a brown background behind the date grid. + ## Customizing the DateRangePicker popup calendar content title -Use the following CSS to customize the DateRangePicker popup calendar content title. +Use the following CSS to style the calendar title (month/year) in the popup. ```css /* To specify color and font size */ .e-daterangepicker.e-popup .e-calendar .e-header .e-title { - color: beige; - font-size: 20px; + color: beige; + font-size: 20px; } ``` +Preview of the code snippet: The month/year title in the calendar header appears in beige with a larger 20px font. + ## Customizing the DateRangePicker popup calendar previous and next icon -Use the following CSS to customize the DateRangePicker popup calendar previous and next icon. +Use the following CSS to change the size of the previous and next navigation icons. ```css /* To specify font size */ -.e-calendar .e-header .e-prev, .e-calendar .e-header .e-next, .e-bigger.e-small .e-calendar .e-header .e-prev, .e-bigger.e-small .e-calendar .e-header .e-next { - font-size: 20px; +.e-calendar .e-header .e-prev, +.e-calendar .e-header .e-next, +.e-bigger.e-small .e-calendar .e-header .e-prev, +.e-bigger.e-small .e-calendar .e-header .e-next { + font-size: 20px; } ``` +Preview of the code snippet: The previous and next arrow icons in the calendar header render larger for improved visibility. + ## Customizing the DateRangePicker popup calendar date cell grid on hovering -Use the following CSS to customize the DateRangePicker popup calendar date cell grid on hovering. +Use the following CSS to customize the hover style for date cells in the popup calendar. ```css /* To specify background color and border */ .e-calendar .e-content td:hover span.e-day { - background-color: beige; - border: 1px solid black; + background-color: beige; + border: 1px solid black; } ``` +Preview of the code snippet: Hovering over a date cell highlights the day with a beige background and a black 1px border. + ## Customizing the DateRangePicker popup calendar primary button in footer -Use the following CSS to customize the DateRangePicker popup calendar primary button in footer. +Use the following CSS to customize the primary Apply button in the popup footer (disabled state shown below). ```css /* To specify background color and border color */ -.e-daterangepicker.e-popup .e-footer .e-btn.e-apply.e-flat.e-primary:disabled, .e-daterangepicker.e-popup .e-footer .e-btn.e-apply.e-flat.e-primary:disabled, .e-daterangepicker.e-popup .e-footer .e-css.e-btn.e-apply.e-flat.e-primary:disabled, .e-daterangepicker.e-popup .e-footer .e-css.e-btn.e-apply.e-flat.e-primary:disabled { - background-color: brown; - border-color: black; +.e-daterangepicker.e-popup .e-footer .e-btn.e-apply.e-flat.e-primary:disabled, +.e-daterangepicker.e-popup .e-footer .e-css.e-btn.e-apply.e-flat.e-primary:disabled { + background-color: brown; + border-color: black; } ``` +Preview of the code snippet: The disabled Apply button in the footer displays a brown background with a black border, making the disabled state visually distinct. + ## Customizing the DateRangePicker popup calendar cancel button in footer -Use the following CSS to customize the DateRangePicker popup calendar cancel button in footer. +Use the following CSS to customize the Cancel button in the popup footer. ```css /* To specify background color, color, and border color */ -.e-daterangepicker.e-popup .e-footer .e-btn.e-flat, .e-daterangepicker.e-popup .e-footer .e-css.e-btn.e-flat { - background-color: beige; - border-color: black; - color: maroon; +.e-daterangepicker.e-popup .e-footer .e-btn.e-flat, +.e-daterangepicker.e-popup .e-footer .e-css.e-btn.e-flat { + background-color: beige; + border-color: black; + color: maroon; } ``` -## Customizing the footer element in the DateRangePicker popup calendar +Preview of the code snippet: The Cancel button renders with a beige background, maroon text, and a black border. + +## Customizing the footer element in the DateRangePicker popup calendar -Use the following CSS to customize the DateRangePicker popup calendar footer element. +Use the following CSS to adjust the popup footer container’s background and size. ```css -/* To specify background color, color, and border color */ +/* To specify background color and height */ .e-daterangepicker.e-popup .e-footer { - background-color: beige; - height: 50px; + background-color: beige; + height: 50px; } ``` -## Customizing the selected date cell grid in the DateRangePicker popup calendar +Preview of the code snippet: The footer area at the bottom of the popup expands to 50px height and appears with a beige background. + +## Customizing the selected date cell grid in the DateRangePicker popup calendar -Use the following CSS to customize the selected date cell grid in the DateRangePicker popup calendar. +Use the following CSS to style the focused “today” cell when selected. ```css /* To specify background and border */ .e-calendar .e-content td.e-focused-date.e-today span.e-day { - background: lightgrey; - border: 1px solid black; - - } + background: lightgrey; + border: 1px solid black; +} ``` +Preview of the code snippet: The selected “today” cell shows a light grey highlight with a solid black border for emphasis. + ## Full screen mode support in mobiles and tablets -The DateRangePicker component's full-screen mode feature enables users to view the component popup element in full-screen mode on mobile devices with improved visibility and a better user experience. It is important to mention that this feature is exclusively available for mobile devices in both landscape and portrait orientations. To activate the full screen mode within the DateRangePicker component, simply set the [FullScreen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateRangePicker-1.html#Syncfusion_Blazor_Calendars_SfDateRangePicker_1_FullScreen) API value to `true`. This action will extend the calendar and presets popup element to occupy the entire screen on mobile devices. +The DateRangePicker supports a full-screen popup on mobile devices to improve visibility and usability in both landscape and portrait orientations. To enable full screen mode, set the [FullScreen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateRangePicker-1.html#Syncfusion_Blazor_Calendars_SfDateRangePicker_1_FullScreen) property to `true`. On mobile devices, the calendar and presets popup expands to occupy the entire screen; desktop behavior is unchanged. ```cshtml @using Syncfusion.Blazor.Calendars - - + ``` -![DateRangePickerDefaultFullScreen](./images/blazor-daterangepicker-full-screen-mode.gif) \ No newline at end of file +![Blazor DateRangePicker popup displayed in mobile full-screen mode](./images/blazor-daterangepicker-full-screen-mode.gif) + +Preview of the code snippet: On mobile devices, opening the DateRangePicker displays the calendar and presets in a full-screen overlay for improved usability; desktop layout remains unchanged. \ No newline at end of file diff --git a/blazor/daterangepicker/week-number.md b/blazor/daterangepicker/week-number.md index 684a315eba..2d5e9b3060 100644 --- a/blazor/daterangepicker/week-number.md +++ b/blazor/daterangepicker/week-number.md @@ -9,7 +9,7 @@ documentation: ug # Week Number in Blazor DateRangePicker Component -You can enable WeekNumber in the DateRangePicker by using the [WeekNumber](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html?&_ga=2.27644924.1192045546.1630297484-1815315561.1628088345#Syncfusion_Blazor_Calendars_CalendarBase_1_WeekNumber) property. +Enable week numbers in the DateRangePicker to display the week index in the calendar’s left column by using the [WeekNumber](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_WeekNumber) property. ```cshtml @@ -24,14 +24,15 @@ You can enable WeekNumber in the DateRangePicker by using the [WeekNumber](https ## Week Rule -You can enable `WeekRule` in the DateRangePicker by using the [WeekRule](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_WeekRule) property. This property provide an option to specify the rule for defining the first week of the year. Find the possible values of `WeekRule` property. +Configure how the first week of the year is determined using the [WeekRule](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_WeekRule) property. This setting controls how week numbers roll over at the start of the year. The following values correspond to .NET’s CalendarWeekRule: Types |Description -----|----- -FirstDay |Set the first week of the year's week number to be started from 1. Then it followed as 1, 2, 3 ... -FirstFullWeek |Set the first week of the year's week number to be started from 52 or 53 (i.e December last week's week Number). Then it followed as 53, 1, 2 ... -FirstFourDayWeek | Set the week number based on the majority of dates present in the week for the respected months. If January dates are presented in the week more than December, the first week of the year's week number will be started from 1. If December dates are presented in the week more than January, the first week of the year's week number will be started from 52 or 53. +FirstDay | The first week starts on the first day of the year; subsequent weeks are numbered 1, 2, 3, and so on. +FirstFullWeek | The first full week of the year is week 1; days before the first full week are counted as the last week (52 or 53) of the previous year. +FirstFourDayWeek | The first week with at least four days in the new year is week 1; otherwise, that week is counted as the last week (52 or 53) of the previous year. +N> The current culture (Locale) and the first day of the week influence week numbering. By default, the DateRangePicker uses the culture’s settings unless overridden. ![Blazor DateRangePicker displays Week Rule of FirstDay](./images/blazor-daterangepicker-first-day.png)