Versions Compared

Old Version 1

changes.mady.by.user Ashraf Khamis

Saved on

compared with

New Version 2

changes.mady.by.user Ashraf Khamis

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

DateFieldDefinition renders a calendar that allows the user to select a date and optionally a time.

Info

Date field definition is part of the Magnolia 6 UI framework. The fully qualified class name is info.magnolia.ui.field.DateFieldDefinition.

If you work with the Magnolia 5 UI framework, see Date field for Magnolia 5 UI instead.

Table of Contents

Example date field definition

Code Block
languageyml
date:
  label: Date
  $type: dateField
  type: java.util.Date
  time: true

Date field properties

type

required

Set the type property to Date to ensure that the value is saved as a Calendar object and not a String. The addition of this property is essential.

dateFormat

optional, default is yyyy-MM-dd

Format in which the date is displayed to users. See SimpleDateFormat class for allowed patterns.

Examples:

Code Block
languagejs
dateFormat: yyyy-MM-dd           # 2017-10-31
dateFormat: yyyy-MMMM-dd         # 2017-October-31
dateFormat: EEE, MMM d, yyyy     # Tue, Oct 31, 2017

defaultValue

optional, default is now

Set the default value to a specific date such as "2017-10-31" or use the keyword now which defaults to the current date and time. Current time means time at the host server. Magnolia stores dates and times using server time. The stored time is converted and displayed to users in their preferred time zone.

The default value only applies to new content items, not to existing content items that have been created previously.

(warning) Enclose the default value in quotes when using YAML:

Code Block
languagejs
defaultValue: "2017-10-31"
defaultValue: "2017-10-31 15:09"

If you define the dateFormat or timeFormat properties then provide the defaultValue using those same formats:

Code Block
languagejs
dateFormat: MM/dd/yyyy
timeFormat: h:mm a
defaultValue: "10/31/2017 3:09 PM"

time

optional, default is false

Enables time selection. Renders dropdown boxes at the bottom of the calendar.

timeFormat

optional, default is HH:mm

Format in which time is displayed to users. See SimpleDateFormat class for allowed patterns.

Examples:

Code Block
languagejs
timeFormat: HH:mm     # 15:09
timeFormat: h:mm a    # 3:09 PM

See also Common field properties.