Joomla calendar Form Field Type

The calendar form field type provides a text box for entry of a date. An icon next to the text box provides a link to a pop-up calendar, which can also be used to enter the date value. If the field has a saved value this is shown in the text box. Otherwise the default value, if any, is displayed.

XML Field Definition

<field 
 name="mycalendar" 
 type="calendar" 
 default="2021-09-15" 
 label="Select Date" 
 required="true" 
 filter="user_utc"
 showtime="false" 
 todaybutton="false" 
 filltable="false" 
 translateformat="true" />

Mandatory Parameters

  1. type: must be calendar.
  2. name: the unique name of the field.
  3. label: (translatable) is the descriptive title of the field.

Optional Parameters

  1. default is the default date. You can put "NOW" to have current date or time.
  2. description (translatable) is the help text.
  3. readonly is whether the text box is read-only (true or false). If the text box is read-only, the date cannot be changed, but can be selected and copied. No calendar icon is shown.
  4. disabled is whether the text box is disabled (true or false). If the text box is disabled, the date cannot be changed, selected or copied.
  5. class is a CSS class name for the HTML form field.
  6. format is the PHP date format to be used. If no format argument is given, '%Y-%m-%d' is assumed.
  7. filter is time zone to be used. There are two values: server_utc and user_utc.
  8. translateformat: If set to true, the calendar will use a language string to determine the format. The "format" attribute is ignored.
  9. showtime: If set to true and translateformat is true, the language key DATE_FORMAT_CALENDAR_DATETIME is used, otherwise DATE_FORMAT_CALENDAR_DATE.
  10. timeformat: can be set to 12 (and specify AM or PM) or 24.
  11. singleheader: if set to false, the year and the month selection will be set on two separates lines, with independent selection.
  12. todaybutton: if set to true, a button is added at the bottom to select the date of the current day.
  13. weeknumbers: if set to true, a column is added at the left to display the number of the week in the current year.
  14. filltable: if set to true, dates of the previous and next month are added at the top and the bottom of the current month to fill the grid.
  15. minyear: set a signed integer for a number of years (-10, -2, 0, 7, 12) to define the relative lower limit for the year selection.
  16. maxyear: set a signed integer for a number of years (-10, -2, 0, 7, 12) to define the relative upper limit for the year selection.

Format

The format attribute specifies the format that the date string will be saved in.  It is also the format that manually entered dates need to be entered in.

  • d: Day of the month, 2 digits with leading zeros - 01 to 31
  • a: A textual representation of a day, three letters - Mon through Sun
  • e: Day of the month without leading zeros - 1 to 31
  • A: A full textual representation of the day of the week - Monday through Sunday
  • w: Numeric representation of the day of the week - 0 (for Sunday) through 6 (for Saturday)
  • j: The day of the year (starting from 0) - 001 through 366
  • B: A full textual representation of a month - January through December
  • m: Numeric representation of a month, with leading zeros - 01 through 12
  • b: A short textual representation of a month, three letters - Jan through Dec
  • Y: A full numeric representation of a year, 4 digits - 1999 or 2003
  • y: A two-digit representation of a year - 99 or 03
  • P: Lowercase Ante Meridiem or Post Meridiem - am or pm
  • p: Uppercase Ante Meridiem or Post Meridiem - AM or PM

Examples

1. Modified Date (com_content)

<field
 name="modified"
 type="calendar"
 label="JGLOBAL_FIELD_MODIFIED_LABEL"
 class="form-control"
 translateformat="true"
 showtime="true"
 readonly="true"
 filter="user_utc" />