Date Widget

Definition

There are two Widgets allowing to configure the display /edit dates (date, date & time) attribute.

Date Edit	Date Display

Configuration

Properties

Properties name	Type	Mandatory	Description	Values (default value in bold)
required	`Boolean`	NO	Defines if the attribute is mandatory or not.	true, false
dateFormat	`Enum`	NO	The date format to be used when displaying.	HOURS_MINUTES, HOURS_MINUTES_SECONDS, DAY_MONTH_YEAR_SHORT, DAY_MONTH_YEAR_LONG, DAY_MONTH_YEAR_HOURS_MINUTES_LONG,DAY_MONTH_YEAR_HOURS_MINUTES_FULL
offset	`Period`	NO	A valid ISO 8601 period duration (ex "P1D") to shift the date selection on the frontend. For the edit widget, it applies only for DATETIME attribute when the property "dateOnly" is true, and shifts the date forward. For the display widget, it applies if configured, and shifts the date backward when displayed in the frontend. The rationale of this offset is better explained with an example: For the attribute "enabledUntil", if dateOnly is true, a datetime at AM midnight is selected. One might want to indicate that the selected day must also be included as the end of the enabled period and want to shift the datetime by one day. This is done by setting the offset at "P1D". For coherence, the associated display widget should also have the same offset. Note that if the edit widget is meant to pick a datetime as "dateOnly" with an offset, one should configure the "dateFormat" of the display widget to display as a date (such as DAY_MONTH_YEAR_LONG) as well, thus without hours; otherwise the display will be confusing if shown in another timezone than UTC.	A valid PeriodDuration, null
timeZoneStrategy	`Enum`	NO	SETTING: the timezone used on the frontend for picking/displaying a datetime is defined by the setting ui.usr.timeZone. BROWSER: the timezone used by the frontend for picking/displaying a datetime is defined by the user's browser local timezone.	SETTING, BROWSER
showTooltip	`Boolean`	NO	Allows to display or not (when hovering over a date attribute) a date time	true, false
backgroundColor	`String`	NO	Defines the background color.	#ffffff, standard CSS color value
bold	`Boolean`	NO	Defines if the value is displayed in bold or not.	true, false
fontSize	`String`	NO	Defines the displayed size.	INHERIT, XX_SMALL, X_SMALL, SMALL, MEDIUM, LARGE, X_LARGE, XX_LARGE
italic	`Boolean`	NO	Defines if the value is displayed in italic or not.	true, false
textAlign	`String`	NO	Defines the text alignment.	LEFT, CENTER, RIGHT
textColor	`String`	NO	Defines the displayed text color.	#000000, standard CSS color value
underline	`Boolean`	NO	Defines if the value is underlined or not.	true, false

Example

Date Edit

Date Display

XML

<widget id="createdat" xsi:type="ctdbum:AttributeEditorWidgetType">
	<hidden>false</hidden>
    <config>
    	<editor>
        	<editWidget xsi:type="ctdbum:DateEditWidgetType">
            	<hidden>false</hidden>
                <config>
                    <required>false</required>
                    <dateFormat>DAY_MONTH_YEAR_LONG</dateFormat>
					<dateOnly>false</dateOnly>
					<timeZoneStrategy>BROWSER</timeZoneStrategy>
				</config>
			</editWidget>
		</editor>
        <label></label>
        <lockedInUi>false</lockedInUi>
        <mode>READ_WRITE</mode>
        <multiValued>false</multiValued>
        <override>true</override>
	</config>
    <attributeId>createdat</attributeId>
</widget>

XML

<widget id="createdat" xsi:type="ctdbum:AttributeEditorWidgetType">
	<hidden>false</hidden>
    <config>
    	<editor>
        	<displayWidget xsi:type="ctdbum:DateDisplayWidgetType">
            	<hidden>false</hidden>
                <config>
                	<backgroundColor>#ffffff</backgroundColor>
                    <bold>false</bold>
                    <fontSize>INHERIT</fontSize>
                    <italic>false</italic>
                    <textAlign>LEFT</textAlign>
                    <textColor>#000000</textColor>
                    <underline>false</underline>
                    <dateFormat>DAY_MONTH_YEAR_LONG</dateFormat>
					<timeZoneStrategy>BROWSER</timeZoneStrategy>
				</config>
			</displayWidget>
		</editor>
        <label></label>
        <lockedInUi>false</lockedInUi>
        <mode>READ_WRITE</mode>
        <multiValued>false</multiValued>
        <override>true</override>
	</config>
    <attributeId>createdat</attributeId>
</widget>

Configuration

Properties

Example

Read Next