Date
What is Date?
The Date component is a component that allows users to select a date from a calendar interface. The Date component is typically used in forms or data entry interfaces where the user needs to select a specific date.
When a Date component is added to the canvas, it displays a calendar interface by default. The user can navigate through the calendar by clicking on the previous or next arrows to move to a different month, or by clicking on a specific date to select it. The selected date will be displayed in the input field.
Properties
Date's available properties. JavaScript may be written to read or alter information about components.
| Properties | Description |
|---|---|
| Default value | The initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}. |
| Format | A valid date format string. See dayJS. |
| Placeholder | The value will be shown when the input field is empty. |
| Max date | set the maximum date that a user can select from the calendar interface. |
| Min date | specify the earliest date that a user can select from the calendar interface. |
| Label | The name of the field displayed to the user |
| Caption | A caption used to describe the field in detail |
| Hidden label | Set whether to display the label |
| Position | Set the position of the label relative to the component |
| Alignment | Set the alignment (align to left or right) of the label |
| Width | When the label is on the left side of the component, set the width ratio of the label. |
| Event Handler | Trigger queries, control components, or call other APIs in response to component events. |
| Disabled | Control the status of whether the component is disabled. The component cannot be modified or focused when it is disabled. |
| Read Only | Control the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified. |
| Tooltip | Users can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported. |
| Show clear button | control whether or not a clear button is displayed in the input field |
| Required field | Valid only when the switch is on. |
| Custom rule | Create your validation logic here. The rules should be made in JavaScript and covered by {{}}. |
| Hide validation message | You can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript. |
| Form Data Key | Specify a key of a wrapping form component when constructing the data attribute. |
| Hidden | Dynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value. |
| Theme Color | Allows users to specify the button's background color and opacity |
Methods
You can use other components to control the component. We support the following four methods:
- setValue
To set the input date value, for example, {{'value1'}}
| Properties | Description |
|---|---|
| Value | Input value |
- clearValue
To clear the value of the selected component
- validate
To verify that the input information is legal
- clearValidate
To clear the validation message
Event handler
| Event | Description |
|---|---|
| Change | When a user changes the selected date value, perform specific action customized by users. |
Data
The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.
| Property name | Description |
|---|---|
| colorScheme | the color property of Date |
| customRule | the custom rule that user specified |
| dateFormat | the formate of date |
| disabled | a Boolean value indicate the disabled status |
| displayName | the name of this component (ie button1) |
| formDataKey | the Form Data Key of Date |
| hidden | hidden status (true or false) |
| hideValidationMessage | a Boolean value indicate whether the validation message is hidden |
| label | label value |
| labelAlign | alignment of switch label (left or right) |
| labelPosition | position of switch label (left or right) |
| labelWidth | the integer representing width of label. |
| labelFull | a Boolean value indicate if the label is full. |
| maxDate | the value of maximum date |
| minDate | the value of minimum date |
| placeholder | placeholder value |
| readOnly | a Boolean value indicate the readyOnly status of input. |
| required | a Boolean value indicate the required status of input. |
| showClear | a Boolean value indicate wether the date will be shown clear |
| tooltipText | value of tooltip text |
| value | Input value |
Example: {{date1.value}}
Use case
Next, we will demonstrate how to map the data from the data source to date and set to current date with a button.
Step 1 Add an action
Let us create a table in REST API called promoteCodes, including 6 columns: code, id, createdAt, expiredAt, startedAt, updatedAt. We will use the updatedAt time for sample use.
Then we can create a new action for REST API from the action list, listing all data in promoteCodes and named restapi1.
Click Save and Run to activate this action.
Step 2 Add Components
Next, we can add a date component and a button component to the canvas. For default value of the date component, we set it up as the last update time of first promote code from the rest api data.
{{restapi1.data.promoteCodes[0].updatedAt}}
We also labeled the button as "Today" as shown below
Step 3 Configure the component
For the button component, we can configure it to set the date in date component to today's date.
- In the Edit event handler, select
Control componentin action, select thedatecomponent that you want to update as the target of the event. - Choose the
setValueaction and set the value as{{currentUserInfo.updatedAt}}
Step 4 Test
Now that when you click the "today" button, the time should change to today's date. As for here, we have 2023-5-6 but it may be different when you are testing it.
