Date time
What is Date Time?
Date Time component is a component that allows users to select a date and time from a calendar and 24 hours interface, typically used in forms or data entry interfaces where the user needs to specify a specific date and time.
When a Date Time component is added to canvas, it displays a calendar and clock interface. 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 clock interface displays hours, minutes, and seconds that the user can adjust by moving mouse cursor or using the up and down arrows.
Properties
Date Time'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. |
| Step size | the step size in unit of minutes |
| 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 |
| Tooltip | User can enter component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported. |
| 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 time 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 time 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 |
| disabled | a Boolean value indicate the disabled status |
| displayName | the name of this component (ie button1) |
| events | an Array value for sequence of events |
| format | the formate of date and time |
| 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 |
| minuteStep | minute step size value |
| 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 date and time value |
| validateMessage | string value for validate message |
Example: {{dateTime1.value}}
Use case
Next, we will demonstrate how to map the data from the data source to date time and set to current date and time 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 time 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 "Now" as shown below
Step 3 Configure the component
For the button component, we can configure it to set the date in date time component to current date and time.
- In the Edit event handler, select
Control componentin action, select thedate timecomponent 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 "Now" button, the time should change to today's date. As for here, we have 2023-5-6 11:19:47 but it may be different when you are testing it.
