The date picker field enables your users to enter a date value. They can either use a date picker or type the required date value. The date field displays the date as per the date format and time zone set in your Profile & Preferences' settings. Below is how a date picker field looks on your form:
When to use this field
Use a date picker field if you want to enable your users to select a particular date. You can also enable your users to select a date as well as a time value by including time in the appearance settings.
Experience while entering data: When a user is using a web browser, clicking in the date field's input area will open the date picker. The current date comes highlighted. Your user can select the required date in a few clicks.
Add Date Picker to the form
Firstly, find the Date Picker control in the controls add panel. Then, drag and drop it into a section or container on your form.
Basic of the Date Picker field
Open the Content > Basic block and set the Title's text of this Multiple Metadata control. For more information about Title for field control, please refer:
Set the Associated variable for this Date Picker control. When you add a new Date Picker control, a default variable will be generated automatically. You can click the Edit Button to change the ID and name, or click the Reset button to bind this Date Picker control to other existing variables. For more information, please refer:
Understand form controls and the associated variables / fields
Appearance of the Date Picker field
Open the Content > Appearance block to set the appearance and layout of this Date Picker control.
Placeholder: Set the text of the placeholder for this Date Picker control.
Time: Turn ON this option to allow users to select time, which can be HH:MM:SS, HH:MM or HH.
Format: Select the format of time value.
Select Current Time: Turn this ON to make the current time as the selected time value.
Display Title: Choose display or hide the label of this control. For more information, please refer: Understand the title of field controls
Allow comment: Turn on this option will allow users to add comments on this control.
Validation of the Date Picker
Open the Content > Validation block to set the properties of this Date Picker control.
Readonly: Turn this ON will make this field control as view only status.
Required: Make it mandatory for your users to enter an input in this field.
Default Value: Initial value for a date field refers to the date value that comes set when your users access your forms to submit an entry. The initial value can either be the current date or a particular date.
Imagine that you are building an app to manage the travel expenses of your employees, where the Expense Form accepts details such as Expense date, Amount and Purpose. You can help your employees save time by pre-defaulting the date field with the current date.Custom Validation: Set the custom validation rules. An error message that will display under your field when specified conditions become true. It will allow you to add any number of rules for validating your field. Learn more about the Custom Validation.
Action call of the Date Picker field
Open the Content > Action
block to call a pre-defined action from the dropdown list. This action will be triggered once the value of this Date Picker field is changed.
Style the Date Picker field
Field - Editable
Open the Style > Field - Editable block to set the styles of the field control for it's editable status.
Typography: Set the typography options for the text in the Date Picker.
Normal / Focus: Set different styles for normal state and focus state of the Date Picker. Styles below are supported to be set separately for Normal and Focus state.
Color: Choose the color of the field's text.
Background Color: Set background color of the field. By default, the background color is set as transparent.
Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
Radius: Set the border radius to control corner roundness.
Shadow: Adjust box shadow options
Placeholder Color: Choose the color of the placeholder text.
Align: Set the alignment of text inside the field control. Can be Left, Center or Right.
Padding: Set the Padding of the field control.
Field Width: Set the width of the field control in PX , %, em, rem, vw, calc.
Field Alignment: Set the alignment of the field control. This will only be effected when the field width is less than the outside container.
Error Message: Set the styles of the error message,
Typography: Set the typography options for the error message.
Color: Choose the color of the error message's text.
Field - Read Only
Open the Style > Field - Read Only block to set the styles of the field control for it's view only status.
Typography: Set the typography options for the text in the Date Picker.
Color: Choose the color of the field's text.
Background Color: Set background color of the field. By default, the background color is set as transparent.
Align: Set the alignment of text inside the field control. Can be Left, Center or Right.
Padding: Set the Padding of the field control.
Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
Radius: Set the border radius to control corner roundness.
Style of title
Set the Title of field controls that are applicable to this control.
Advanced Settings
Set the Advanced options that are applicable to this control.