Date component icon Date

The Date component offers a convenient way to select a date and optionally a time.

Appearance

Design Rendered
Date component rendered
Date component design

Attributes

Group Name Description

General

ID

This is a unique id for the component.

Label

The label attribute adds a label to the component, if not empty.

Label position

The position of the label, you can choose between Left or Top.

Label tooltip

When it is defined, a question mark icon appears in the component label. When the user hovers over it, it shows this text in a tooltip.

Value

The binding for the component. Use an appropriate expression to bind the component to its value and thus specify where the value is saved read. For example, use {{myVariableName}} to store the value of the component in a variable named myVariableName. Use prefixes to define the scope of the value, e.g., root. for referencing the root case to store the value in or parent. to store the value in the parent work item of the current one. For instance {{root.foo}} stores the value in the root case using a variable named foo. For more information please refer to the Flowable Forms section.

Default value

If a value is not set, the default value is used. Use an appropriate value; e.g., a text, a number, an id or a comma-separated list.

Description

The description attribute additionally adds a description to the component.

Visible

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 to the checked state of the checkbox. If you want only to 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 id which is not the id in a start form.

Ignored

If true the component is hidden and the value is not part of the payload.

Enabled

A Boolean value or expression specifies whether component is enabled or disabled.

Placeholder

The text that appears in the widget when there is no value.

Details

Enable time

If true, allows the selection of hour and minute values.

Format

The optional format for the date e.g.:

'DD.MM.YYY' → '10.01.2014'

'MMMM DD, YYYY' → 'January 10, 2014'

'dddd DD MMM, YYYY' → 'Friday 10 Jan, 2014'

See http://momentjs.com for more details.

Validation

Required

The required flag specifies whether entering a value for the component is mandatory or not.

Minimum 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 an expression.

Maximum 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 an expression.

Error Messages

Minimum date

Specifies the error message displayed if the currently selected date is before the minimum date specified.

Maximum date

Specify the error message displayed if the currently selected date is after the maximum date specified.

Documentation

Documentation

Documentation intended to explain concepts of its use for future reference.

Customization

Style class

Stylesheet class name. Add any style classes to be applied to the component for the desired styling and rendering.