Date

This is a date and date time picker component.

Use it to select dates, with or without times. Allow dates and times to be added or edited in a human readable way with configurable formats, including picking dates and times from a calendar.

Examples

Basic

Loading...

Format and Time

Loading...

Properties

note

This component uses a Data Source.

General

Attribute	Type	Description	Category
Model Id	String	This is a unique id for the component.	Every field on a form model needs a unique ID, which is automatically generated but can be changed if needed (e.g. to reference in expressions or for debugging purposes). If the field type supports rendering a label, and most types do, it can be configured here. This label is a displayed on the form to the end user and typically indicates what value is expected in the field. The documentation property holds free-form text that can be used to give more details about this date field, like its purpose, usage in other models, etc.
Label	Text	The label attribute adds a label to the component.
Label position	Selection: Left Top	The position of the label, you can choose between left or top.
Label tooltip	Text	When it is defined, a question mark icon will appear in the component label. When the user hovers over it it will show this text in a tooltip.
Documentation	Multiline Text	A free-form text to explain the use cases for this form field.
Value	Text	The binding for the form field. Use an appropriate expression to bind the component to its value and specify where the value is written/read. For example, use '{{myVariableName}}' to store the value of the field in a variable named 'myVariableName'. Use prefixes to define the scope of the value, for example, 'root.' for referencing the root case/process to store the value in. Please refer to the section 'Frontend expressions' in the Flowable guide for more information.	The purpose of a form is to either display some value or to have users provide values for the various fields of a form. In both situations, this value needs to be bound to an identifier using the {{myValue}} notation, and the value provided by the user will be stored in a variable with that identifier. If there already was a value bound to the identifier before, for example because another form had a field bound to the same identifier, it will be displayed.
Default value	Date	If the value is not set, the default value will be used.
Placeholder	Text	A text that appears in the input box when it has no value.
Tab Index	Integer	Determine their relative ordering for sequential focus navigation. Tab index will be ignored if the component is inside a subform.

Validation

Validation

Attribute	Type	Description	Category
Required	Boolean	The required flag specifies if entering a value for the component is mandatory.	Providing proper data in form fields is important, especially when in process, case, decision or any other models the values provided in the form fields are used in subsequent steps. To make sure that the data is correct, validation is crucial. For this reason, a form can only be submitted when all fields are valid and thus all validation properties configured on the left apply. Check the tooltips on the properties for more information.
Minimum date	Date	Specify the earliest date for minimum date validation. You can choose between an absolute date, a relative date in relation to the current date or even an expression.
Maximum date	Date	Specify the latest date for maximum date validation. You can choose between an absolute date, a relative date in relation to the current date or even an expression.
Validation Panel Display	Selection: Show Only message Hide	Display at validation panel and validation tooltip.
Custom validations	List	List of additional validations to apply.	The date field can have custom validation rules beyond the standard set of validations. Such a rule is written as a frontend expression in the form of {{myExpression}}. If this expression evaluates to false, the submission of the form won't be possible.

Validation messages

Attribute	Type	Description	Category
Minimum date	Text	Specify the error message shown if the currently selected date is before the minimum date specified.	If there any validation rules configured for this date field, an error message will be displayed to the user when the field is deemed invalid. This error message can be customized. Make sure to choose the matching error message property for the particular validation rule property you want to customize the message for.
Maximum date	Text	Specify the error message shown if the currently selected date is after the maximum date specified.

Rendering

Attribute	Type	Description	Category
Description	Text	The description attribute adds a description to the component.	Some field types have an extra line of text displayed to give the user more details about the field.
Ignored	Boolean	If true the component will be hidden and the value will not be part of any payload.	Fields can also be shown or hidden based on the visible condition. This can be a frontend expression in the form of {{myExpression}} which can reference other form field values by their IDs. Fields can also be enabled or disabled, and similarly this can be made dynamic based on a frontend expression. Some field types can be ignored (the property is shown here if that's the case), which means that its value won't be taken into account.
Visible	Boolean	Boolean value or expression specifies whether the component is visible or hidden. This expression might include another value in the same form, for instance use a checkbox bound to {{showAdditionalFields}} and use the very same expression as the visible attribute to show or hide the component according the checked state of the checkbox. If you want to only show the component, if the form is not used as the init-form, you can use the expression '{{root.id}}' which evaluates to true only, if there is a current case id which is not the case in an initialization form.
Enabled	Boolean	Boolean value or expression specifies whether component is enabled or disabled.
Style class	Text	Stylesheet class name. Add any style classes to be applied to the component for the desired styling and rendering.	The date field can get customized CSS classes to customize the default styling. Note that the CSS files needed for the customizations must be available on the runtime system.
Enable time	Boolean	Allow selection of hour and minutes.	Customize how the date field is displayed to the user: whether or not time is shown and which day of the week is the start day of the week.
Store without time	Boolean	Store the date in the payload without any time and timezone information
Time interval	Selection: 1 5 10 20 30	Interval used in time list when 'Enable time' is activated.
Format	Text	The optional format for the date e.g.: 'DD.MM.YYYY' -> '10.01.2014' 'MMMM DD, YYYY' -> 'January 10, 2014' 'dddd DD MMM, YYYY' -> 'Friday 10 Jan, 2014' (based on momentJs).
Time Format	Text	The optional format of the time selection, which will be used within the date picker. For the displayed time itself, the format needs to be included into the field 'format' as well. The default value is 'HH:mm'.
Calendar start day	Selection: Monday Tuesday Wednesday Thursday Friday Saturday Sunday	By default, calendar starts on Monday, you can change it specifying week-day number. This number can be between 0-6, while 0 is Sunday and 6 is Saturday.
Disable weekends	Boolean	Disable weekend days selection.

Advanced

Attribute	Type	Description	Category
Events	List		The date field emits low-level events on which can be reacted with a frontend expression to implement various use cases that are not possible with regular modeling. If the expression produces a value, it can be stored in a new variable using the Result variable property.

List Attribute Details

Custom validations

Attribute	Type	Description
Expression	Text	Validation passes when this expression is true.
Error message	Text	Message to display when the validation fails.

Events

Attribute	Type	Description
Event label	Text	This is a unique id for the component.
Event type	Selection: On value change	The type of event emitted by the form field.
Expression	Text	Validation passes when this expression is true.
Result variable	Text	Capture the result of the expression in a result variable.

Formats

This component uses date values in different formats:

• today current date
• PNumPeriod relative date, where P is fixed, Num is any number and Period is a letter correspondig to Day, Month or Year. For example:
  • P-12D means subtract 12 days from the current date
  • P2M means add 2 month to the current date
  • P15Y means add 15 years to the current date
• 2018-03-21 exact date

In order to format values this component uses Moment.js string format. For example: YYYY-MM-DD, D/M/YY or dddd at HH:mm

For using date formatting inside expressions, see section Expressions.