Date-Time Field Component
Changed on:
1 Oct 2025
Overview
This reusable Date-Time Field Component offers an intuitive calendar-based UI for selecting a date. Below the calendar, clearly labeled input fields allow users to enter precise date and time values. Outputs are returned in ISO 8601 format to maintain consistency across systems.
| Plugin Name | Core |
|---|
The standard library of mystique components.
Alias
fc.field.datetime , datetime
Detailed technical description
Layout
The layout displays one calendar component and navigation icons.
- The current month
It also contains 2 text fields below the calendar component:
- Date
- Time
Date Field
The date field format depends on the preferred browser language. The default format is ``dd/mm/yyyy``, where:
- dd – Day
- mm – Month
- yyyy - Year
Supported date formats
Preferred browser language | Date format |
English (United Kingdom)/English (Australia) | dd/mm/yyyy |
English (United States) | mm/dd/yyyy |
English/French (Canada) | yyyy/mm/dd |
Other languages | dd/mm/yyyy |
The following validation for calendar format is applied:
- dd - Allowed values from 01 to 31 (Days from 1 to 9 are displayed prefixed with 0 (e.g. 01 / 07 / 2021 )
- mm - Allowed values from 01 to 12
- yyyy - Allowed values from 1970 up to the current year
The possibility of selecting a date in the future is set by the property ``disableFuture``.
Time Field
The time field has the following format ``hh:mm:ss``, where:
- hh – Hours
- mm – Minutes
- ss – Seconds
The following validations are applied:
- hh – Allowed values are from 00 to 23
- mm – Allowed values are from 00 to 59
- ss – Allowed values are from 00 to 59
The default time is applied to the time input field - 00:00:00
Learn how to add new fields in Registering SDK Components.
Navigation Icons
The date and time field component contains ``<`` and ``>`` icons to navigate to the previous/next month. ``<`` / ``>`` icons are disabled if January 1970 / next to the current month is displayed, respectively.
Buttons Block
The buttons block contains the following buttons:
- Clear button:
The button is always visible and enabled. By clicking on the Clear button, all changes are reset.
- Cancel button:
The button is always visible and enabled. Clicking on the Cancel button clears all entered values, and the component is closed.
- Apply button:
The button is always visible and enabled. The component is closed by clicking on the Apply button, and the entered date and time (if selected or entered) are specified and displayed in the input form.
Properties
Name | Type | Required | Default | Description |
value |
| No | None | Sets the initial value of the component. Must be an ISO 8601 formatted string (e.g., Using the component in the workflow, the |
label |
| No | None | Defines the input label. Supports internationalization via i18n keys. |
disableFuture |
| Yes |
| If set to |
helperText |
| No | None | Text displayed below the input to guide or inform the user. |
minDate |
| No | None | Sets the minimum selectable date. The value must be a valid ISO string. |
maxDate |
| No | None | Sets the maximum selectable date. The value must be a valid ISO string. |
Workflow configuration allows only properties supported by workflow contracts.
1String name;
2String label;
3String type;
4String source;
5Object value;
6Object options;
7Object defaultValue;
8Boolean mandatory = false;1 {
2 "userActions": [
3 {
4 "context": [
5 {
6 "label": "Date",
7 "type": "SECONDARY",
8 "modules": [
9 "adminconsole"
10 ],
11 "confirm": true
12 }
13 ],
14 "attributes": [
15 {
16 "name": "datetime",
17 "label": "Date",
18 "type": "datetime",
19 "source": "",
20 "mandatory": false
21 }
22 ]
23 }
24 ]
25}Configuration example
1 {
2 "component": "fc.filterPanel",
3 "props": {
4 "overrides": {
5 "createdOn": {
6 // filterPanel props
7 "component": "fc.field.datetime",
8 "sortPrefix": 1,
9 // datetime props
10 "disableFuture": true,
11 "minDate":"2025-01-01",
12 "label": "Created"
13 }
14 },
15 }
16}Version History
Recommended Placement
This component was designed to be used when the date and time filter is part of a form.
