Docs
Changed on:
6 May 2024
This document describes the Date Range Field Component properties and sample usage. The component allows users to select a date and time range in the relevant form.
| Plugin Name | Core |
|---|
The standard library of mystique components.
Initial changelog entry.
fc.field.daterange , daterange
The layout displays two calendar components and navigation icons.
It also contains 2 text fields below each calendar component:
The date field format depends on the preferred browser language. The default format is
`dd/mm/yyyy`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:
The possibility of selecting a date in the future is set by the property
`disableFuture`The time field has the following format
`hh:mm:ss`The following validations are applied:
The default time is applied for:
`from``to`The date and time range filter component contains
`<``>``<``>`The buttons block contains the following buttons:
The button is always visible but is enabled only when data is selected or entered. By clicking on the Clear button, all changes are reset.
The button is always visible and enabled. By clicking on the Cancel button, all entered values are cleared, and the component is closed.
The button is always visible and enabled. By clicking on the Apply button, the component is closed, and the entered date and time (if selected or entered) are specified and displayed in the input form.
Name | Type | Required | Default | Description |
value | | no | none | Property sets initial dates. On date selection, the component returns the value in the ISO string format: Using the component in the workflow, the |
disableFuture* | | yes | false | Property sets the possibility of filtering data in the future. When the property is set to |
isError* | | no | false | Marks input as invalid with the red border. |
helperText* | | no | none | Helper text under the input field. |
minDate* | | no | none | Sets the minimum date available for selection in the calendar. |
maxDate* | | no | none | Sets the maximum date available for selection in the calendar. |
Properties marked * can be configured in a custom component only.
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;Language: java
Name: Workflow contract supported properties
Description:
Workflow contract supported properties
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": "daterange",
17 "label": "Dates",
18 "type": "daterange",
19 "source": "",
20 "defaultValue": {
21 "to": "",
22 "from": ""
23 },
24 "mandatory": false
25 }
26 ]
27 }
28 ]
29} Language: json
Initial changelog entry.
The Date Range component is moved to the Mystique core. This enables its seamless integration into various Fluent applications. The
`disableFuture`This component was designed to be used when the date and time range filter is part of a form.
Copyright © 2024 Fluent Retail Pty Ltd (trading as Fluent Commerce). All rights reserved. No materials on this docs.fluentcommerce.com site may be used in any way and/or for any purpose without prior written authorisation from Fluent Commerce. Current customers and partners shall use these materials strictly in accordance with the terms and conditions of their written agreements with Fluent Commerce or its affiliates.
