- | defaultValue |
+ ariaLabel |
string
|
- Initial value of the input element, only when it is uncontrolled. |
- - |
+
+ Specifies a string to be used as the name for the date input element when no label is
+ provided.
+ |
+ 'Date input' |
- | value |
+ autocomplete |
string
|
- Value of the input element. If undefined, the component will be uncontrolled and the value will be managed
- internally by the component.
+ HTML autocomplete attribute. Lets the user specify if any permission the user agent has to
+ provide automated assistance in filling out the input value. Its value must be one of all the possible
+ values of the HTML autocomplete attribute. See{" "}
+ MDN{" "}
+ for further information.
|
- - |
-
-
- | label |
- string
+ 'off'
|
- Text to be placed above the date input. |
- - |
- | name |
+ clearable |
- string
+ boolean
+ |
+ If true, the date input will have an action to clear the entered value. |
+
+ false
|
- Name attribute of the input element. |
- - |
- | helperText |
+ defaultValue |
string
|
- Helper text to be placed above the date. |
+ Initial value of the input element, only when it is uncontrolled. |
- |
- | placeholder |
+ disabled |
boolean
|
- If true, the date format will appear as placeholder in the field. |
+ If true, the component will be disabled. |
false
|
+
+ | error |
+
+ string
+ |
+
+ If it is a defined value and also a truthy string, the component will change its appearance, showing the
+ error below the date input component. If the defined value is an empty string, it will reserve a space
+ below the component for a future error, but it would not change its look. In case of being undefined or
+ null, both the appearance and the space for the error message would not be modified.
+ |
+ - |
+
| format |
@@ -93,52 +108,52 @@ const sections = [
|
- | clearable |
-
- boolean
- |
- If true, the date input will have an action to clear the entered value. |
+ helperText |
- false
+ string
|
+ Helper text to be placed above the date. |
+ - |
- | disabled |
-
- boolean
- |
- If true, the component will be disabled. |
+ label |
- false
+ string
|
+ Text to be placed above the date input. |
+ - |
- | optional |
-
- boolean
- |
+ margin |
- If true, the date will be optional, showing the text '(Optional)' next to the label. Otherwise, the field
- will be considered required and an error will be passed as a parameter to the onBlur and{" "}
- onChange functions when it has not been filled.
+ 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin
|
- false
+ Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and
+ 'right' properties in order to specify different margin sizes.
|
+ - |
- | readOnly |
+ name |
- boolean
+ string
|
+ Name attribute of the input element. |
+ - |
+
+
+ | onBlur |
- If true, the component will not be mutable, meaning the user can not edit the control. The date picker
- cannot be opened either. In addition, the clear action will not be displayed even if the flag is set to
- true.
+ {"(val: { value: string; error?: string; date?: Date }) => void"}
|
- false
+ This function will be called when the input element loses the focus. An object including the string value,
+ the error and the date value will be passed to this function. If the string value is a valid date,{" "}
+ error will be undefined. Also, if the string value is not a valid date, date{" "}
+ will be undefined.
|
+ - |
| onChange |
@@ -154,56 +169,49 @@ const sections = [
- |
- | onBlur |
+ optional |
- {"(val: { value: string; error?: string; date?: Date }) => void"}
+ boolean
|
- This function will be called when the input element loses the focus. An object including the string value,
- the error and the date value will be passed to this function. If the string value is a valid date,{" "}
- error will be undefined. Also, if the string value is not a valid date, date{" "}
- will be undefined.
+ If true, the date will be optional, showing the text '(Optional)' next to the label. Otherwise, the field
+ will be considered required and an error will be passed as a parameter to the onBlur and{" "}
+ onChange functions when it has not been filled.
+ |
+
+ false
|
- - |
- | error |
+ placeholder |
- string
+ boolean
|
+ If true, the date format will appear as placeholder in the field. |
- If it is a defined value and also a truthy string, the component will change its appearance, showing the
- error below the date input component. If the defined value is an empty string, it will reserve a space
- below the component for a future error, but it would not change its look. In case of being undefined or
- null, both the appearance and the space for the error message would not be modified.
+ false
|
- - |
- | autocomplete |
+ readOnly |
- string
+ boolean
|
- HTML autocomplete attribute. Lets the user specify if any permission the user agent has to
- provide automated assistance in filling out the input value. Its value must be one of all the possible
- values of the HTML autocomplete attribute. See{" "}
- MDN{" "}
- for further information.
+ If true, the component will not be mutable, meaning the user can not edit the control. The date picker
+ cannot be opened either. In addition, the clear action will not be displayed even if the flag is set to
+ true.
|
- 'off'
+ false
|
- | margin |
-
- 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin
- |
+ ref |
- Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and
- 'right' properties in order to specify different margin sizes.
+ {"React.Ref"}
|
+ Reference to the component. |
- |
@@ -229,23 +237,15 @@ const sections = [
- | ref |
-
- {"React.Ref"}
- |
- Reference to the component. |
- - |
-
-
- | ariaLabel |
+ value |
string
|
- Specifies a string to be used as the name for the date input element when no label is
- provided.
+ Value of the input element. If undefined, the component will be uncontrolled and the value will be managed
+ internally by the component.
|
- 'Date input' |
+ - |
diff --git a/apps/website/screens/components/date-input/overview/DateInputOverviewPage.tsx b/apps/website/screens/components/date-input/overview/DateInputOverviewPage.tsx
new file mode 100644
index 0000000000..d3a79924fd
--- /dev/null
+++ b/apps/website/screens/components/date-input/overview/DateInputOverviewPage.tsx
@@ -0,0 +1,290 @@
+import { DxcParagraph, DxcBulletedList, DxcFlex } from "@dxc-technology/halstack-react";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
+import DocFooter from "@/common/DocFooter";
+import anatomy from "./images/date_input-anatomy.png";
+import clearContent from "./images/date_input-clearcontent.png";
+import datePicker from "./images/date_input-datepicker.png";
+import Image from "@/common/Image";
+import Figure from "@/common/Figure";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+