DateBox: add Overview (#7108) (#7328)

vladaskorohodova · web-flow · commit f91c0374f4c6 · 2025-05-13T15:48:15.000+04:00
diff --git a/concepts/05 UI Components/DateBox/01 Overview/00 Overview.md b/concepts/05 UI Components/DateBox/01 Overview/00 Overview.md
@@ -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.
diff --git a/concepts/05 UI Components/DateBox/01 Overview/05 Elements.md b/concepts/05 UI Components/DateBox/01 Overview/05 Elements.md
@@ -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/)
+3. [Format and UI type](/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#type)
+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)
diff --git a/concepts/05 UI Components/DateBox/01 Overview/10 Key Features.md b/concepts/05 UI Components/DateBox/01 Overview/10 Key Features.md
@@ -0,0 +1,5 @@
+- **Customization**    
+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.
diff --git a/concepts/05 UI Components/DateBox/01 Overview/15 Explore More.md b/concepts/05 UI Components/DateBox/01 Overview/15 Explore More.md
@@ -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/)
diff --git a/images/DateBox/date-box-elements.png b/images/DateBox/date-box-elements.png

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+DateBox is a UI component that helps users enter or modify date and time values.`
	`2`	`+`
	`3`	`+In this overview, you can find a map of DateBox elements, information about key features, and what to explore next.`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+- [API](/api-reference/10%20UI%20Components/dxDateBox '/Documentation/ApiReference/UI_Components/dxDateBox/')`
	`2`	`+`
	`3`	`+- [Demos](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DateBox/Overview/)`