From 587bbc5b2e3fa4f752d4e474269b1f6685b144d6 Mon Sep 17 00:00:00 2001 From: Ashwini-SF5049 Date: Thu, 9 Oct 2025 13:58:33 +0530 Subject: [PATCH 1/4] 983104: Updated the UG Documentation for the Datepicker,datetimepicker and daterangepicker --- blazor/datepicker/accessibility.md | 40 +++++----- blazor/datepicker/data-binding.md | 14 ++-- blazor/datepicker/date-format.md | 14 ++-- blazor/datepicker/date-range.md | 16 ++-- blazor/datepicker/dateonly-support.md | 17 +++-- blazor/datepicker/events.md | 26 +++---- .../getting-started-with-web-app.md | 59 ++++++++------- blazor/datepicker/getting-started.md | 34 +++++---- blazor/datepicker/globalization.md | 12 +-- .../disabled-the-datepicker-component.md | 10 +-- .../open-datepicker-popup-on-input-click.md | 12 +-- .../datepicker/how-to/set-the-placeholder.md | 10 +-- blazor/datepicker/how-to/set-the-readonly.md | 12 ++- blazor/datepicker/islamic-calendar.md | 10 +-- blazor/datepicker/mask-support.md | 26 +++---- blazor/datepicker/native-events.md | 28 +++---- blazor/datepicker/special-dates.md | 8 +- blazor/datepicker/strict-mode.md | 30 ++++---- blazor/datepicker/style-appearance.md | 24 +++--- blazor/datepicker/view.md | 20 ++--- blazor/datepicker/week-number.md | 24 +++--- blazor/daterangepicker/accessibility.md | 35 +++++---- blazor/daterangepicker/customization.md | 9 +-- blazor/daterangepicker/data-binding.md | 14 ++-- blazor/daterangepicker/dateonly-support.md | 17 +++-- blazor/daterangepicker/events.md | 30 ++++---- .../getting-started-with-web-app.md | 51 ++++++------- blazor/daterangepicker/getting-started.md | 30 ++++---- blazor/daterangepicker/globalization.md | 15 ++-- .../how-to/customization-using-cssclass.md | 53 +++++++------ .../disable-the-daterangepicker-component.md | 7 +- .../how-to/open-popup-on-input-click.md | 8 +- .../how-to/set-the-placeholder.md | 9 +-- blazor/daterangepicker/native-events.md | 30 ++++---- blazor/daterangepicker/range-restriction.md | 61 ++++++++------- blazor/daterangepicker/style-appearance.md | 32 ++++---- blazor/daterangepicker/week-number.md | 11 +-- blazor/datetime-picker/accessibility.md | 75 +++++++++---------- blazor/datetime-picker/data-binding.md | 20 +++-- blazor/datetime-picker/date-time-format.md | 18 ++--- blazor/datetime-picker/date-time-range.md | 35 ++++----- blazor/datetime-picker/events.md | 30 ++++---- .../getting-started-with-web-app.md | 45 +++++------ blazor/datetime-picker/getting-started.md | 28 +++---- blazor/datetime-picker/globalization.md | 10 +-- .../disable-the-datetimepicker-component.md | 9 +-- .../how-to/open-popup-on-input-click.md | 14 ++-- .../how-to/set-the-placeholder.md | 15 ++-- blazor/datetime-picker/islamic-calendar.md | 10 +-- blazor/datetime-picker/mask-support.md | 30 +++----- blazor/datetime-picker/native-events.md | 32 ++++---- blazor/datetime-picker/special-dates.md | 6 +- blazor/datetime-picker/strict-mode.md | 24 +++--- blazor/datetime-picker/style-appearance.md | 14 ++-- blazor/datetime-picker/week-number.md | 12 +-- 55 files changed, 622 insertions(+), 663 deletions(-) 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..5f7c0ebde5 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,7 @@ 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 user edits do not update the source automatically. ```cshtml @using Syncfusion.Blazor.Calendars @@ -38,7 +38,7 @@ You can bind the value to the DatePicker component directly for `Value` property ## 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. ```cshtml @using Syncfusion.Blazor.Calendars @@ -54,9 +54,7 @@ public DateTime? DateValue { get; set; } = DateTime.Now; ## 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. - -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. +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 in most cases; `StateHasChanged()` is typically required only when changes originate outside the normal event pipeline (for example, from timers, external services, or non-UI threads). The following example shows updating the value in the DatePicker’s `ValueChange` event. ```cshtml @using Syncfusion.Blazor.Calendars @@ -77,4 +75,4 @@ private void onChange(Syncfusion.Blazor.Calendars.ChangedEventArgs ar StateHasChanged(); } } -``` +``` \ No newline at end of file diff --git a/blazor/datepicker/date-format.md b/blazor/datepicker/date-format.md index dadaed823d..1e04a3aadc 100644 --- a/blazor/datepicker/date-format.md +++ b/blazor/datepicker/date-format.md @@ -1,7 +1,7 @@ --- layout: post 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. +description: Learn how to control display and input date formats in the Syncfusion Blazor DatePicker using .NET standard and custom format strings with culture-aware parsing. platform: Blazor control: DatePicker documentation: ug @@ -11,13 +11,11 @@ documentation: ug ## 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. Use it to control 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's 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. - -> 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. +> 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. {% highlight Razor %} @@ -30,9 +28,9 @@ By default, the DatePicker's format is based on the culture. You can also set th ## 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 users can type dates that will be parsed into a valid value in the DatePicker. -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. +Typed input is parsed according to the current culture and any formats specified. After the user confirms input (for example, by pressing Enter or Tab, or when the input loses focus), the value is reformatted and displayed using the configured display format. You can specify [.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 to accept multiple input patterns (for example, d-M-yy, d/M/yyyy, yyyy-MM-dd). {% highlight Razor %} 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..c4b19f2a11 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,9 +9,15 @@ 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. + +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. {% highlight Razor %} @@ -19,5 +25,4 @@ The [DateOnly](https://learn.microsoft.com/en-us/dotnet/api/system.dateonly?view {% endhighlight %} - -![Blazor TimePicker with DateOnly](./images/DatePickerDateOnly.gif) \ No newline at end of file +![Blazor DatePicker with DateOnly](./images/DatePickerDateOnly.gif) \ No newline at end of file diff --git a/blazor/datepicker/events.md b/blazor/datepicker/events.md index e9d9609a1a..83a926d789 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,9 +9,9 @@ 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.*`) -----|----- @@ -22,7 +22,7 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell) ## 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 @@ -41,7 +41,7 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell) ## ValueChange -`ValueChange` event triggers when the Calendar value is changed. +The `ValueChange` event is triggered when the DatePicker value (selected date) changes. ```cshtml @using Syncfusion.Blazor.Calendars @@ -60,7 +60,7 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell) ## OnClose -`OnClose` event triggers when the popup is closed. +The `OnClose` event is triggered when the popup is closed. ```cshtml @using Syncfusion.Blazor.Calendars @@ -79,7 +79,7 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell) ## Created -`Created` event triggers when the component is created. +The `Created` event is triggered when the component is created. ```cshtml @using Syncfusion.Blazor.Calendars @@ -98,7 +98,7 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell) ## Destroyed -`Destroyed` event triggers when the component is destroyed. +The `Destroyed` event is triggered when the component is destroyed. ```cshtml @using Syncfusion.Blazor.Calendars @@ -117,7 +117,7 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell) ## Focus -`Focus` event triggers when the input gets focus. +The `Focus` event is triggered when the input gains focus. ```cshtml @using Syncfusion.Blazor.Calendars @@ -136,7 +136,7 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell) ## 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 @@ -155,7 +155,7 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell) ## OnOpen -`OnOpen` event triggers when the popup is opened. +The `OnOpen` event is triggered when the popup is opened. ```cshtml @using Syncfusion.Blazor.Calendars @@ -174,7 +174,7 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell) ## 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. ```cshtml @using Syncfusion.Blazor.Calendars @@ -191,4 +191,4 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell) } ``` -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). +N> The DatePicker currently supports the events listed above. Additional events may be introduced in future releases based on user requests. If the 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/datepicker/getting-started-with-web-app.md b/blazor/datepicker/getting-started-with-web-app.md index 757dbdcf5b..7607d0174a 100644 --- a/blazor/datepicker/getting-started-with-web-app.md +++ b/blazor/datepicker/getting-started-with-web-app.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting Started with Syncfusion Blazor DatePicker Component in WebApp -description: Checkout and learn about the documentation for getting started with Blazor DatePicker Component in Blazor Web App. +title: Getting Started with Syncfusion Blazor DatePicker Component in Web App +description: Learn how to add and configure the Syncfusion Blazor DatePicker in a Blazor Web App, including NuGet setup, render modes, interactivity, namespaces, and basic usage. platform: Blazor component: DatePicker documentation: ug @@ -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 you are 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 your 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 %} @@ -227,7 +229,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i ## 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) and the [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 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..75ae386dcf 100644 --- a/blazor/datepicker/getting-started.md +++ b/blazor/datepicker/getting-started.md @@ -1,7 +1,7 @@ --- layout: post title: Getting Started with Blazor DatePicker Component | Syncfusion -description: Checkout and learn about getting started with Blazor DatePicker component in Blazor WebAssembly Application. +description: Learn how to get started with the Syncfusion Blazor DatePicker in a Blazor WebAssembly app, including NuGet installation, service registration, and adding styles and scripts. platform: Blazor control: DatePicker documentation: ug @@ -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 you are 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> See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for available themes and reference 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 script options, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references). If styles or scripts are missing, the component may appear unstyled or may not function as expected. ## Add Blazor DatePicker component @@ -158,7 +160,7 @@ Add the Syncfusion® Blazor DatePicker compo ## 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..49fdca4f3f 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 @@ -1,7 +1,7 @@ --- layout: post title: Open the Blazor DatePicker popup on Focus | Syncfusion -description: Learn here all about opening the Syncfusion Blazor DatePicker popup upon focusing input and much more. +description: Learn how to open the Syncfusion Blazor DatePicker popup when the input receives focus using the Focus event with ShowPopupAsync or the built-in OpenOnFocus property. platform: Blazor control: DatePicker documentation: ug @@ -9,6 +9,8 @@ documentation: ug # Open the Blazor DatePicker popup on Focus +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. + You can open the DatePicker popup on input focus by calling the `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. +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. 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. @@ -44,5 +45,4 @@ The following example demonstrates how to open the DatePicker popup when the inp ``` -![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..683cfbdddb 100644 --- a/blazor/datepicker/how-to/set-the-readonly.md +++ b/blazor/datepicker/how-to/set-the-readonly.md @@ -11,17 +11,17 @@ documentation: ug ## 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, users can type into the textbox, and the popup calendar can be opened and used to select a date. When `Enabled` is set to `false`, the input cannot be focused or edited, and the popup cannot be opened (the component is fully disabled). This property can be data-bound to toggle the disabled state at runtime. ## 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`, users can type in the textbox and also select a value from the popup. When `AllowEdit` is `false`, the textbox becomes non-editable (typing is blocked), but users can still open the popup and select a value with the mouse or keyboard. Use this setting for selection-only scenarios while keeping the component interactive. ## 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 `false`, the input is editable and users can select a value from the popup. When `Readonly` is `true`, user input is not allowed and the popup should not be opened; the input can still receive focus for accessibility and form navigation. To enforce a fully read-only UI, set `Readonly="true"` and also disable editing with `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. +The following code demonstrates how to set `Readonly` in the DatePicker component. This is achieved 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. ```cshtml @using Syncfusion.Blazor.Calendars @@ -33,6 +33,4 @@ The following code demonstrates how to set `Readonly` in DatePicker component. Y } ``` - - -![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) \ No newline at end of file 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..d955052678 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,13 +9,13 @@ 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. -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 @@ -29,7 +29,7 @@ In the following example, the KeyPressed method is called every time the key is } ``` -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 @@ -39,16 +39,16 @@ Also, you can rewrite the previous code example as follows using the Lambda expr ## 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 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 @@ -66,7 +66,7 @@ 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. ## List of native events supported diff --git a/blazor/datepicker/special-dates.md b/blazor/datepicker/special-dates.md index 40f1c34ad6..1e18b63f8d 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,7 +9,7 @@ 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 @@ -87,6 +87,4 @@ You can customize specific dates in a DatePicker by using the [OnRenderDayCell]( ``` - - -![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) \ No newline at end of file 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..199a80a9b2 100644 --- a/blazor/datepicker/style-appearance.md +++ b/blazor/datepicker/style-appearance.md @@ -1,7 +1,7 @@ --- layout: post -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. +title: Style and Appearance in Blazor DatePicker Component | Syncfusion +description: Learn how to customize the style and appearance of the Syncfusion Blazor DatePicker using CSS, including container, icon, label, background color, and mobile full-screen. platform: Blazor control: DatePicker documentation: ug @@ -9,11 +9,11 @@ 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. +The following guidance describes the CSS structure that can be used to tailor the DatePicker component’s appearance based on user preferences. ## Customizing the appearance of DatePicker container element -Use the following CSS to customize the appearance of DatePicker container element. +Use the following CSS to adjust the input height and font size for the DatePicker’s container element. ```css /* To specify height and font size */ @@ -25,7 +25,7 @@ Use the following CSS to customize the appearance of DatePicker container elemen ## Customizing the DatePicker icon element -Use the following CSS to customize the DatePicker icon element +Use the following CSS to modify the DatePicker’s icon size and background color. ```css /* To specify background color and font size */ @@ -37,7 +37,7 @@ Use the following CSS to customize the DatePicker icon element ## Customizing the appearance of the DatePicker label -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. +To customize the floating label’s appearance, use the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfInputTextBase-1.html#Syncfusion_Blazor_Inputs_SfInputTextBase_1_CssClass) property with custom CSS. The example below applies a compact label size and color. ```cshtml @using Syncfusion.Blazor.Calendars @@ -61,7 +61,7 @@ To customize the appearance of the DatePicker label, you can use the [CssClass]( ## Adding background color to DatePicker container element -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. +Customize the background color of the DatePicker’s visible input by targeting the appropriate wrapper class and setting the `background-color` property. {% tabs %} {% highlight razor %} @@ -71,11 +71,11 @@ 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 in mobiles and tablets -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. +The DatePicker supports full-screen mode on mobile devices to improve popup 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.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_FullScreen) property to `true`. On mobile devices, the calendar expands to occupy the entire screen; desktop behavior is unchanged. ```cshtml @using Syncfusion.Blazor.Calendars @@ -84,8 +84,8 @@ The DatePicker component's full-screen mode feature enables users to view the co ``` -![DatePickerFullScreen](./images/blazor-datepicker-full-screen.gif) +![Blazor DatePicker popup displayed in mobile full-screen mode](./images/blazor-datepicker-full-screen.gif) -Also check the below section to customize the style and appearance of the Calendar component +Also see the following section for additional Calendar styling options: -[Customizing Calendar's style and appearance](../calendar/style-appearance) +[Customizing Calendar's style and appearance](../calendar/style-appearance) \ No newline at end of file diff --git a/blazor/datepicker/view.md b/blazor/datepicker/view.md index e3791b4ca7..7d0a72bc40 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,9 +19,9 @@ 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 @@ -33,17 +33,13 @@ The following example demonstrates how to create a DatePicker with `Decade` as i } ``` - - -![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. - -> Always the Depth view has to be smaller than the Start view, otherwise the view restriction will be not restricted. +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 the user can navigate when drilling 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). If Depth is set to a broader view than Start, the component constrains navigation to a valid combination. -The following example demonstrates how to create a DatePicker that allows users to select a month. +The following example demonstrates how to create a DatePicker that allows users to select a month (Start at Decade, navigate down to Year): ```cshtml @using Syncfusion.Blazor.Calendars @@ -55,4 +51,4 @@ The following example demonstrates how to create a DatePicker that allows users } ``` -N> To learn more about Calendar views, refer to the Calendar's [Calendar Views](../calendar/calendar-views) section. \ No newline at end of file +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..b3631cfd4e 100644 --- a/blazor/datepicker/week-number.md +++ b/blazor/datepicker/week-number.md @@ -1,7 +1,7 @@ --- layout: post title: Week Numbers in Blazor DatePicker Component | Syncfusion -description: Checkout and learn here all about Week Numbers in Syncfusion Blazor DatePicker component and more details. +description: Learn how to display and configure week numbers in the Syncfusion Blazor DatePicker, including the WeekNumber property and WeekRule options for defining the first week of the year. platform: Blazor control: DatePicker documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Week Number 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 @@ -18,24 +18,22 @@ You can enable WeekNumber in the DatePicker by using the [WeekNumber](https://he ``` - - -![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 -----|----- -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. +N> The culture (Locale) and 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..ed90d4c650 100644 --- a/blazor/daterangepicker/accessibility.md +++ b/blazor/daterangepicker/accessibility.md @@ -1,7 +1,7 @@ --- layout: post title: Accessibility in Blazor DateRangePicker Component | Syncfusion -description: Checkout and learn here all about Accessibility in Syncfusion Blazor DateRangePicker component and more. +description: Learn about accessibility in the Syncfusion Blazor DateRangePicker, including WCAG/Section 508 compliance, WAI-ARIA roles and attributes, keyboard navigation, and screen reader support. platform: Blazor control: DateRangePicker documentation: ug @@ -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,20 +38,19 @@ 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. +To learn about the accessibility of Calendar, refer to the Calendar's [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/). +Use the following keys to interact 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: @@ -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 additional information about native events, see [Native events in DateRangePicker](https://blazor.syncfusion.com/documentation/daterangepicker/native-events). ```cshtml @using Syncfusion.Blazor.Calendars @@ -106,13 +105,13 @@ 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. +N> You can refer to our [Blazor Date Range Picker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) feature tour page for its key 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. ## 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 shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/daterangepicker) in a new window to evaluate the DateRangePicker with accessibility tools. ## See also diff --git a/blazor/daterangepicker/customization.md b/blazor/daterangepicker/customization.md index f4034139fc..42b1a51019 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](./images/blazor-daterangepicker-customization.png) +![Customization in Blazor DateRangePicker showing Wednesday as the first day of the week](./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 diff --git a/blazor/daterangepicker/data-binding.md b/blazor/daterangepicker/data-binding.md index 061992cbea..df8ac7c611 100644 --- a/blazor/daterangepicker/data-binding.md +++ b/blazor/daterangepicker/data-binding.md @@ -1,7 +1,7 @@ --- layout: post title: Data Binding in Blazor DateRangePicker Component | Syncfusion -description: Checkout and learn here all about Data Binding in Syncfusion Blazor DateRangePicker component and more. +description: Learn how to bind values to the Syncfusion Blazor DateRangePicker using one-way binding, two-way binding with @bind-StartDate/@bind-EndDate, and dynamic updates. platform: Blazor control: DateRangePicker documentation: ug @@ -9,7 +9,7 @@ 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 @@ -17,7 +17,7 @@ This section briefly explains how to bind the value to the DateRangePicker compo ## 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 @@ -42,7 +42,7 @@ You can bind the value to the DateRangePicker component directly for `StartDate` ## 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 @@ -61,9 +61,7 @@ public DateTime? EndValue { get; set; } = DateTime.Now; ## Dynamic value binding -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. - -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. When updating state within component event callbacks, the UI typically re-renders automatically; `StateHasChanged()` is mainly required when changes originate outside the normal event pipeline (for example, from timers or external services). The following example updates the range in the DateRangePicker’s `ValueChange` event. ```cshtml @using Syncfusion.Blazor.Calendars @@ -89,4 +87,4 @@ private void onChange(RangePickerEventArgs args) } ``` -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> You can refer to our [Blazor Date Range Picker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) feature tour page for its key 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 diff --git a/blazor/daterangepicker/dateonly-support.md b/blazor/daterangepicker/dateonly-support.md index 4d0bab84a2..39b2727fa1 100644 --- a/blazor/daterangepicker/dateonly-support.md +++ b/blazor/daterangepicker/dateonly-support.md @@ -1,7 +1,7 @@ --- 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`. -> 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. +> 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. + +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..b725f3179e 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 @@ -44,7 +44,7 @@ select |[RangeSelected](events#rangeselected) ## 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 @@ -63,7 +63,7 @@ select |[RangeSelected](events#rangeselected) ## 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 @@ -82,7 +82,7 @@ select |[RangeSelected](events#rangeselected) ## Created -`Created` event triggers when the component is created. +The `Created` event is triggered when the component is initialized. ```cshtml @using Syncfusion.Blazor.Calendars @@ -101,7 +101,7 @@ select |[RangeSelected](events#rangeselected) ## Destroyed -`Destroyed` event triggers when the component is destroyed. +The `Destroyed` event is triggered when the component is disposed. ```cshtml @using Syncfusion.Blazor.Calendars @@ -120,7 +120,7 @@ select |[RangeSelected](events#rangeselected) ## Focus -`Focus` event triggers when the input gets focus. +The `Focus` event is triggered when the input gains focus. ```cshtml @using Syncfusion.Blazor.Calendars @@ -140,7 +140,7 @@ select |[RangeSelected](events#rangeselected) ## 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 @@ -160,7 +160,7 @@ select |[RangeSelected](events#rangeselected) ## 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 @@ -180,7 +180,7 @@ select |[RangeSelected](events#rangeselected) ## 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 @@ -200,7 +200,7 @@ select |[RangeSelected](events#rangeselected) ## 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 @@ -218,4 +218,4 @@ select |[RangeSelected](events#rangeselected) } ``` -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). +N> The DateRangePicker currently supports the events listed above. Additional events may be introduced in future releases based on user requests. If the 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..5854595467 100644 --- a/blazor/daterangepicker/getting-started-with-web-app.md +++ b/blazor/daterangepicker/getting-started-with-web-app.md @@ -1,7 +1,7 @@ --- layout: post title: Getting Started with Syncfusion Blazor DateRangePicker in Web App -description: Checkout and learn about the documentation for getting started with Blazor DateRangePicker Component in Blazor Web App. +description: Learn how to add and configure the Syncfusion Blazor DateRangePicker in a Blazor Web App, including NuGet setup, render modes, interactivity, namespaces, and basic usage. platform: Blazor component: DateRangePicker documentation: ug @@ -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, 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 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, 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, 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. +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 you are 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 the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic. {% endtabcontent %} @@ -103,9 +103,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" %} @@ -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`, your project will contain a single **~/Program.cs** file. So, register the Syncfusion® Blazor Service only in that **~/Program.cs** 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). If styles or scripts are missing, the component may appear unstyled or may not function as expected. ## 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 +204,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 %} @@ -227,7 +229,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i ## 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 %} @@ -250,5 +252,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/daterangepicker/getting-started.md b/blazor/daterangepicker/getting-started.md index c3d9e6776a..025c0cd5bb 100644 --- a/blazor/daterangepicker/getting-started.md +++ b/blazor/daterangepicker/getting-started.md @@ -1,7 +1,7 @@ --- layout: post title: Getting Started with Blazor DateRangePicker Component | Syncfusion -description: Checkout and learn about getting started with Blazor DateRangePicker component in Blazor WebAssembly Application. +description: Learn how to get started with the Syncfusion Blazor DateRangePicker in a Blazor WebAssembly app, including NuGet installation, service registration, and adding styles and scripts. platform: Blazor control: DateRangePicker documentation: ug @@ -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 %} @@ -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 you are 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 your Blazor WebAssembly app. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -138,7 +138,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> See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for available themes and reference 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 script options, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references). If styles or scripts are missing, the component may appear unstyled or may not function as expected. ## Add Blazor DateRangePicker component @@ -158,7 +158,7 @@ Add the Syncfusion® Blazor DateRangePicker ## 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..188a53f6c7 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> 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 diff --git a/blazor/daterangepicker/how-to/customization-using-cssclass.md b/blazor/daterangepicker/how-to/customization-using-cssclass.md index 07cba2625d..6b7236bdd3 100644 --- a/blazor/daterangepicker/how-to/customization-using-cssclass.md +++ b/blazor/daterangepicker/how-to/customization-using-cssclass.md @@ -1,7 +1,7 @@ --- layout: post title: Customization using CssClass in Blazor DateRangePicker | Syncfusion -description: Learn here all about Customization using CssClass in Syncfusion Blazor DateRangePicker component and more. +description: Learn how to customize the Syncfusion Blazor DateRangePicker using the CssClass property to override and scope styles for the wrapper, popup, calendars, and day states. platform: Blazor control: DateRangePicker documentation: ug @@ -9,34 +9,34 @@ 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’s root element. By targeting this class in your 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** | | --- | --- | -| 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-calendar | 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 @@ -70,7 +70,6 @@ Following is the list of classes that provides flexible way to customize the Dat ``` - -![Customization using CssClass Blazor DateRangePicker](../images/blazor-daterangepicker-cssclass-customization.png) +![Blazor DateRangePicker customized with CssClass to style selected, today, and weekend dates](../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 diff --git a/blazor/daterangepicker/how-to/disable-the-daterangepicker-component.md b/blazor/daterangepicker/how-to/disable-the-daterangepicker-component.md index 8700518611..2dab082ee1 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,7 +9,7 @@ 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 @@ -22,7 +22,6 @@ DateRangePicker can be deactivated on a page. Setting [Enabled](https://help.syn } ``` - -![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 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..577b7c9a97 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 to guide users before a value is selected. ```cshtml @using Syncfusion.Blazor.Calendars @@ -19,7 +19,6 @@ Using `Placeholder`, you can display a short hint in the input element. ``` - -![Blazor DateRangePicker with Hint Element](../images/blazor-daterangepicker-hint-element.png) +![Blazor DateRangePicker displaying hint text using the Placeholder property](../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 diff --git a/blazor/daterangepicker/native-events.md b/blazor/daterangepicker/native-events.md index 2d9a5ae54f..e537f48a41 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 @@ -29,7 +29,7 @@ In the following example, the KeyPressed method is called every time the key is } ``` -Also, you can rewrite the above example code as follows using Lambda expressions. +The previous example can also be written using a lambda expression. ```cshtml @using Syncfusion.Blazor.Calendars @@ -39,16 +39,16 @@ Also, you can rewrite the above example code as follows using Lambda expressions ## 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. 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 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,7 +66,7 @@ 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. +Lambda expressions can also be used to pass the event data to the handler. ## List of native events supported @@ -77,4 +77,4 @@ Using Lambda expression also, you can pass the event data to the event handler. | ondblclick | onkeydown | onkeyup | onkeypress | | ontouchend | onfocusin | onmouseup | ontouchstart | -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 +N> You can refer to our [Blazor Date Range Picker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) feature tour page for its key 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 diff --git a/blazor/daterangepicker/range-restriction.md b/blazor/daterangepicker/range-restriction.md index 0b2d0a2510..8232c55008 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 @@ -31,17 +31,16 @@ In the following sample, you can select a range from 15th day of this month to 1 } ``` - -![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 @@ -50,12 +49,16 @@ In the following sample, the range selection should be greater than 5 days and l ``` - -![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 @@ -70,22 +73,20 @@ DateRangePicker provides an option to limit the user towards entering the valid } ``` -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 @@ -100,8 +101,6 @@ The following code demonstrates the `StrictMode` as false. Here, it allows you t } ``` - - -![Blazor DateRangePicker without Strict Mode](./images/blazor-daterangepicker-without-strict-mode.png) +![Blazor DateRangePicker with StrictMode disabled](./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 diff --git a/blazor/daterangepicker/style-appearance.md b/blazor/daterangepicker/style-appearance.md index 7cbe765de2..5aef0a7245 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,11 +9,11 @@ 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 */ @@ -25,7 +25,7 @@ Use the following CSS to customize the appearance like height and font size of t ## 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 */ @@ -37,7 +37,7 @@ Use the following CSS to customize the DateRangePicker icon element. ## 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 */ @@ -49,7 +49,7 @@ Use the following CSS to customize the DateRangePicker popup calendar header. ## 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 */ @@ -61,7 +61,7 @@ Use the following CSS to customize the DateRangePicker popup calendar header tit ## 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 */ @@ -72,7 +72,7 @@ Use the following CSS to customize the DateRangePicker popup calendar content. ## 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 */ @@ -84,7 +84,7 @@ Use the following CSS to customize the DateRangePicker popup calendar content ti ## 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 */ @@ -95,7 +95,7 @@ Use the following CSS to customize the DateRangePicker popup calendar previous a ## 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 */ @@ -107,7 +107,7 @@ Use the following CSS to customize the DateRangePicker popup calendar date cell ## 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 */ @@ -119,7 +119,7 @@ Use the following CSS to customize the DateRangePicker popup calendar primary bu ## 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 */ @@ -132,7 +132,7 @@ Use the following CSS to customize the DateRangePicker popup calendar cancel but ## 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 */ @@ -144,7 +144,7 @@ Use the following CSS to customize the DateRangePicker popup calendar footer ele ## 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 */ @@ -157,7 +157,7 @@ Use the following CSS to customize the selected date cell grid in the DateRangeP ## 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 @@ -166,4 +166,4 @@ The DateRangePicker component's full-screen mode feature enables users to view t ``` -![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) \ 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) diff --git a/blazor/datetime-picker/accessibility.md b/blazor/datetime-picker/accessibility.md index 5618da5655..12c4430b5d 100644 --- a/blazor/datetime-picker/accessibility.md +++ b/blazor/datetime-picker/accessibility.md @@ -1,17 +1,17 @@ --- layout: post -title: Accessibility in Blazor Datetime Picker Component | Syncfusion +title: Accessibility in Blazor DateTimePicker Component | Syncfusion description: Checkout and learn here all about Accessibility in Syncfusion Blazor Datetime Picker component and more. platform: Blazor -control: Datetime Picker +control: DateTimePicker documentation: ug --- -# Accessibility in Blazor Datetime Picker Component +# Accessibility in Blazor DateTimePicker 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, especially where dynamic content and advanced UI components are involved. -The [Blazor DateTimePicker](https://www.syncfusion.com/blazor-components/blazor-datetime-picker) 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 DateTimePicker](https://www.syncfusion.com/blazor-components/blazor-datetime-picker) 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](https://www.w3.org/WAI/ARIA/apg/) practices commonly used to evaluate accessibility. The accessibility compliance for the Blazor DateTimePicker component is outlined below. @@ -40,21 +40,19 @@ The accessibility compliance for the Blazor DateTimePicker component is outlined ## WAI-ARIA attributes -Blazor DateTimePicker provides built-in compliance with the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) specifications. `WAI-ARIA` support is achieved through the attributes like `aria-expanded`, `aria-disabled`, `aria-activedescendant` applied to the input element. +The DateTimePicker provides built-in compliance with [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) specifications to convey role, state, and property information to assistive technologies. -To learn about the accessibility of Calendar, refer to the Calendar's [Accessibility](https://blazor.syncfusion.com/documentation/calendar/accessibility) section. - -It helps to provide information about the widget for assistive technology to the disabled person in screen reader. - -* **aria-expanded**: Attribute indicates the state of a collapsible element. - -* **aria-disabled**: Attribute indicates the disabled state of this DateTimePicker component. +Common roles and attributes include: +- Roles: combobox/textbox (for the input), dialog or popup container, grid for the calendar, and gridcell for individual dates. +- `aria-expanded`: Indicates whether the popup (calendar/time list) is open or closed on the input/combobox element. +- `aria-disabled`: Conveys the disabled state of the DateTimePicker. +- `aria-activedescendant`: Identifies the currently focused date cell within the calendar grid or the focused item in the time list. -* **aria-activedescendent**: Attribute helps in managing the current active child of the DateTimePicker component. +To learn about the accessibility of Calendar, refer to the Calendar's [Accessibility](https://blazor.syncfusion.com/documentation/calendar/accessibility) section. ## Keyboard interaction -You can use the following keys to interact with the Blazor DateTimePicker. This 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 DateTimePicker. This component implements keyboard navigation support by following the [WAI-ARIA practices](https://www.w3.org/WAI/ARIA/apg/). Blazor DateTimePicker supports the below list of shortcut keys: @@ -64,8 +62,8 @@ Before opening the popup, use the following keys to control the popup element. | Windows | Mac | Description | | --- | --- | --- | -| Alt + Down Arrow | ⌥ + ↓ | Opens the select popup | -| Alt + Down Arrow + Alt + Down Arrow | ⌥ + ↓ + ⌥ + ↓ | Toggles between two popups | +| Alt + ↓ | ⌥ + ↓ | Opens the popup. | +| Alt + ↑ | ⌥ + ↑ | Closes the popup. | ### Calendar navigation @@ -73,38 +71,38 @@ Use the following keys to interact with the Calendar after the DatePicker popup | Windows | Mac | Description | | --- | --- | --- | -| ↑ | ↑ | Focuses the previous week date. | -| ↓ | ↓ | Focuses the next week date. | -| ← | ← | Focuses the previous date. | -| → | → | Focuses the next date. | -| Home | Home | Focuses the first date in the month. | -| End | End | Focuses the last date in the month. | -| Page Up | Page Up | Focuses the same date in the previous month. | -| Page Down | Page Down | Focuses the same date in the next month. | +| ↑ | ↑ | Focuses the same day of the previous week. | +| ↓ | ↓ | Focuses the same day of the next week. | +| ← | ← | Focuses the previous day. | +| → | → | Focuses the next day. | +| Home | Home | Focuses the first day of the month. | +| 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. | -| 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, year-decade | -| Ctrl + ↓ | ⌘ + ↓ | Moves out from the depth level view like decade-year, year-month | -| Control +Home | ⌘ + Home | Focuses the starting date in the current year. | -| Control +End | ⌘ + End | Focuses the ending date in the current year. | +| Shift + Page Up | ⇧ + Page Up | Focuses the same date in the previous year. | +| Shift + Page Down | ⇧ + Page Down | Focuses the same date in the next year. | +| Ctrl + ↑ | ⌘ + ↑ | Moves up one view (month → year, year → decade). | +| Ctrl + ↓ | ⌘ + ↓ | Moves down one view (decade → year, year → month). | +| Ctrl + Home | ⌘ + Home | Focuses the first date of the current year. | +| Ctrl + End | ⌘ + End | Focuses the last date of the current year. | -Use the following shortcut keys to interact with the TimePicker after the TimePicker Popup has opened: +Use the following shortcut keys to interact with the TimePicker after the TimePicker popup has opened: | Windows | Mac | Description | | --- | --- | --- | | ↑ | ↑ | Navigates and selects the previous item. | | ↓ | ↓ | Navigates and selects the next item. | -| ← | ← | Moves the cursor towards arrow key pressed direction. | -| → | → | Moves the cursor towards arrow key pressed direction. | +| ← | ← | Moves the cursor toward the arrow direction. | +| → | → | Moves the cursor toward the arrow direction. | | Home | Home | Navigates and selects the first item. | | End | End | Navigates and selects the last item. | -| Enter | Enter | Selects the currently focused item and close the popup. | +| Enter | Enter | Selects the focused item and closes the popup. | | Alt + ↑ | ⌥ + ↑ | Closes the popup. | | Alt + ↓ | ⌥ + ↓ | Opens the popup. | | Esc | Esc | Closes the popup. | -N> To focus out the DateTimePicker component, use the `t` keys. For additional information about native event, [click](https://blazor.syncfusion.com/documentation/datetime-picker/native-events) here. +N> The “t” key behavior in the following example is custom to the sample and not a built-in shortcut. For additional information about native events, see the [Native events](https://blazor.syncfusion.com/documentation/datetime-picker/native-events) topic. ```cshtml @using Syncfusion.Blazor.Calendars @@ -122,11 +120,12 @@ N> To focus out the DateTimePicker component, use the `t` keys. For additional i } } ``` + ## Ensuring accessibility -The Blazor DateTimePicker component's accessibility levels are ensured through an [axe-core](https://www.npmjs.com/package/axe-core) software tool during automated testing. +The Blazor DateTimePicker 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 DateTimePicker component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/datetimepicker) in a new window to evaluate the accessibility of the DateTimePicker component with accessibility tools. +The accessibility compliance of the DateTimePicker component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/datetimepicker) in a new window to evaluate the DateTimePicker component with accessibility tools. ## See also diff --git a/blazor/datetime-picker/data-binding.md b/blazor/datetime-picker/data-binding.md index a41c37fedf..d180453f14 100644 --- a/blazor/datetime-picker/data-binding.md +++ b/blazor/datetime-picker/data-binding.md @@ -1,15 +1,15 @@ --- layout: post -title: Data Binding in Blazor Datetime Picker Component | Syncfusion -description: Checkout and learn here all about Data Binding in Syncfusion Blazor Datetime Picker component and more. +title: Data Binding in Blazor DateTimePicker Component | Syncfusion +description: Learn how to bind values to the Syncfusion Blazor DateTimePicker using one-way binding, two-way binding with @bind-Value, and dynamic updates. platform: Blazor -control: Datetime Picker +control: DateTimePicker documentation: ug --- -# Data Binding in Blazor Datetime Picker Component +# Data Binding in Blazor DateTimePicker Component -This section briefly explains how to bind the value to the DateTimePicker component in the below different ways. +This section explains how to bind values to the DateTimePicker component in the following ways. * One-Way Data Binding * Two-Way Data Binding @@ -17,7 +17,7 @@ This section briefly explains how to bind the value to the DateTimePicker compon ## One-way binding -You can bind the value to the DateTimePicker 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 DateTimePicker 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 user edits do not update the source automatically. ```cshtml @using Syncfusion.Blazor.Calendars @@ -38,7 +38,7 @@ You can bind the value to the DateTimePicker component directly for `Value` prop ## Two-way data binding -Two-way binding can be achieved by using `bind-Value` attribute and it supports string, int, Enum, DateTime, bool types. If 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 keeps the UI and source in sync. Use a type that matches the component’s `TValue` (for example, `DateTime` or `DateTime?`). The `@bind-Value` syntax is shorthand for using the `Value`, `ValueChanged`, and `ValueExpression` parameters. ```cshtml @using Syncfusion.Blazor.Calendars @@ -54,9 +54,7 @@ public DateTime? DateValue { get; set; } = DateTime.Now; ## Dynamic value binding -You can change the property value dynamically by manually calling the `StateHasChanged()` method inside public event of **Blazor DateTimePicker component** only. This method notifies the component that its state has changed and queues a re-render. - -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. +The value can be updated programmatically in response to component events (such as the DateTimePicker’s `ValueChange`) or from external logic. When updating state within component event callbacks, the UI re-renders automatically in most cases; `StateHasChanged()` is typically required only when changes originate outside the normal event pipeline (for example, from timers, external services, or non-UI threads). The following example updates the value in the DateTimePicker’s `ValueChange` event. ```cshtml @using Syncfusion.Blazor.Calendars @@ -78,4 +76,4 @@ private void onChange(Syncfusion.Blazor.Calendars.ChangedEventArgs ar StateHasChanged(); } } -``` +``` \ No newline at end of file diff --git a/blazor/datetime-picker/date-time-format.md b/blazor/datetime-picker/date-time-format.md index cbbaf90358..f8d407ae40 100644 --- a/blazor/datetime-picker/date-time-format.md +++ b/blazor/datetime-picker/date-time-format.md @@ -1,20 +1,20 @@ --- layout: post -title: DateTime Format in Blazor DateTimePicker Component | Syncfusion -description: Checkout and learn here all about DateTime Format in Syncfusion Blazor DateTimePicker component and much more. +title: DateTime Format in Blazor DateTimePicker Component | Syncfusion +description: Learn how to configure display and input date-time formats in the Syncfusion Blazor DateTimePicker using culture-based, standard, and custom .NET format strings. platform: Blazor control: DateTimePicker documentation: ug --- -# DateTime Format in Blazor DateTimePicker Component +# DateTime Format in Blazor DateTimePicker Component -## Display Date and Time format +## Display date and time format -The display date and time format can be used to specify how the date and time value is displayed or entered in a `DateTimePicker` control +The display format defines how the date and time value is shown (and parsed) in the DateTimePicker. -By default, the DateTimePicker'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. +By default, the DateTimePicker’s format is based on the current culture. You can also apply a [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) .NET date and time format by using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_Format) property. -> Once the date 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 date 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. +> When a format string is specified, it is used consistently regardless of culture settings. This provides a predictable, standardized representation for both display and entry. {% highlight Razor %} @@ -27,9 +27,9 @@ By default, the DateTimePicker's format is based on the culture. You can also se ## Input Formats -The input format can be used to specify how the date and time value is entered in a `DateTimePicker` control. +The input format controls how users can type date and time values in the DateTimePicker. -The string format of the date and time value specifies how the date and time should be represented as a string when entered by the user. When the user types the date and time 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 the [InputFormats](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_InputFormats) property. +The string formats specified for input determine acceptable user-entered patterns. When the user types a date and time in one of the input formats, it is automatically parsed and then displayed using the configured display format after pressing Enter/Tab or when the input loses focus. This allows flexible, intuitive entry using multiple patterns. Configure acceptable formats with the [InputFormats](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_InputFormats) property, using .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) date/time format strings. {% highlight Razor %} diff --git a/blazor/datetime-picker/date-time-range.md b/blazor/datetime-picker/date-time-range.md index de8d918ce2..182406c286 100644 --- a/blazor/datetime-picker/date-time-range.md +++ b/blazor/datetime-picker/date-time-range.md @@ -1,21 +1,21 @@ --- layout: post -title: DateTime Range in Blazor Datetime Picker Component | Syncfusion -description: Checkout and learn here all about DateTime Range in Syncfusion Blazor Datetime Picker component and more. +title: DateTime Range in Blazor DateTimePicker Component | Syncfusion +description: Learn how to restrict dates and times in the Syncfusion Blazor DateTimePicker using Min, Max, MinTime, MaxTime, and StrictMode to control valid input and selection. platform: Blazor -control: Datetime Picker +control: DateTimePicker documentation: ug --- -# DateTime Range in Blazor Datetime Picker Component +# DateTime Range in Blazor DateTimePicker Component ## DateTime Restriction -DateTimePicker provides an option to select a date and time value within a specified range by using the [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_Min) and [Max](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_Max) properties. The Min value must always be less than the Max value. +DateTimePicker provides an option to select a date and time within a specified range by using the [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_Min) and [Max](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_Max) properties. The Min value must be less than the Max value. -The `Value` property depends on the Min/Max with respect to [StrictMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_StrictMode) property. For more information about StrictMode, refer to the [Strict Mode](./strict-mode) section from the documentation. +The `Value` property is validated against Min/Max based on the [StrictMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_StrictMode) setting. For details, see the [Strict Mode](./strict-mode) section. -The following code allows selecting a date within the range from 7th to 27th day in a month. +The following code allows selecting a date within the range from the 7th to the 27th of the month. ```cshtml @using Syncfusion.Blazor.Calendars @@ -29,10 +29,11 @@ The following code allows selecting a date within the range from 7th to 27th day } ``` - ![DateTime Selection in Blazor DateTimePicker](./images/blazor-datetimepicker-selection.png) -When the Min and Max properties are configured and the selected datetime value is out-of-range or invalid, then the model value will be set to `out of range` datetime value or `null` respectively with highlighted `error` class to indicate the datetime is out of range or invalid. +When Min and Max are configured: +- With StrictMode enabled, out-of-range input is clamped to the nearest boundary (Min/Max) and invalid input reverts to the previous valid value. +- With StrictMode disabled, the textbox allows out-of-range input and invalid input results in `null`. The input is highlighted with an error style to indicate an invalid or out-of-range entry. ```cshtml @using Syncfusion.Blazor.Calendars @@ -46,18 +47,20 @@ When the Min and Max properties are configured and the selected datetime value i } ``` - ![Blazor DateTimePicker displays Selected Date and Time](./images/blazor-datetimepicker-date-time-selection.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. +N> If the values of `Min` or `Max` are changed through code-behind, update the `Value` property to ensure it remains within the defined range. Calendar selection always respects Min and Max; disabled dates cannot be selected from the popup. ## Time Restriction -DateTimePicker provides an option to select a time value within a specified range by using the [MinTime](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_MinTime) and [MaxTime](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_MaxTime) properties. The MinTime value must always be less than the MaxTime value. +DateTimePicker provides an option to select a time value within a specified range by using the [MinTime](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_MinTime) and [MaxTime](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_MaxTime) properties. The MinTime value must be less than the MaxTime value. -The `Value` property depends on the MinTime/MaxTime with respect to [StrictMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_StrictMode) property. For more information about StrictMode, refer to the [Strict Mode](./strict-mode) section from the documentation. +The `Value` property is validated against MinTime/MaxTime based on [StrictMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_StrictMode). MinTime/MaxTime apply to the time portion of the value and work together with Min/Max dates: +- For the Min date, times earlier than MinTime are restricted. +- For the Max date, times later than MaxTime are restricted. +- For dates between Min and Max, the allowed time range follows MinTime–MaxTime. -The following code allows selecting a date within the range from 10:00 AM to 8:30 PM of each day. +The following code allows selecting a time between 10:00 AM and 8:30 PM each day. ```cshtml @using Syncfusion.Blazor.Calendars @@ -73,9 +76,7 @@ The following code allows selecting a date within the range from 10:00 AM to 8:3 ![Time Selection in Blazor DateTimePicker](./images/blazor-datetimepicker-time-selection.png) -When minTime and maxTime are set, the component will prioritize min if minTime is less than the current min time, and max if maxTime is greater than the current max time. Conversely, it will prioritize minTime if it is greater than the current min time, and maxTime if it is less than the current max time. These behaviors apply only when min and max Dates are selected or pre-bounded, with minTime and maxTime values set for all other dates apart from min and max dates. - -The below example allows selecting a time within the range from 10:00 AM to 8:30 PM of each day. +The example below also allows selecting a time within the range from 10:00 AM to 8:30 PM of each day. ```cshtml @using Syncfusion.Blazor.Calendars diff --git a/blazor/datetime-picker/events.md b/blazor/datetime-picker/events.md index 0daea1fade..60fa0e5d7f 100644 --- a/blazor/datetime-picker/events.md +++ b/blazor/datetime-picker/events.md @@ -1,15 +1,17 @@ --- layout: post -title: Events in Blazor Datetime Picker Component | Syncfusion -description: Checkout and learn here all about Events in Syncfusion Blazor Datetime Picker component and much more. +title: Events in Blazor DateTimePicker Component | Syncfusion +description: Learn about events in the Syncfusion Blazor DateTimePicker component, including ValueChange, OnOpen, OnClose, OnRenderDayCell, and more. platform: Blazor -control: Datetime Picker +control: DateTimePicker documentation: ug --- # Events in Blazor Datetime Picker Component -This section explains the list of events of the DateTimePicker component which will be triggered for appropriate DateTimePicker actions. +This section lists and describes the events raised by the DateTimePicker component for user interactions and lifecycle actions. + +N> Starting with `v17.2.*`, the DateTimePicker 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.*`) -----|----- @@ -20,7 +22,7 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell) ## 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 @@ -40,7 +42,7 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell) ## ValueChange -`ValueChange` event triggers when the Calendar value is changed. +The `ValueChange` event is triggered when the DateTimePicker value (date and time) changes. ```cshtml @using Syncfusion.Blazor.Calendars @@ -60,7 +62,7 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell) ## OnClose -`OnClose` event triggers when popup is closed. +The `OnClose` event is triggered when the popup is closed. ```cshtml @using Syncfusion.Blazor.Calendars @@ -80,7 +82,7 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell) ## Created -`Created` event triggers when DateTimePicker is created. +The `Created` event is triggered when the component is created. ```cshtml @using Syncfusion.Blazor.Calendars @@ -100,7 +102,7 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell) ## Destroyed -`Destroyed` event triggers when DateTimePicker is destroyed. +The `Destroyed` event is triggered when the component is destroyed. ```cshtml @using Syncfusion.Blazor.Calendars @@ -120,7 +122,7 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell) ## Focus -`Focus` event triggers when the input gets focus. +The `Focus` event is triggered when the input gains focus. ```cshtml @using Syncfusion.Blazor.Calendars @@ -141,7 +143,7 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell) ## 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 @@ -162,7 +164,7 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell) ## OnOpen -`OnOpen` event triggers when popup is opened. +The `OnOpen` event is triggered when the popup is opened. ```cshtml @using Syncfusion.Blazor.Calendars @@ -183,7 +185,7 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell) ## 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. ```cshtml @using Syncfusion.Blazor.Calendars @@ -201,4 +203,4 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell) } ``` -N> DateTimePicker 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). +N> The DateTimePicker currently supports the events listed above. Additional events may be introduced in future releases based on user requests. If the 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/datetime-picker/getting-started-with-web-app.md b/blazor/datetime-picker/getting-started-with-web-app.md index f492904f7b..e637a60d0b 100644 --- a/blazor/datetime-picker/getting-started-with-web-app.md +++ b/blazor/datetime-picker/getting-started-with-web-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor DateTimePicker Component in Web App -This section briefly explains about how to include [Blazor DateTimePicker](https://www.syncfusion.com/blazor-components/blazor-datetime-picker) 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 DateTimePicker](https://www.syncfusion.com/blazor-components/blazor-datetime-picker) 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 DateTimePicker](https ## 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/aspnetcore/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/aspnetcore/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnetcore/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 DateTimePicker** 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 DateTimePicker** 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 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/aspnetcore/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/aspnetcore/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnetcore/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 you are 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 the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic. {% endtabcontent %} @@ -103,9 +103,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" %} @@ -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). If styles or scripts are missing, the component may appear unstyled or may not function as expected. ## Add Syncfusion® Blazor DateTimePicker component -Add the Syncfusion® Blazor DateTimePicker 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 DateTimePicker component in a `.razor` file inside the `Pages` folder. If the interactivity location is `Per page/component` in the web app, define a render mode at the top of the component as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | @@ -202,7 +204,7 @@ Add the Syncfusion® Blazor DateTimePicker c | | 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 %} @@ -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/datetime-picker/getting-started.md b/blazor/datetime-picker/getting-started.md index 2e727acf2b..2b17538687 100644 --- a/blazor/datetime-picker/getting-started.md +++ b/blazor/datetime-picker/getting-started.md @@ -9,9 +9,9 @@ documentation: ug # Getting Started with Blazor DateTimePicker Component -This section briefly explains about how to include [Blazor DateTimePicker](https://www.syncfusion.com/blazor-components/blazor-datetime-picker) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section explains how to include the [Blazor DateTimePicker](https://www.syncfusion.com/blazor-components/blazor-datetime-picker) component in a Blazor WebAssembly app using Visual Studio and Visual Studio Code. -To get start quickly with Blazor DateTimePicker component, you can check on this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DateTimePicker) sample:. +To get started quickly with the Blazor DateTimePicker component, watch the following video or explore the [GitHub sample](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DateTimePicker). {% youtube "youtube:https://www.youtube.com/watch?v=BzcHdhd4o8I"%} @@ -26,11 +26,11 @@ To get start quickly with Blazor DateTimePicker component, you can check on this ## 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/aspnetcore/blazor/tooling?view=aspnetcore-7.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 DateTimePicker** 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 DateTimePicker** 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/aspnetcore/blazor/tooling?view=aspnetcore-7.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 you are 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 your Blazor WebAssembly app. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -138,7 +138,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> See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for available themes and reference 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 script options, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references). If styles or scripts are missing, the component may appear unstyled or may not function as expected. ## Add Blazor DateTimePicker component @@ -158,7 +158,7 @@ Add the Syncfusion® Blazor DateTimePicker c ## Setting the Value, Min and Max -The minimum and maximum date time can be defined with the help of [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_Min) and [Max](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_Max) properties. +Define the minimum and maximum selectable dates using the [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_Min) and [Max](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_Max) properties. {% tabs %} {% highlight razor %} diff --git a/blazor/datetime-picker/globalization.md b/blazor/datetime-picker/globalization.md index dd1f55080f..74b60d8908 100644 --- a/blazor/datetime-picker/globalization.md +++ b/blazor/datetime-picker/globalization.md @@ -1,6 +1,6 @@ --- layout: post -title: Globalization in Blazor Datetime Picker Component | Syncfusion +title: Globalization in Blazor DateTimePicker Component | Syncfusion description: Checkout and learn here all about Globalization in Syncfusion Blazor Datetime Picker component and more. platform: Blazor control: Datetime Picker @@ -9,13 +9,13 @@ documentation: ug # Globalization in Blazor Datetime Picker Component -[Blazor DateTimePicker](https://www.syncfusion.com/blazor-components/blazor-datetime-picker) component can be localized. Refer to [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion® Blazor components. +The [Blazor DateTimePicker](https://www.syncfusion.com/blazor-components/blazor-datetime-picker) component supports localization and culture-specific formatting. For configuration 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 and time formats, month and day names, and other culture-specific settings. Ensure that the required culture data is loaded before rendering the component. ## Right-To-Left -The DateTimePicker supports RTL (right-to-left) functionality for languages like Arabic and Hebrew to display the text in the right-to-left direction. Use [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_EnableRtl) property to set the RTL direction. +The DateTimePicker 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.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_EnableRtl) property to render the component in RTL direction. RTL layout is independent of the Locale setting; both can be combined to achieve the desired language and layout. -The following code example initialize the DateTimePicker component in `Arabic` culture. +The following code example initializes the DateTimePicker component with the `ar` (Arabic) culture and RTL layout. ```cshtml @using Syncfusion.Blazor.Calendars @@ -33,4 +33,4 @@ The following code example initialize the DateTimePicker component in `Arabic` c } ``` -![Right to Left in Blazor DateTimePicker with Arabic Culture](./images/blazor-datetimepicker-right-to-left.png) +![Blazor DateTimePicker in Arabic culture with right-to-left layout](./images/blazor-datetimepicker-right-to-left.png) \ No newline at end of file diff --git a/blazor/datetime-picker/how-to/disable-the-datetimepicker-component.md b/blazor/datetime-picker/how-to/disable-the-datetimepicker-component.md index 627a60fea1..82a5e74252 100644 --- a/blazor/datetime-picker/how-to/disable-the-datetimepicker-component.md +++ b/blazor/datetime-picker/how-to/disable-the-datetimepicker-component.md @@ -1,15 +1,15 @@ --- layout: post title: Disable the Blazor DateTimePicker Component | Syncfusion -description: Checkout and learn here all about disabling the Syncfusion Blazor DateTimePicker Component and much more. +description: Learn how to disable the Syncfusion Blazor DateTimePicker component using the Enabled property to prevent focus, typing, and opening the popup. platform: Blazor -control: Datetime Picker +control: DateTimePicker documentation: ug --- # Disable the Blazor DateTimePicker Component -To disable the DateTimePicker, set its [Enabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DateTimePickerModel-1.html#Syncfusion_Blazor_Calendars_DateTimePickerModel_1_Enabled) property to `false`. +To disable the DateTimePicker, set its [Enabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DateTimePickerModel-1.html#Syncfusion_Blazor_Calendars_DateTimePickerModel_1_Enabled) property to `false`. When disabled, the input cannot receive focus, typing is blocked, and the popup cannot be opened. The default value of `Enabled` is `true`, and this property can be data-bound to toggle the disabled state at runtime. The following code demonstrates the disabled component. @@ -23,5 +23,4 @@ The following code demonstrates the disabled component. } ``` - -![Disable State in Blazor DateTimePicker](../images/blazor-datetimepicker-disable-state.png) \ No newline at end of file +![Blazor DateTimePicker shown in a disabled state](../images/blazor-datetimepicker-disable-state.png) \ No newline at end of file diff --git a/blazor/datetime-picker/how-to/open-popup-on-input-click.md b/blazor/datetime-picker/how-to/open-popup-on-input-click.md index 82a43de773..d9f1df9a57 100644 --- a/blazor/datetime-picker/how-to/open-popup-on-input-click.md +++ b/blazor/datetime-picker/how-to/open-popup-on-input-click.md @@ -1,17 +1,17 @@ --- layout: post -title: Open the Blazor Datetime Picker popup on Focus | Syncfusion -description: Learn here all about opening the Syncfusion Blazor Datetime Picker popup upon focusing input and much more. +title: Open the Blazor DateTimePicker popup on Focus | Syncfusion +description: Learn how to open the Syncfusion Blazor DateTimePicker popup when the input receives focus by enabling the OpenOnFocus property. platform: Blazor -control: Datetime Picker +control: DateTimePicker documentation: ug --- # Open the Blazor Datetime Picker popup on Focus -You can also open the Datetime Picker popup on input focus by setting the [OpenOnFocus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_OpenOnFocus) property to true. +Open the DateTimePicker popup when the input receives focus by setting the [OpenOnFocus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_OpenOnFocus) property to `true`. -The following example demonstrates how to open the Datetime Picker popup when the input is focused. +The following example demonstrates how to open the DateTimePicker popup when the input is focused. ```cshtml @using Syncfusion.Blazor.Calendars @@ -19,6 +19,4 @@ The following example demonstrates how to open the Datetime Picker popup when th ``` -![Opening Blazor Datetime Picker Popup](../images/blazor-datetimepicker-open-focus.gif) - - +![Opening the Blazor DateTimePicker popup when the input is focused](../images/blazor-datetimepicker-open-focus.gif) \ No newline at end of file diff --git a/blazor/datetime-picker/how-to/set-the-placeholder.md b/blazor/datetime-picker/how-to/set-the-placeholder.md index 7a89aa7b96..54f093d057 100644 --- a/blazor/datetime-picker/how-to/set-the-placeholder.md +++ b/blazor/datetime-picker/how-to/set-the-placeholder.md @@ -1,17 +1,17 @@ --- layout: post -title: Set the Placeholder in Blazor Datetime Picker Component | Syncfusion -description: Checkout and learn here all about Set the Placeholder in Syncfusion Blazor Datetime Picker component and more. +title: Set the Placeholder in Blazor DateTimePicker Component | Syncfusion +description: Learn how to set the Placeholder in the Syncfusion Blazor DateTimePicker component to display hint text in the input. platform: Blazor -control: Datetime Picker +control: DateTimePicker documentation: ug --- -# Set the Placeholder in Blazor Datetime Picker Component +# Set the Placeholder in Blazor DateTimePicker Component -The following code demonstrates how to set `Placeholder` in the DateTimePicker component. +The following example demonstrates how to set the `Placeholder` in the DateTimePicker component. -Using [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_Placeholder), you can display a short hint in the input element. +Using the [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_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,5 +19,4 @@ Using [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Cale ``` - -![Blazor DateTimePicker displays Hint Element](../images/blazor-datetimepicker-hint-element.png) \ No newline at end of file +![Blazor DateTimePicker displays hint text using the Placeholder property](../images/blazor-datetimepicker-hint-element.png) \ No newline at end of file diff --git a/blazor/datetime-picker/islamic-calendar.md b/blazor/datetime-picker/islamic-calendar.md index c0e8539ac2..b052efd632 100644 --- a/blazor/datetime-picker/islamic-calendar.md +++ b/blazor/datetime-picker/islamic-calendar.md @@ -1,6 +1,6 @@ --- layout: post -title: Islamic Calendar in Blazor Datetime Picker Component | Syncfusion +title: Islamic Calendar in Blazor DateTimePicker Component | Syncfusion description: Checkout and learn here all about Islamic Calendar in the Syncfusion Blazor Datetime Picker component and much more. platform: Blazor control: Datetime Picker @@ -9,14 +9,14 @@ documentation: ug # Islamic Calendar in Blazor Datetime Picker Component -In addition to the Gregorian calendar, the Datetime Picker 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 DateTimePicker 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.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_CalendarMode) as CalendarType.Islamic. +The DateTimePicker retains its core features in Islamic mode, such as minimum and maximum date constraints, week numbers, 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 Islamic mode by setting the [CalendarMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_CalendarMode) property to CalendarType.Islamic. The selected value continues to be handled as a date/time 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/datetime-picker/mask-support.md b/blazor/datetime-picker/mask-support.md index 446f845c78..e91f146c93 100644 --- a/blazor/datetime-picker/mask-support.md +++ b/blazor/datetime-picker/mask-support.md @@ -1,6 +1,6 @@ --- layout: post -title: Mask Support in Blazor DateTimePicker Component | Syncfusion +title: Mask Support in Blazor DateTimePicker Component | Syncfusion description: Checkout and learn here all about Mask Support in Syncfusion Blazor DateTimePicker component and much more. platform: Blazor control: DateTimePicker @@ -8,7 +8,7 @@ documentation: ug --- # Mask Support in Blazor DateTimePicker Component -The masking feature allows users to enter a date and time 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 and time is entered correctly and can also make it easier for users to understand how to enter the date and time. The [EnableMask](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_EnableMask) property in the DateTimePicker component allows you to enable or disable the masking functionality. When enabled, the input field will be displayed as masked with a specific datetime format pattern for entering the date and time. +The masking feature guides users to enter date and time values 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 masking 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 configured format and the current culture (including localized separators and literals). Masking improves guidance during entry but does not, by itself, validate out-of-range values or business rules. {% highlight Razor %} @@ -20,25 +20,19 @@ The masking feature allows users to enter a date and time in the correct format, ## MaskPlaceholder -The [DateTimePickerMaskPlaceholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DateTimePickerMaskPlaceholder.html) directive allows you to set custom placeholder text for each segment of the date and time format in a `DateTimePicker` 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 [DateTimePickerMaskPlaceholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DateTimePickerMaskPlaceholder.html) directive allows custom placeholder text for each segment of the date and time format in a `DateTimePicker`. 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 clear guidance for expected input. Placeholders apply to the segments used by the configured format (for example, dd/MM/yyyy hh:mm:ss). The `DateTimePickerMaskPlaceholder` 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. +* [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`). +* [Hour](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_Hour) : Placeholder text for the hour segment (such as `h`/`hh`). +* [Minute](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_Minute) : Placeholder text for the minute segment (`m`/`mm`). +* [Second](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_Second): Placeholder text for the second segment (`s`/`ss`). +* [DayOfWeek](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_DayOfWeek) : Placeholder text for the weekday segment (`ddd`/`dddd`). -* [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. - -* [Hour](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_Hour) : Specifies the placeholder text for the hour (`hh`) segment of the time value. - -* [Minute](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_Minute) : Specifies the placeholder text for the minute (`mm`) segment of the time value. - -* [Second](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_Second): Specifies the placeholder text for the second (`ss`) segment of the time value. - -* [DayOfWeek](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_DayOfWeek) : Specifies the placeholder text for the day of the week (`dddd`) segment of the date value. - -The `DateTimePicker` component uses placeholder text from the current culture's resources file for each segment of the date and time format by default. If you want to use custom placeholder text instead, you can specify it using the `DateTimePickerMaskPlaceholder` directive and its properties. +By default, the component uses placeholder text from the current culture’s resource file for each date and time segment. To override these defaults, specify custom values using the `DateTimePickerMaskPlaceholder` directive. {% highlight Razor %} @@ -48,4 +42,4 @@ The `DateTimePicker` component uses placeholder text from the current culture's ![Blazor DateTimePicker Mask Support with MaskPlaceholder](./images/DateTimePickerMaskPlaceholder.gif) -> If you do not specify custom placeholder text for any segment of the date and time 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 text from the current culture’s resource file for that segment. 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/datetime-picker/native-events.md b/blazor/datetime-picker/native-events.md index 33e4b53bde..fb02b44830 100644 --- a/blazor/datetime-picker/native-events.md +++ b/blazor/datetime-picker/native-events.md @@ -1,21 +1,21 @@ --- layout: post -title: Native Events in Blazor Datetime Picker Component | Syncfusion +title: Native Events in Blazor DateTimePicker Component | Syncfusion description: Checkout and learn here all about Native Events in Syncfusion Blazor Datetime Picker component and more. platform: Blazor -control: Datetime Picker +control: DateTimePicker documentation: ug --- -# Native Events in Blazor Datetime Picker Component +# Native Events in Blazor DateTimePicker Component -The following section explains steps to include native events and pass data to event handler in DateTimePicker component. +The following section explains how to attach native DOM events to the DateTimePicker component and pass event data to the handler. ## Bind native events to DateTimePicker -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. -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 @@ -29,7 +29,7 @@ In the following example, the KeyPressed method is called every time the key is } ``` -Also, you can rewrite the previous example code as follows using Lambda expressions. +The previous example can also be written using a lambda expression. ```cshtml @using Syncfusion.Blazor.Calendars @@ -39,16 +39,16 @@ Also, you can rewrite the previous example code as follows using Lambda expressi ## Pass event data to event handler -Blazor provides a set of argument types to map to native events. The following is the list of event types and event arguments: +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 +* 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,7 +66,7 @@ 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. +Lambda expressions can also be used to pass the event data to the handler. ## List of native events supported diff --git a/blazor/datetime-picker/special-dates.md b/blazor/datetime-picker/special-dates.md index ca2a9edbb0..62a816d40f 100644 --- a/blazor/datetime-picker/special-dates.md +++ b/blazor/datetime-picker/special-dates.md @@ -1,7 +1,7 @@ --- layout: post title: Special Dates in Blazor DateTimePicker Component | Syncfusion -description: Checkout and learn here all about Special Dates in Syncfusion Blazor DateTimePicker component and more. +description: Learn how to customize special dates in the Syncfusion Blazor DateTimePicker using the OnRenderDayCell event to highlight or disable specific days. platform: Blazor control: DateTimePicker documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Special Dates in Blazor DateTimePicker Component -You can customize specific dates in a DateTimePicker by using the [OnRenderDayCell](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DateTimePickerEvents-1.html#Syncfusion_Blazor_Calendars_DateTimePickerEvents_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 DateTimePicker. 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 DateTimePicker using the [OnRenderDayCell](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DateTimePickerEvents-1.html#Syncfusion_Blazor_Calendars_DateTimePickerEvents_1_OnRenderDayCell) event. This event is triggered for each day cell as it is created, allowing you to apply custom styles or disable 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 @@ -88,4 +88,4 @@ You can customize specific dates in a DateTimePicker by using the [OnRenderDayCe ``` -![Blazor DateTimePicker with special dates](./images/blazor_datetimepicker_special_dates.png) \ No newline at end of file +![Blazor DateTimePicker highlighting special dates for personal and official appointments](./images/blazor_datetimepicker_special_dates.png) \ No newline at end of file diff --git a/blazor/datetime-picker/strict-mode.md b/blazor/datetime-picker/strict-mode.md index 82a04bba19..bfc0a46fef 100644 --- a/blazor/datetime-picker/strict-mode.md +++ b/blazor/datetime-picker/strict-mode.md @@ -1,7 +1,7 @@ --- layout: post title: Strict Mode in Blazor Datetime Picker Component | Syncfusion -description: Checkout and learn here all about Strict Mode in Syncfusion Blazor Datetime Picker component and more. +description: Learn how StrictMode works in the Syncfusion Blazor DateTimePicker, including behavior for invalid and out-of-range input with Min and Max date-time limits. platform: Blazor control: Datetime Picker documentation: ug @@ -9,13 +9,12 @@ documentation: ug # Strict Mode in Blazor Datetime Picker Component -The [StrictMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_StrictMode) is an act, that allows the users to enter only the valid date and time within the specified `Min/Max` range in text box. If the input entered is invalid, then the component will stay with the previous value. Else, if the datetime is out of range, then the component will set the datetime to the Min/Max value. +The [StrictMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_StrictMode) property controls how typed input is validated against the configured `Min` and `Max` range. When enabled, only valid date and time values within the specified range are accepted. If the entered value is invalid, the component retains the previous valid value. If the entered value is out of range, the component clamps the value to the nearest boundary (`Min` or `Max`). -The following example demonstrates the DateTimePicker in `StrictMode` with Min/Max range of `5/5/2019 2:00 AM` to `5/25/2019 2:00 AM`. Here, it allows to enter only the valid date and time within the specified range. +The following example demonstrates the DateTimePicker in `StrictMode` with a `Min`/`Max` range of `5/5/2019 2:00 AM` to `5/25/2019 2:00 AM`. Only valid values within the range are accepted. -* If you are trying to enter the out-of-range value like `5/28/2019`, then the value will set to the `Max` value as `5/25/2019 2:00 AM` since the value 28 is greater than the `Max` value of 25. - -* If you are trying to enter the invalid date, then the Value will stay with the previous value. +- If an out-of-range value such as `5/28/2019` is entered, the value is set to the `Max` value (`5/25/2019 2:00 AM`). +- If an invalid date is entered, the value remains at the previous valid value. The following code demonstrates the DateTimePicker with StrictMode `true`. @@ -33,13 +32,12 @@ The following code demonstrates the DateTimePicker with StrictMode `true`. ![Strict Mode in Blazor DateTimePicker](./images/blazor-datetimepicker-strictmode.png) -By default, the DateTimePicker act in `StrictMode` as `false` state, that allows you to enter the invalid or out-of-range datetime in text box. - -If the datetime is out-of-range or invalid, then the model value will be set to `out of range` datetime value or `null` respectively with highlighted `error` class to indicate the datetime is out of range or invalid. +By default, `StrictMode` is `false`. In this state, the textbox allows invalid or out-of-range date and time values to be entered. -The following code demonstrates the `StrictMode` as `false`. Here, it allows to enter the valid or invalid value in textbox. +- If the value is invalid, the model becomes `null`. +- If the value is out of range, the model can hold the out-of-range value. The input is highlighted with an `error` class to indicate an invalid or out-of-range entry. -If you are entering the out-of-range or invalid datetime value, then the model value will be set to `out of range` datetime value or `null` respectively with highlighted `error` class to indicate the datetime is out of range or invalid. +The following code demonstrates `StrictMode` as `false`. In this mode, valid and invalid values can be entered in the textbox. ```cshtml @using Syncfusion.Blazor.Calendars @@ -53,8 +51,6 @@ If you are entering the out-of-range or invalid datetime value, then the model v } ``` - - ![Blazor DateTimePicker without StrictMode](./images/blazor-datetimepicker-without-strictmode.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 through code-behind, update the `Value` property to ensure it remains within the defined range. Calendar/time list selection always respects `Min` and `Max`; disabled dates and times cannot be selected from the popup. \ No newline at end of file diff --git a/blazor/datetime-picker/style-appearance.md b/blazor/datetime-picker/style-appearance.md index bc9bdbadc3..13b322540f 100644 --- a/blazor/datetime-picker/style-appearance.md +++ b/blazor/datetime-picker/style-appearance.md @@ -9,11 +9,11 @@ documentation: ug # Style and Appearance in Blazor Datetime Picker 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 modify the DateTimePicker component’s appearance based on user preferences. ## Customizing the appearance of Datetime Picker container element -Use the following CSS to customize the appearance of Datetime Picker container element. +Apply the following CSS to adjust the input height and font size for the DateTimePicker container element. ```css /* To specify height and font size */ @@ -25,7 +25,7 @@ Use the following CSS to customize the appearance of Datetime Picker container e ## Customizing the Datetime Picker icons element -Use the following CSS to customize the Datetime Picker icons element. +Use the following CSS to style the DateTimePicker’s date and time icon elements. ```css /* To specify background color and font size */ @@ -37,7 +37,7 @@ Use the following CSS to customize the Datetime Picker icons element. ## Customizing the time picker popup in the Datetime Picker -Use the following CSS to customize the time picker popup in the Datetime Picker. +Use the following CSS to adjust the height of the time picker popup in the DateTimePicker. ```css /* To specify height */ @@ -48,7 +48,7 @@ Use the following CSS to customize the time picker popup in the Datetime Picker. ## Full screen mode support in mobiles and tablets -The DateTimePicker 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 DateTimePicker component, simply set the [FullScreen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_FullScreen) API value to `true`. This action will extend the calendar and time popup element to occupy the entire screen on mobile devices. +The DateTimePicker supports a full-screen popup on mobile devices to improve visibility and user experience in both landscape and portrait orientations. To enable full-screen mode, set the [FullScreen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_FullScreen) property to `true`. On mobile devices, the calendar and time popup expands to occupy the entire screen; desktop behavior is unchanged. ```cshtml @using Syncfusion.Blazor.Calendars @@ -57,10 +57,10 @@ The DateTimePicker component's full-screen mode feature enables users to view th ``` -![DateTimePickerFullScreen](./images/blazor-datetimepicker-full-screen-mode.gif) +![DateTimePicker popup displayed in mobile full-screen mode](./images/blazor-datetimepicker-full-screen-mode.gif) ## Customizing the Calendar popup of the Datetime Picker -Check the below section to customize the style and appearance of the Calendar component in the Datetime Picker. +See the following section to customize the Calendar’s style and appearance when used within the DateTimePicker. [Customizing Calendar's style and appearance](../calendar/style-appearance/) \ No newline at end of file diff --git a/blazor/datetime-picker/week-number.md b/blazor/datetime-picker/week-number.md index 53b0017b53..ac994cd37c 100644 --- a/blazor/datetime-picker/week-number.md +++ b/blazor/datetime-picker/week-number.md @@ -9,7 +9,7 @@ documentation: ug # Week Number in Blazor DateTimePicker Component -You can enable WeekNumber in the DateTimePicker 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 DateTimePicker 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 @@ -23,15 +23,15 @@ You can enable WeekNumber in the DateTimePicker by using the [WeekNumber](https: ## Week Rule -You can enable `WeekRule` in the DateTimePicker 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 DateTimePicker uses the culture’s settings unless overridden. ![Blazor DateTimePicker displays Week Rule of FirstDay](./images/blazor-datetimepicker-first-day.png) From ce601d84356f4596e234a6e346caff5328479e57 Mon Sep 17 00:00:00 2001 From: Ashwini-SF5049 Date: Thu, 9 Oct 2025 14:24:31 +0530 Subject: [PATCH 2/4] 983104: updated --- blazor/datepicker/date-format.md | 2 +- blazor/datepicker/getting-started-with-web-app.md | 2 +- blazor/datepicker/getting-started.md | 4 ++-- .../datepicker/how-to/open-datepicker-popup-on-input-click.md | 2 +- blazor/datepicker/style-appearance.md | 2 +- blazor/datepicker/week-number.md | 2 +- blazor/daterangepicker/accessibility.md | 2 +- blazor/daterangepicker/data-binding.md | 2 +- blazor/daterangepicker/getting-started-with-web-app.md | 4 ++-- blazor/daterangepicker/getting-started.md | 4 ++-- blazor/daterangepicker/how-to/customization-using-cssclass.md | 2 +- 11 files changed, 14 insertions(+), 14 deletions(-) diff --git a/blazor/datepicker/date-format.md b/blazor/datepicker/date-format.md index 1e04a3aadc..edc6eeaade 100644 --- a/blazor/datepicker/date-format.md +++ b/blazor/datepicker/date-format.md @@ -1,7 +1,7 @@ --- layout: post title: Date Format in Blazor DatePicker Component | Syncfusion -description: Learn how to control display and input date formats in the Syncfusion Blazor DatePicker using .NET standard and custom format strings with culture-aware parsing. +description: Checkout and learn here all about Date Format in Syncfusion Blazor DatePicker component and much more. platform: Blazor control: DatePicker documentation: ug diff --git a/blazor/datepicker/getting-started-with-web-app.md b/blazor/datepicker/getting-started-with-web-app.md index 7607d0174a..67c4ccfcc4 100644 --- a/blazor/datepicker/getting-started-with-web-app.md +++ b/blazor/datepicker/getting-started-with-web-app.md @@ -1,7 +1,7 @@ --- layout: post title: Getting Started with Syncfusion Blazor DatePicker Component in Web App -description: Learn how to add and configure the Syncfusion Blazor DatePicker in a Blazor Web App, including NuGet setup, render modes, interactivity, namespaces, and basic usage. +description: Checkout and learn about the documentation for getting started with Blazor DatePicker Component in Blazor Web App. platform: Blazor component: DatePicker documentation: ug diff --git a/blazor/datepicker/getting-started.md b/blazor/datepicker/getting-started.md index 75ae386dcf..2c926cae0f 100644 --- a/blazor/datepicker/getting-started.md +++ b/blazor/datepicker/getting-started.md @@ -1,7 +1,7 @@ --- layout: post title: Getting Started with Blazor DatePicker Component | Syncfusion -description: Learn how to get started with the Syncfusion Blazor DatePicker in a Blazor WebAssembly app, including NuGet installation, service registration, and adding styles and scripts. +description: Checkout and learn about getting started with Blazor DatePicker component in Blazor WebAssembly Application. platform: Blazor control: DatePicker documentation: ug @@ -140,7 +140,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for available themes and reference 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 script options, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references). If styles or scripts are missing, the component may appear unstyled or may not function as expected. +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. ## Add Blazor DatePicker component 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 49fdca4f3f..c877cd030d 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 @@ -1,7 +1,7 @@ --- layout: post title: Open the Blazor DatePicker popup on Focus | Syncfusion -description: Learn how to open the Syncfusion Blazor DatePicker popup when the input receives focus using the Focus event with ShowPopupAsync or the built-in OpenOnFocus property. +description: Learn here all about opening the Syncfusion Blazor DatePicker popup upon focusing input and much more. platform: Blazor control: DatePicker documentation: ug diff --git a/blazor/datepicker/style-appearance.md b/blazor/datepicker/style-appearance.md index 199a80a9b2..e755cdfd70 100644 --- a/blazor/datepicker/style-appearance.md +++ b/blazor/datepicker/style-appearance.md @@ -1,7 +1,7 @@ --- layout: post title: Style and Appearance in Blazor DatePicker Component | Syncfusion -description: Learn how to customize the style and appearance of the Syncfusion Blazor DatePicker using CSS, including container, icon, label, background color, and mobile full-screen. +description: Checkout and learn here all about Style and appearance in Syncfusion Blazor DatePicker component and more. platform: Blazor control: DatePicker documentation: ug diff --git a/blazor/datepicker/week-number.md b/blazor/datepicker/week-number.md index b3631cfd4e..ecc5ad86e9 100644 --- a/blazor/datepicker/week-number.md +++ b/blazor/datepicker/week-number.md @@ -1,7 +1,7 @@ --- layout: post title: Week Numbers in Blazor DatePicker Component | Syncfusion -description: Learn how to display and configure week numbers in the Syncfusion Blazor DatePicker, including the WeekNumber property and WeekRule options for defining the first week of the year. +description: Checkout and learn here all about Week Numbers in Syncfusion Blazor DatePicker component and more details. platform: Blazor control: DatePicker documentation: ug diff --git a/blazor/daterangepicker/accessibility.md b/blazor/daterangepicker/accessibility.md index ed90d4c650..43858306a5 100644 --- a/blazor/daterangepicker/accessibility.md +++ b/blazor/daterangepicker/accessibility.md @@ -1,7 +1,7 @@ --- layout: post title: Accessibility in Blazor DateRangePicker Component | Syncfusion -description: Learn about accessibility in the Syncfusion Blazor DateRangePicker, including WCAG/Section 508 compliance, WAI-ARIA roles and attributes, keyboard navigation, and screen reader support. +description: Checkout and learn here all about Accessibility in Syncfusion Blazor DateRangePicker component and more. platform: Blazor control: DateRangePicker documentation: ug diff --git a/blazor/daterangepicker/data-binding.md b/blazor/daterangepicker/data-binding.md index df8ac7c611..1165a90bcc 100644 --- a/blazor/daterangepicker/data-binding.md +++ b/blazor/daterangepicker/data-binding.md @@ -1,7 +1,7 @@ --- layout: post title: Data Binding in Blazor DateRangePicker Component | Syncfusion -description: Learn how to bind values to the Syncfusion Blazor DateRangePicker using one-way binding, two-way binding with @bind-StartDate/@bind-EndDate, and dynamic updates. +description: Checkout and learn here all about Data Binding in Syncfusion Blazor DateRangePicker component and more. platform: Blazor control: DateRangePicker documentation: ug diff --git a/blazor/daterangepicker/getting-started-with-web-app.md b/blazor/daterangepicker/getting-started-with-web-app.md index 5854595467..e959c21a09 100644 --- a/blazor/daterangepicker/getting-started-with-web-app.md +++ b/blazor/daterangepicker/getting-started-with-web-app.md @@ -1,7 +1,7 @@ --- layout: post title: Getting Started with Syncfusion Blazor DateRangePicker in Web App -description: Learn how to add and configure the Syncfusion Blazor DateRangePicker in a Blazor Web App, including NuGet setup, render modes, interactivity, namespaces, and basic usage. +description: Checkout and learn about the documentation for getting started with Blazor DateRangePicker Component in Blazor Web App. platform: Blazor component: DateRangePicker documentation: ug @@ -191,7 +191,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -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). If styles or scripts are missing, the component may appear unstyled or may not function as expected. +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. ## Add Syncfusion® Blazor DateRangePicker component diff --git a/blazor/daterangepicker/getting-started.md b/blazor/daterangepicker/getting-started.md index 025c0cd5bb..fc1ef9c2d9 100644 --- a/blazor/daterangepicker/getting-started.md +++ b/blazor/daterangepicker/getting-started.md @@ -1,7 +1,7 @@ --- layout: post title: Getting Started with Blazor DateRangePicker Component | Syncfusion -description: Learn how to get started with the Syncfusion Blazor DateRangePicker in a Blazor WebAssembly app, including NuGet installation, service registration, and adding styles and scripts. +description: Checkout and learn about getting started with Blazor DateRangePicker component in Blazor WebAssembly Application. platform: Blazor control: DateRangePicker documentation: ug @@ -138,7 +138,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for available themes and reference 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 script options, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references). If styles or scripts are missing, the component may appear unstyled or may not function as expected. +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. ## Add Blazor DateRangePicker component diff --git a/blazor/daterangepicker/how-to/customization-using-cssclass.md b/blazor/daterangepicker/how-to/customization-using-cssclass.md index 6b7236bdd3..491dc5c690 100644 --- a/blazor/daterangepicker/how-to/customization-using-cssclass.md +++ b/blazor/daterangepicker/how-to/customization-using-cssclass.md @@ -1,7 +1,7 @@ --- layout: post title: Customization using CssClass in Blazor DateRangePicker | Syncfusion -description: Learn how to customize the Syncfusion Blazor DateRangePicker using the CssClass property to override and scope styles for the wrapper, popup, calendars, and day states. +description: Learn here all about Customization using CssClass in Syncfusion Blazor DateRangePicker component and more. platform: Blazor control: DateRangePicker documentation: ug From edb4b3b4487021fcb643bf7bc09cfc62428df966 Mon Sep 17 00:00:00 2001 From: Ashwini-SF5049 Date: Thu, 9 Oct 2025 20:10:12 +0530 Subject: [PATCH 3/4] 983104: Updated --- blazor/datepicker/data-binding.md | 36 +++-- blazor/datepicker/date-format.md | 51 +++++-- blazor/datepicker/dateonly-support.md | 39 ++++- blazor/datepicker/events.md | 133 ++++++++++++++---- .../getting-started-with-web-app.md | 8 +- blazor/datepicker/getting-started.md | 6 +- .../open-datepicker-popup-on-input-click.md | 5 +- blazor/datepicker/how-to/set-the-readonly.md | 25 +++- blazor/datepicker/native-events.md | 49 ++++--- blazor/datepicker/special-dates.md | 50 ++++--- blazor/datepicker/style-appearance.md | 107 +++++++++----- blazor/datepicker/view.md | 16 ++- blazor/datepicker/week-number.md | 35 ++++- blazor/daterangepicker/accessibility.md | 18 +-- blazor/daterangepicker/customization.md | 2 +- blazor/daterangepicker/data-binding.md | 56 ++++---- blazor/daterangepicker/dateonly-support.md | 2 +- blazor/daterangepicker/events.md | 76 ++++++---- .../getting-started-with-web-app.md | 27 ++-- blazor/daterangepicker/getting-started.md | 12 +- blazor/daterangepicker/globalization.md | 2 +- .../how-to/customization-using-cssclass.md | 16 ++- .../disable-the-daterangepicker-component.md | 9 +- .../how-to/set-the-placeholder.md | 6 +- blazor/daterangepicker/native-events.md | 38 ++--- blazor/daterangepicker/range-restriction.md | 28 ++-- blazor/daterangepicker/style-appearance.md | 106 +++++++++----- blazor/datetime-picker/accessibility.md | 75 +++++----- blazor/datetime-picker/data-binding.md | 20 +-- blazor/datetime-picker/date-time-format.md | 18 +-- blazor/datetime-picker/date-time-range.md | 35 +++-- blazor/datetime-picker/events.md | 30 ++-- .../getting-started-with-web-app.md | 45 +++--- blazor/datetime-picker/getting-started.md | 28 ++-- blazor/datetime-picker/globalization.md | 10 +- .../disable-the-datetimepicker-component.md | 9 +- .../how-to/open-popup-on-input-click.md | 14 +- .../how-to/set-the-placeholder.md | 15 +- blazor/datetime-picker/islamic-calendar.md | 10 +- blazor/datetime-picker/mask-support.md | 30 ++-- blazor/datetime-picker/native-events.md | 32 ++--- blazor/datetime-picker/special-dates.md | 6 +- blazor/datetime-picker/strict-mode.md | 24 ++-- blazor/datetime-picker/style-appearance.md | 14 +- blazor/datetime-picker/week-number.md | 12 +- 45 files changed, 857 insertions(+), 528 deletions(-) diff --git a/blazor/datepicker/data-binding.md b/blazor/datepicker/data-binding.md index 5f7c0ebde5..75d14359e3 100644 --- a/blazor/datepicker/data-binding.md +++ b/blazor/datepicker/data-binding.md @@ -17,7 +17,9 @@ This section explains how to bind values to the DatePicker component in the foll ## One-way binding -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 user edits do not update the source automatically. +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 @@ Bind a value to the DatePicker component using the `Value` property as shown in @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,10 +38,18 @@ Bind a value to the DatePicker component using the `Value` property as shown in } ``` +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 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,13 +58,20 @@ Two-way binding is achieved with the `@bind-Value` attribute. This binds the com @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 -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 in most cases; `StateHasChanged()` is typically required only when changes originate outside the normal event pipeline (for example, from timers, external services, or non-UI threads). The following example shows updating the value in the DatePicker’s `ValueChange` event. +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. + +- 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 @@ -62,17 +79,16 @@ The value can be updated programmatically in response to component events (such

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. } } -``` \ No newline at end of file + diff --git a/blazor/datepicker/date-format.md b/blazor/datepicker/date-format.md index edc6eeaade..5fbe45631f 100644 --- a/blazor/datepicker/date-format.md +++ b/blazor/datepicker/date-format.md @@ -1,39 +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 specifies how a date value is rendered in the DatePicker input. Use it to control the visual representation of the selected value (for example, dd-MM-yyyy, MM/dd/yyyy, or MMM dd, yyyy). +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). + +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 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. +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. -> 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. +```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 defines how users can type dates that will be parsed into a valid value in the DatePicker. +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). -Typed input is parsed according to the current culture and any formats specified. After the user confirms input (for example, by pressing Enter or Tab, or when the input loses focus), the value is reformatted and displayed using the configured display format. You can specify [.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 to accept multiple input patterns (for example, d-M-yy, d/M/yyyy, yyyy-MM-dd). +```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/dateonly-support.md b/blazor/datepicker/dateonly-support.md index c4b19f2a11..4edca9a281 100644 --- a/blazor/datepicker/dateonly-support.md +++ b/blazor/datepicker/dateonly-support.md @@ -14,15 +14,42 @@ The [DateOnly](https://learn.microsoft.com/en-us/dotnet/api/system.dateonly?view > 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. Key points when using DateOnly: -- Set the component’s TValue to `DateOnly` (or `DateOnly?` for nullable scenarios and clearing values). +- 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. +- 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. -{% highlight Razor %} +```cshtml +@using Syncfusion.Blazor.Calendars -{% include_relative code-snippet/DateOnly.razor %} +

Selected date: @DateValue

-{% endhighlight %} + + -![Blazor DatePicker 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 83a926d789..d2bbf31868 100644 --- a/blazor/datepicker/events.md +++ b/blazor/datepicker/events.md @@ -15,180 +15,255 @@ N> Starting with `v17.2.*`, the DatePicker exposes a streamlined set of events. 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 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 -The `ValueChange` event is triggered when the DatePicker value (selected date) changes. +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 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 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 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 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 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 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 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> The DatePicker currently supports the events listed above. Additional events may be introduced in future releases based on user requests. If the 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 +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 67c4ccfcc4..a25831186f 100644 --- a/blazor/datepicker/getting-started-with-web-app.md +++ b/blazor/datepicker/getting-started-with-web-app.md @@ -77,7 +77,7 @@ N> For details on creating a **Blazor Web App** with various interactive modes a 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 are in the project directory that contains the `.csproj` file. +* 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 %} @@ -116,7 +116,7 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. {% 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`, register the Syncfusion® Blazor service in both **~/Program.cs** files (server and client) of the Blazor Web App. @@ -223,13 +223,13 @@ N> If the **Interactivity Location** is set to `Global` and the **Render Mode** {% 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 the [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 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. +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 %} diff --git a/blazor/datepicker/getting-started.md b/blazor/datepicker/getting-started.md index 2c926cae0f..acd3db0400 100644 --- a/blazor/datepicker/getting-started.md +++ b/blazor/datepicker/getting-started.md @@ -71,7 +71,7 @@ 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 are in the project root directory where the `.csproj` file is located. +* 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 %} @@ -140,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 @@ -154,7 +154,7 @@ 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)" %} 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 c877cd030d..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 @@ -11,7 +11,7 @@ documentation: ug 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. -You can open the DatePicker popup on input focus by calling the `ShowPopupAsync` method in the input `focus` event. +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. @@ -34,7 +34,7 @@ The following example demonstrates how to open the DatePicker popup when the inp ## 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. This is the built-in option and does not require handling the focus event manually. +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. @@ -42,7 +42,6 @@ The following example demonstrates how to open the DatePicker popup when the inp @using Syncfusion.Blazor.Calendars - ``` ![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-readonly.md b/blazor/datepicker/how-to/set-the-readonly.md index 683cfbdddb..d8c3bdda31 100644 --- a/blazor/datepicker/how-to/set-the-readonly.md +++ b/blazor/datepicker/how-to/set-the-readonly.md @@ -9,28 +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`. When `Enabled` is `true`, the input can receive focus, users can type into the textbox, and the popup calendar can be opened and used to select a date. When `Enabled` is set to `false`, the input cannot be focused or edited, and the popup cannot be opened (the component is fully disabled). This property can be data-bound to toggle the disabled state at runtime. +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`. When `AllowEdit` is `true`, users can type in the textbox and also select a value from the popup. When `AllowEdit` is `false`, the textbox becomes non-editable (typing is blocked), but users can still open the popup and select a value with the mouse or keyboard. Use this setting for selection-only scenarios while keeping the component interactive. +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`. When `Readonly` is `false`, the input is editable and users can select a value from the popup. When `Readonly` is `true`, user input is not allowed and the popup should not be opened; the input can still receive focus for accessibility and form navigation. To enforce a fully read-only UI, set `Readonly="true"` and also disable editing with `AllowEdit="false"`. +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"`. + +- 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 set `Readonly` in the DatePicker component. This is achieved 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. +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/native-events.md b/blazor/datepicker/native-events.md index d955052678..1297a98f7d 100644 --- a/blazor/datepicker/native-events.md +++ b/blazor/datepicker/native-events.md @@ -13,19 +13,20 @@ This section explains how to attach native DOM events to the DatePicker componen ## Bind native events to DatePicker -Native events can be attached by using the `@on` attribute on the component. The attribute value is treated as the 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 a key is pressed in the 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."); + } } ``` @@ -34,26 +35,27 @@ The previous example can also be written using a lambda expression. ```cshtml @using Syncfusion.Blazor.Calendars - + ``` ## Pass event data to event handler 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 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,13 +68,20 @@ In the following example, the `KeyPressed` method is invoked on each key press, } ``` -Lambda expressions can be used to pass the event data to the 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 -| List of Native events | | | | +Below are common native DOM events that can be attached to the DatePicker component using `@on` attributes: + +| onclick | ondblclick | onmousedown | onmouseup | | --- | --- | --- | --- | -| onclick | onblur | onfocus | onfocusout | -| onmousemove | onmouseover | onmouseout | onmousedown | onmouseup | -| ondblclick | onkeydown | onkeyup | onkeypress | -| ontouchend | onfocusin | onmouseup | ontouchstart | \ No newline at end of file +| onmousemove | onmouseover | onmouseout | onwheel | +| onfocus | onblur | onfocusin | onfocusout | +| onkeydown | onkeyup | oninput | onchange | +| ontouchstart | ontouchend | onpointerdown | onpointerup | diff --git a/blazor/datepicker/special-dates.md b/blazor/datepicker/special-dates.md index 1e18b63f8d..c5bd972490 100644 --- a/blazor/datepicker/special-dates.md +++ b/blazor/datepicker/special-dates.md @@ -13,78 +13,96 @@ Customize specific dates in the DatePicker using the [OnRenderDayCell](https://h ```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 highlighted for personal and official appointments](./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/style-appearance.md b/blazor/datepicker/style-appearance.md index e755cdfd70..43b7c35ffc 100644 --- a/blazor/datepicker/style-appearance.md +++ b/blazor/datepicker/style-appearance.md @@ -9,59 +9,95 @@ documentation: ug # Style and Appearance in Blazor DatePicker Component -The following guidance describes the CSS structure that can be used to tailor the DatePicker component’s appearance based on user preferences. +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 adjust the input height and font size for the DatePicker’s 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 modify the DatePicker’s icon size and background color. +
+ +
+``` ```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 floating label’s appearance, use the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfInputTextBase-1.html#Syncfusion_Blazor_Inputs_SfInputTextBase_1_CssClass) property with custom CSS. The example below applies a compact label size and color. +- 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. -Customize the background color of the DatePicker’s visible input by targeting the appropriate wrapper class and setting 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 %} @@ -73,19 +109,16 @@ Customize the background color of the DatePicker’s visible input by targeting ![Blazor DatePicker with a customized background color](./images/blazor-datepicker-background_color.png) -## Full screen mode support in mobiles and tablets +## Full screen mode support on 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 supports full-screen mode on mobile devices to improve popup 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.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_FullScreen) property to `true`. On mobile devices, the calendar expands to occupy the entire screen; desktop behavior is unchanged. +- 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 - - + ``` ![Blazor DatePicker popup displayed in mobile full-screen mode](./images/blazor-datepicker-full-screen.gif) - -Also see the following section for additional Calendar styling options: - -[Customizing Calendar's style and appearance](../calendar/style-appearance) \ No newline at end of file diff --git a/blazor/datepicker/view.md b/blazor/datepicker/view.md index 7d0a72bc40..de08b1bfcc 100644 --- a/blazor/datepicker/view.md +++ b/blazor/datepicker/view.md @@ -26,10 +26,10 @@ The following example demonstrates how to create a DatePicker with `Decade` as t ```cshtml @using Syncfusion.Blazor.Calendars - + @code { - public DateTime? DateValue {get;set;} = DateTime.Now; + public DateTime? DateValue { get; set; } = DateTime.Now; } ``` @@ -37,18 +37,24 @@ The following example demonstrates how to create a DatePicker with `Decade` as t ## Depth view -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 the user can navigate when drilling 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). If Depth is set to a broader view than Start, the component constrains navigation to a valid combination. +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. -The following example demonstrates how to create a DatePicker that allows users to select a month (Start at Decade, navigate down to Year): +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; } ``` +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 ecc5ad86e9..8b1fff62e7 100644 --- a/blazor/datepicker/week-number.md +++ b/blazor/datepicker/week-number.md @@ -7,7 +7,7 @@ control: DatePicker documentation: ug --- -# Week Number in Blazor DatePicker Component +# Week Numbers in Blazor DatePicker Component 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. @@ -15,22 +15,49 @@ Enable week numbers in the DatePicker to display the week index in the calendar @using Syncfusion.Blazor.Calendars - ``` +Preview: +- The calendar displays a week index column on the left side of the month view. + ![Blazor DatePicker showing week numbers in the left column](./images/blazor_datepicker_weeknumber.png) ## Week Rule 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 | 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. -N> The culture (Locale) and first day of the week influence week numbering. By default, the DatePicker uses the current culture’s settings unless overridden. +```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 with WeekRule set to FirstDay](./images/blazor-datepicker-first-day.png) diff --git a/blazor/daterangepicker/accessibility.md b/blazor/daterangepicker/accessibility.md index 43858306a5..4aae1c7413 100644 --- a/blazor/daterangepicker/accessibility.md +++ b/blazor/daterangepicker/accessibility.md @@ -46,17 +46,17 @@ Common roles and attributes used include: - `aria-disabled`: Indicates the disabled state of the DateRangePicker. - `aria-activedescendant`: Identifies the currently focused date cell within the calendar grid. -To learn about the accessibility of Calendar, refer to the Calendar's [Accessibility](https://blazor.syncfusion.com/documentation/calendar/accessibility) section. These roles and attributes help assistive technologies convey meaningful information to users. +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 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 | | --- | --- | --- | @@ -66,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 | | --- | --- | --- | @@ -86,7 +86,7 @@ Use the following list of keys to navigate the currently focused Calendar after | Alt + → | ⌥ + → | Moves focus forward within the popup container. | | Alt + ← | ⌥ + ← | Moves focus backward within the popup container. | -N> The “t” key behavior in the following example is custom to the sample and not a built-in shortcut. For additional information about native events, see [Native events in DateRangePicker](https://blazor.syncfusion.com/documentation/daterangepicker/native-events). +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 @@ -105,13 +105,15 @@ N> The “t” key behavior in the following example is custom to the sample and } ``` -N> You can refer to our [Blazor Date Range Picker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) feature tour page for its key 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. +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 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 DateRangePicker 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 42b1a51019..009dc304e4 100644 --- a/blazor/daterangepicker/customization.md +++ b/blazor/daterangepicker/customization.md @@ -23,4 +23,4 @@ The first day of the week varies by culture, and the DateRangePicker uses the cu ![Customization in Blazor DateRangePicker showing Wednesday as the first day of the week](./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 1165a90bcc..84bfb47b00 100644 --- a/blazor/daterangepicker/data-binding.md +++ b/blazor/daterangepicker/data-binding.md @@ -11,9 +11,9 @@ documentation: ug 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 @@ -27,9 +27,7 @@ Bind values to the DateRangePicker using the `StartDate` and `EndDate` propertie @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,6 +38,8 @@ Bind values to the DateRangePicker using the `StartDate` and `EndDate` propertie } ``` +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 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. @@ -47,44 +47,50 @@ Two-way binding is achieved with the `@bind-StartDate` and `@bind-EndDate` attri ```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; } ``` +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. + ## Dynamic value binding -Values can be updated programmatically in response to component events (such as `ValueChange`) or from external logic. When updating state within component event callbacks, the UI typically re-renders automatically; `StateHasChanged()` is mainly required when changes originate outside the normal event pipeline (for example, from timers or external services). The following example updates the range in the DateRangePicker’s `ValueChange` event. +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 key 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 39b2727fa1..a45d240d30 100644 --- a/blazor/daterangepicker/dateonly-support.md +++ b/blazor/daterangepicker/dateonly-support.md @@ -1,4 +1,4 @@ ---- +da--- layout: post 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. diff --git a/blazor/daterangepicker/events.md b/blazor/daterangepicker/events.md index b725f3179e..358ac5c173 100644 --- a/blazor/daterangepicker/events.md +++ b/blazor/daterangepicker/events.md @@ -11,7 +11,7 @@ documentation: ug This section lists and describes the events raised by the DateRangePicker component for common user interactions and lifecycle actions. -The events are configured using the **DateRangePickerEvents** child component. +The events are configured using the DateRangePickerEvents child component. 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.*`. @@ -33,15 +33,17 @@ The `Blur` event is triggered when the input loses focus. -@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 The `ValueChange` event is triggered when the DateRangePicker value (start or end date) changes. @@ -52,15 +54,17 @@ The `ValueChange` event is triggered when the DateRangePicker value (start or en -@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 The `OnClose` event is triggered when the DateRangePicker popup is closed. @@ -71,15 +75,17 @@ The `OnClose` event is triggered when the DateRangePicker popup is closed. -@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 The `Created` event is triggered when the component is initialized. @@ -90,15 +96,17 @@ The `Created` event is triggered when the component is initialized. -@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 The `Destroyed` event is triggered when the component is disposed. @@ -109,15 +117,17 @@ The `Destroyed` event is triggered when the component is disposed. -@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 The `Focus` event is triggered when the input gains focus. @@ -126,18 +136,19 @@ The `Focus` event is triggered when the input gains focus. @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 The `Navigated` event is triggered when navigating between calendar views (such as month, year, or decade) or within the same view. @@ -149,15 +160,16 @@ The `Navigated` event is triggered when navigating between calendar views (such -@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 The `OnOpen` event is triggered when the DateRangePicker popup is opened. @@ -169,15 +181,16 @@ The `OnOpen` event is triggered when the DateRangePicker popup is opened. -@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 The `OnRenderDayCell` event is triggered when each day cell of the calendar is rendered, allowing customization or disabling of specific dates. @@ -186,18 +199,20 @@ The `OnRenderDayCell` event is triggered when each day cell of the calendar is r @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 The `RangeSelected` event is triggered after selecting both the start and end dates of the range. @@ -209,13 +224,14 @@ The `RangeSelected` event is triggered after selecting both the start and end da -@code{ - +@code { public void RangeSelectHandler(RangePickerEventArgs args) { - // Here, you can customize your code. + // Add logic to respond after the full range is selected. } } ``` -N> The DateRangePicker currently supports the events listed above. Additional events may be introduced in future releases based on user requests. If the 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 +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 e959c21a09..6cd8a8de1e 100644 --- a/blazor/daterangepicker/getting-started-with-web-app.md +++ b/blazor/daterangepicker/getting-started-with-web-app.md @@ -27,11 +27,11 @@ Configure the appropriate [Interactive render mode](https://learn.microsoft.com/ ## Install Syncfusion® Blazor Calendars and Themes NuGet in the Blazor Web App -To add the **Blazor DateRangePicker** 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/). +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 using `WebAssembly` or `Auto` render modes, install the Syncfusion® Blazor packages in the client project of the Blazor Web App. +For `WebAssembly` or `Auto` render modes, install the Syncfusion® Blazor packages in the client project of the Blazor Web App. -Alternatively, use the following Package Manager commands: +Alternatively, the following Package Manager commands can be used: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -58,7 +58,7 @@ Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](h 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, for 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" %} @@ -74,11 +74,10 @@ N> For details on creating a **Blazor Web App** with various interactive modes a ## Install Syncfusion® Blazor Calendars and Themes NuGet in the App -If using `WebAssembly` or `Auto` render modes, install the Syncfusion® Blazor component NuGet packages in 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 are 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/): +* 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 %} @@ -116,9 +115,9 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. {% 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, 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" %} @@ -191,7 +190,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> 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 @@ -223,7 +222,7 @@ N> If the **Interactivity Location** is set to `Global` and the **Render Mode** {% 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)" %} @@ -252,4 +251,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) \ No newline at end of file +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 fc1ef9c2d9..df7679fc90 100644 --- a/blazor/daterangepicker/getting-started.md +++ b/blazor/daterangepicker/getting-started.md @@ -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 are 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. +* 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 %} @@ -105,7 +104,7 @@ Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Bla {% 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,7 +152,7 @@ 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)" %} diff --git a/blazor/daterangepicker/globalization.md b/blazor/daterangepicker/globalization.md index 188a53f6c7..e811f55150 100644 --- a/blazor/daterangepicker/globalization.md +++ b/blazor/daterangepicker/globalization.md @@ -35,4 +35,4 @@ The following code example initializes the DateRangePicker component with the `a ![Blazor DateRangePicker in Arabic culture with right-to-left layout](./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. \ 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/how-to/customization-using-cssclass.md b/blazor/daterangepicker/how-to/customization-using-cssclass.md index 491dc5c690..676b3b7058 100644 --- a/blazor/daterangepicker/how-to/customization-using-cssclass.md +++ b/blazor/daterangepicker/how-to/customization-using-cssclass.md @@ -9,11 +9,11 @@ documentation: ug # Customization Using CssClass in Blazor DateRangePicker Component -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’s root element. By targeting this class in your 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. +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 provide a flexible way to customize the DateRangePicker component: -| **Class Name** | **Description** | +| Class Name | Description | | --- | --- | | e-date-range-wrapper | Applied to the DateRangePicker wrapper. | | e-range-icon | Applied to the DateRangePicker icon. | @@ -22,7 +22,7 @@ Following is the list of classes that provide a flexible way to customize the Da | 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-calendar | Applied to the end 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. | @@ -41,14 +41,14 @@ Following is the list of classes that provide a flexible way to customize the Da ```cshtml @using Syncfusion.Blazor.Calendars - +