DateBox: Update Overview (#8017) (#8099)

Author: arman-boyakhchyan

concepts/05 UI Components/DateBox/01 Overview/00 Overview.md

@@ -1,3 +1,3 @@
-DateBox is a UI component that helps users enter or modify date and time values.
+DateBox is a UI component that allows users to enter or modify date and time values. The component ships with three entry modes that eliminate the need for separate date, time, and date/time selection components. DateBox supports date and time entry through built-in dropdown pickers, as well as in the component text field.
 
-In this overview, you can find a map of DateBox elements, information about key features, and what to explore next.
+This overview highlights DateBox elements, key features, and what to explore next.

concepts/05 UI Components/DateBox/01 Overview/05 Elements.md

@@ -1,8 +1,17 @@
-<img src="/images/DateBox/date-box-elements.png" alt="DateBox elements"/>
+<img src="/images/DateBox/date-box-elements.png" alt="DateBox elements" style="border-radius: 16px"/>
 
-1. [Date display format](/api-reference/10%20UI%20Components/dxDateBox/1%20Configuration/displayFormat.md '/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#displayFormat')
-2. [Input buttons](/api-reference/10%20UI%20Components/dxDropDownEditor/1%20Configuration/buttons '/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/buttons/')
-3. [Format and UI type](/api-reference/10%20UI%20Components/dxDateBox/1%20Configuration/type.md '/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#type')
-4. [Today button](/api-reference/10%20UI%20Components/dxDateBox/1%20Configuration/todayButtonText.md '/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#todayButtonText')
-5. [Apply button](/api-reference/10%20UI%20Components/dxDateBox/1%20Configuration/applyButtonText.md '/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#applyButtonText')
-6. [Cancel button](/api-reference/10%20UI%20Components/dxDateBox/1%20Configuration/cancelButtonText.md '/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#cancelButtonText')
+1. [Label](Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#label) (*"outside"* [label mode](/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#labelMode))
+2. [Value display format](/api-reference/10%20UI%20Components/dxDateBox/1%20Configuration/displayFormat.md '/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#displayFormat')
+3. [Drop-down button](/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#showDropDownButton) (*"date"* [type](/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#type))
+4. [Label](/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#label) (*"static"* [label mode](/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#labelMode))
+5. [Clear button](/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#showClearButton)
+6. [Drop-down button](/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#showDropDownButton) (*"datetime"* [type](/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#type))
+7. [Placeholder](/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#placeholder)
+8. [Custom button](/api-reference/10%20UI%20Components/dxDropDownEditor/1%20Configuration/buttons '/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/buttons/')
+9. [Drop-down button](/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#showDropDownButton) (*"time"* [type](/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#type))
+10. Drop-down area (*"date"* [type](/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#type))
+11. [Today button](/api-reference/10%20UI%20Components/dxDateBox/1%20Configuration/todayButtonText.md '/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#todayButtonText')
+12. Drop-down area (*"datetime"* [type](/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#type))
+13. [Apply button](/api-reference/10%20UI%20Components/dxDateBox/1%20Configuration/applyButtonText.md '/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#applyButtonText')
+14. [Cancel button](/api-reference/10%20UI%20Components/dxDateBox/1%20Configuration/cancelButtonText.md '/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#cancelButtonText')
+15. Drop-down area (*"time"* [type](/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#type))

concepts/05 UI Components/DateBox/01 Overview/10 Key Features.md

@@ -1,5 +1,32 @@
-- **Customization**    
-Set the DateBox [type](/api-reference/10%20UI%20Components/dxDateBox/1%20Configuration/type.md '/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#type') to date, time, or both. You can define the [accepted date range](/concepts/05%20UI%20Components/DateBox/00%20Getting%20Started%20with%20DateBox/13%20Set%20the%20Accepted%20Date%20Range.md '/Documentation/Guide/UI_Components/DateBox/Getting_Started_with_DateBox/#Set_the_Accepted_Date_Range'), specify the initial [value](/api-reference/10%20UI%20Components/dxDateBox/1%20Configuration/value.md '/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#value'), or [disable](/api-reference/10%20UI%20Components/dxDateBox/1%20Configuration/disabledDates.md '/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#disabledDates') specific dates if needed. DateBox includes [3 value pickers](/concepts/05%20UI%20Components/DateBox/03%20Platform-Specific%20Value%20Pickers.md '/Documentation/Guide/UI_Components/DateBox/Platform-Specific_Value_Pickers/') for different platforms.
+- **DateBox Types**    
+You can configure the DateBox [type](/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#type) to integrate the component as a date, time, or date and time picker.
+
+- **Picker Configuration**    
+DateBox supports multiple [picker types](/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#pickerType), including calendar, list, and roller pickers. You can also implement native pickers that vary depending on the user's device and platforms.
 
 - **Formatting**    
-DateBox [formats](/concepts/05%20UI%20Components/DateBox/04%20Value%20Formatting%20and%20Masked%20Input.md '/Documentation/Guide/UI_Components/DateBox/Value_Formatting_and_Masked_Input/') its value according to the application's locale. Use [predefined or custom](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') formats.
+The DateBox component automatically formats values based on your application locale. You can also [specify display formats](/Documentation/Guide/UI_Components/DateBox/Value_Formatting_and_Masked_Input/), including [predefined, Intl, and custom formats](/Documentation/Guide/Common/Value_Formatting/#Format_UI_Component_Values).
+
+- **Masked Input**    
+DateBox supports [masked input](/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#useMaskBehavior). When enabled, the component allows users to input only characters supported by the DateBox [display format](/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#displayFormat).
+
+- **Configurable Date and Time Ranges**    
+You can limit DateBox selection to a specific [date and time range](/Documentation/Guide/UI_Components/DateBox/Getting_Started_with_DateBox/#Set_the_Accepted_Date_Range). For instance, you can specify a new [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object as the [minimum](/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#min) to disable date and time values in the past.
+
+- **Disabled Dates**    
+DateBox allows you to [disable individual dates](/Documentation/Guide/UI_Components/DateBox/Getting_Started_with_DateBox/#Disable_Specific_Dates). You can implement this feature to disable days such as holidays.
+
+- **Drop-Down Calendar Configuration**    
+You can customize [DateBox Calendar options](/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#calendarOptions) such as zoom level and week numbers.
+
+- **Validation**    
+The DateBox component ships with [data validation capabilities](/Documentation/Guide/UI_Components/Common/UI_Widgets/Data_Validation/). You can implement custom logic to validate the component value and display a [validation status](/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#isValid). You can also validate DateBox values within a DevExtreme [Form](/Documentation/Guide/UI_Components/Form/Overview/) component.
+
+- **Adaptivity**    
+You can [enable adaptive rendering](/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#adaptivityEnabled) to adapt DateBox to small screens. In this mode, the component displays compact visual elements.
+
+- **Accessibility and Keyboard Navigation**    
+DateBox [conforms](/Documentation/Guide/UI_Components/DateBox/Accessibility/) to WCAG 2.x, European Accessibility Act (EAA), and Americans with Disabilities Act (ADA) standards. The component supports [keyboard navigation](/Documentation/Guide/UI_Components/DateBox/Accessibility/#Keyboard_Navigation) and custom key handlers. DateBox also ships with right-to-left ([RTL](/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#rtlEnabled)) representation support.
+
+- **Customization**    
+You can customize DateBox elements such as the text field and [drop-down area](/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#dropDownOptions). The component supports [label](/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#label) and [placeholder](/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#placeholder) configration, as well as custom text field [buttons](/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/buttons/).

concepts/05 UI Components/DateBox/01 Overview/15 Explore More.md

@@ -1,3 +1,5 @@
+- [Getting Started with DateBox](/Documentation/Guide/UI_Components/DateBox/Getting_Started_with_DateBox/)
+
 - [API](/api-reference/10%20UI%20Components/dxDateBox '/Documentation/ApiReference/UI_Components/dxDateBox/')
 
 - [Demos](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DateBox/Overview/)