Drag and drop the Date/Time Field element into the Mobile Editor, to open up the Date/Time form.
Click the topics to expand
Display Tab
Label
|
Title of the Text Field
|
Label Position
|
Decide where the label is positioned in the Date/Time Field
|
Display in Timezone
|
This will display the captured date time in the select timezone. Choose of Viewer, of Submission, of Location, UTC.
|
Use Locale Settings
|
Use locale settings to display date and time.
|
Allow Manual Input
|
Check this if you would like to allow the user to manually enter in the date.
|
Format
|
The date format for displaying the datetime value.
Format : <yyyy-MM-dd hh:mm a>
|
Placeholder
|
The placeholder text that will appear when this field is empty.
|
Description
|
Description of the Date/Time Field
|
Tooltip
|
Adds a Tooltip to this field
Prefix : Add a prefix text
Suffix : Add a suffix text
|
Custom CSS Class
|
Add a custom CSS class
|
Tab Index
|
Sets the tabindex attribute of this component to override the tab order of the form. See the MDN documentation on tabindex for more information.
|
Check-Box Options
|
Hidden : Add hidden components within the Date/Time Field
Hide label: Hides the label of the Date/Time Field Element
Initial Focus : Make this field the initially focused element on this Interactive Message form.
Disabled : Disable this Date/Time Field
Table View : Shows this value within the table view of the submissions.
Modal Edit : Opens up a modal to edit the value of this component.
|
|
Date Tab
Enable Date Input
|
Enables date input for this field.
|
Use Input to add moment.js for minDate
|
Enables to use input for moment functions instead of calendar.
|
Use calendar to set minDate
|
Enables to use calendar to set date.
|
Use Input to add moment.js for maxDate
|
Enables to use input for moment functions instead of calendar.
|
Use calendar to set maxDate
|
Enables to use calendar to set date.
|
Disable specific dates or dates by range
|
Add dates that you want to blacklist. For example: 2025-02-21
|
Custom Disabled Dates
|
The following variables are available in all scripts.
|
Disable weekends
|
Check to Disable weekends
|
Disable weekdays
|
Check to disable weekdays
|
|
Time Tab
Enable Time Input
|
Enables time input for this field.
|
Hour Step Size
|
The number of hours to increment/decrement in the time picker.
|
Minute Step Size
|
The number of minutes to increment/decrement in the time picker.
|
12 Hour Time (AM/PM)
|
Display time in 12 hour time with AM/PM.
|
|
Data Tab
Configure the data and its properties.
Multiple Values
|
Allows multiple values to be entered for this field
|
Default Value
|
This will be the value for this field, before user interaction.
Note: Having a default value will override the placeholder text.
|
Default Date
|
Use Moment.js functions to set the default value to a specific date. For example: moment().subtract(10, 'days')
|
Flatpickr options
|
A raw JSON object to use as options for the Date / Time component (Flatpickr).
|
Persistent
|
A persistent field will be stored in database when the form is submitted.
|
Protected
|
A protected field will not be returned when queried via API.
|
Database Index
|
Set this field as an index within the database. Increases performance for submission queries.
|
Encrypted (Enterprise Only)
|
Encrypt this field on the server. This is two way encryption which is not suitable for passwords. Only valid for Enterprise GSMS Users.
|
Redraw On
|
Redraw this component if another component changes. This is useful if interpolating parts of the component like the label.
|
Clear Value When Hidden
|
When a field is hidden, clear the value.
|
Custom Default Value and Calculated Value
|
A set of variables available in all scripts.
|
Calculate Value On Server
|
Checking this will run a calculation on the server. This is useful when there is a need to override the values submitted with the calculations performed on the server.
|
Allow Manual Override of Calculated Value
|
When checked, this will manually override the calculated value.
|
|
Validation
Validate the data within the Date/Time Field
Required
|
A required field must be filled in before the form can be submitted.
|
Unique
|
Makes sure the data submitted for this field is unique, and has not been submitted before.
|
Validate On
|
Determines when this component should trigger front-end validation.
|
Error Label
|
The label for this field when an error occurs.
|
Customer Error Message
|
Error message displayed if any error occurred.
|
Custom validation and JSONLogic Validation
|
The following variables are available in all scripts.
|
|
API
Elements to be included for the API part of the message.
Property Name
|
The name of this field in the API endpoint.
|
Field Tags
|
Tag the field for use in custom logic.
|
Custom properties
|
Users configure any custom properties for this component. Use Add Another button to add more than one key.
|
|
Conditional
Simple
|
This component should display
|
Choose True or False
|
When the form component
|
Choose Submit
|
Has the value
|
Add a valid Value
|
Advanced Conditions
|
The following variables are available in all scripts.
|
Logic
Add certain logical information to the Message.
Start by choosing the Add Logic button.
Enter a Logic name, and choose a type namely :
Simple
|
|
Javascript
|
|
JSON Logic
|
|
Event
|
|
Next, add an Action.
Enter an Action Name and choose a Type.
Property
Choose a a property type
|
|
Value
Choose type Value to use an appropriate Java Script
|
|
Merge Component Schema
|
|
|
Layout
This section provides a map of HTML attributes for a component's input element.
Note: Attributes provided by other component settings or other attributes generated by form.io take precedence over attributes in this grid.
Click on Add Attributes to add an Attribute Name and Attribute Value.
PDF Overlay, is exclusively for PDF Forms only.
Style: Custom styles applied to this component when rendered in PDF.
Page: The PDF page to place this component.
Left: The left margin within a page to place this component.
Top: The top margin within a page to place this component.
Width: The width of the component (in pixels).
Height: The height of the component (in pixels).
|
