跳到主要内容

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.

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
FormatA valid date format string. See dayJS.
PlaceholderThe value will be shown when the input field is empty.
Max dateset the maximum date that a user can select from the calendar interface.
Min datespecify the earliest date that a user can select from the calendar interface.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Show clear buttoncontrol whether or not a clear button is displayed in the input field
Required fieldValid only when the switch is on.
Custom ruleCreate your validation logic here. The rules should be made in JavaScript and covered by {{}}.
Hide validation messageYou 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 KeySpecify a key of a wrapping form component when constructing the data attribute.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme ColorAllows 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'}}

PropertiesDescription
ValueInput 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

EventDescription
ChangeWhen 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 nameDescription
colorSchemethe color property of Date
customRulethe custom rule that user specified
dateFormatthe formate of date
disableda Boolean value indicate the disabled status
displayNamethe name of this component (ie button1)
formDataKeythe Form Data Key of Date
hiddenhidden status (true or false)
hideValidationMessagea Boolean value indicate whether the validation message is hidden
labellabel value
labelAlignalignment of switch label (left or right)
labelPositionposition of switch label (left or right)
labelWidththe integer representing width of label.
labelFulla Boolean value indicate if the label is full.
maxDatethe value of maximum date
minDatethe value of minimum date
placeholderplaceholder value
readOnlya Boolean value indicate the readyOnly status of input.
requireda Boolean value indicate the required status of input.
showCleara Boolean value indicate wether the date will be shown clear
tooltipTextvalue of tooltip text
valueInput 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:  codeid, createdAtexpiredAtstartedAt, 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

date_time0

Step 3 Configure the component

For the button component, we can configure it to set the date in date component to today's date.

  1. In the Edit event handler, select Control component in action, select the date component that you want to update as the target of the event.
  2. Choose the setValue action and set the value as {{currentUserInfo.updatedAt}}

date_confg

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.

date_time1