Skip to content

DateBox: add Overview #7108

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vladaskorohodova merged 2 commits into from
May 13, 2025
Merged

DateBox: add Overview #7108

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ca77069
DateBox: add Overview
vladaskorohodova Mar 3, 2025
f1e025e
Apply suggestions from code review
vladaskorohodova May 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions concepts/05 UI Components/DateBox/01 Overview/00 Overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
DateBox is a UI component that helps users enter or modify date and time values.

In this overview, you can find a map of DateBox elements, information about key features, and what to explore next.
8 changes: 8 additions & 0 deletions concepts/05 UI Components/DateBox/01 Overview/05 Elements.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<img src="/images/DateBox/date-box-elements.png" alt="DateBox elements"/>

1. [Date display format](/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#displayFormat)
2. [Input buttons](/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/buttons/)
Copy link

@helen-dikareva helen-dikareva Aug 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's be more specific
Input buttons: Clear and DropDownButton

3. [Format and UI type](/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#type)
Copy link

@helen-dikareva helen-dikareva Aug 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should describe UI elements not API props on these pictures
So, it's better to remove 'Format and UI type' but add 'Calendar area OR Date picker: Calendar' and 'Time picker'

4. [Today button](/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#todayButtonText)
5. [Apply button](/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#applyButtonText)
6. [Cancel button](/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#cancelButtonText)
5 changes: 5 additions & 0 deletions concepts/05 UI Components/DateBox/01 Overview/10 Key Features.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
- **Customization**
Copy link

@helen-dikareva helen-dikareva Aug 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should mention all important features as other vendors do
We have at least two component in one so we will have a long list here

  1. DateBox Types
    Describe the followings:
  • type prop
  • different types for value pickers
    'calendar' | 'list' | 'native' | 'rollers'

  1. Value Formating (Locale-dependent format, Built-in predefined formats, Custom Format String.

  2. Masked Input (from Sveta's doc)

You can use the displayFormat property to define a mask that controls user input if useMaskBehavior is true.

  1. Date/Time Ranges OR Accepted Date Range (min, max props)
    Example of the description from other landing:

By default, component has no limits and will accept any date the user provides. To limit the available dates users can select from, simply use min and max properties. They enable you to define the valid date ranges available within the component.

  1. Date disabling

  2. Calendar Options
    Please describe the followings in one section or in different
    firstDayOfWeek
    minZoomLevel /maxZoomLevel & zoomLevel
    selectionMode
    selectWeekOnClick
    showWeekNumbers & weekNumberRule

  3. Form Support and Value validation
    Example of such description:

Form support and date validation
Date values are validated within a minimum and maximum range to enforce entering only a valid date value. In a form component, integrate the form validation plugin to perform custom validation in the date text box.

We can mention invalidDateMessage & dateOutOfRangeMessage

  1. Adaptivity
    (see adaptivityEnabled)

  2. A11y, KBN, RTL

  3. Appearance settings
    I found the following list of properties that set basic UI. I think we should mention them with short descriptions (you can try to shorten the list without loosing info)

  1. Customization
    dropDownButtonTemplate
    calendar cell template

Set the DateBox [type](/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#type) to date, time, or both. You can define the [accepted date range](/Documentation/Guide/UI_Components/DateBox/Getting_Started_with_DateBox/#Set_the_Accepted_Date_Range), specify the initial [value](/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#value), or [disable](/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#disabledDates) specific dates if needed. DateBox includes [3 value pickers](/Documentation/Guide/UI_Components/DateBox/Platform-Specific_Value_Pickers/) for different platforms.

- **Formatting**
DateBox [formats](/Documentation/Guide/UI_Components/DateBox/Value_Formatting_and_Masked_Input/) its value according to the application's locale. Use [predefined or custom](/Documentation/Guide/Common/Value_Formatting/) formats.
3 changes: 3 additions & 0 deletions concepts/05 UI Components/DateBox/01 Overview/15 Explore More.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
- [API](/api-reference/10%20UI%20Components/dxDateBox '/Documentation/ApiReference/UI_Components/dxDateBox/')

- [Demos](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DateBox/Overview/)
Binary file added images/DateBox/date-box-elements.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading