Extension:Page Forms/Input types/Datepicker

From mediawiki.org
Jump to navigation Jump to search
Other languages:
English • ‎Türkçe • ‎français • ‎العربية • ‎日本語 • ‎한국어
A datepicker input with calendar opened

The input type datepicker lets a user pop up a graphical calendar and choose a date from it. The calendar is generated entirely via script and can be navigated without any page refreshes. It always returns dates in the format yyyy/mm/dd, so they can directly be used as property values. You can tweak the appearance of the calendar by changing or overriding the CSS rules of the jQuery library.

The datepicker is somewhat peculiar in that the first day of the week is not set in a configuration variable, but in an internationalized message. This way most wikis should automatically get the right setting depending on the language. If you want to change the default first day of week, instead of changing a configuration variable you need to edit the page MediaWiki:pf-datepicker-firstdayofweek in your wiki.


A field that uses a date picker with all parameters set to their default values:

{{{field|foo|input type=datepicker}}}

A field that uses a date picker with specific parameters:

{{{field|foo|input type=datepicker
|week start=1
|highlight days of week=0
|disable days of week=6,0
|disable dates=2016/05/01,2016/12/25-2017/01/06
|date format=dd.mm.yy}}}


Parameter Meaning/Remark
size Specifies the width of the text entry.
maxlength Specifies the maximum allowed length of the text entry.
default Format: yyyy/mm/dd
values The days must be given as comma-separated list of dates or date ranges. The format for days is yyyy/mm/dd, for date ranges use yyyy/mm/dd-yyyy/mm/dd. Spaces are permissable.
values from category, values from namespace, values from concept, etc. See parameter values
date format The date format string. It is only used for the input field. The date sent back with the form is always of format yyyy/mm/dd, so it can easily be used as value for a property of type Date.

There are two predefined standard date formats available:

  • SHORT - short date format localized to the wiki user language
  • LONG - long date format localized to the wiki user language

To build your own format use the following keys:

  • d - day of month (no leading zero)
  • dd - day of month (two digit)
  • o - day of the year (no leading zeros)
  • oo - day of the year (three digit)
  • D - day name short
  • DD - day name long
  • m - month of year (no leading zero)
  • mm - month of year (two digit)
  • M - month name short
  • MM - month name long
  • y - year (two digit)
  • yy - year (four digit)
  • @ - Unix timestamp (ms since 01/01/1970)
  • ! - Windows ticks (100ns since 01/01/0001)
  • '...' - literal text
  • '' - single quote
  • anything else - literal text
week start The first day of the week (0 - Sunday, 1 - Monday, ...)
first date the first date that can be chosen (in yyyy/mm/dd format)
last date the last date that can be chosen (in yyyy/mm/dd format)
disable days of week List of days that cannot be selected (e.g. weekend: 6, 0)
highlight days of week List of days that shall appear highlighted (e.g. weekend: 6, 0)
disable dates comma-separated list of disabled dates/date ranges (dates in yyyy/mm/dd format, ranges in yyyy/mm/dd-yyyy/mm/dd format)
highlight dates comma-separated list of dates/date ranges that shall appear highlighted (dates in yyyy/mm/dd format, ranges in yyyy/mm/dd-yyyy/mm/dd format)


You can change the general appearance and behavior of all the site's datepickers by placing settings in your LocalSettings.php file below the inclusion of Page Forms, e.g.

$wgPageFormsDatePickerSettings['DateFormat'] = 'LONG';

You can find the default settings and their descriptions in the file .../extensions/PageForms/includes/PF_DatePickerSettings.php.

MediaWiki bug[edit]

When using the datepicker input with MediaWiki 1.26, you may get an error message that looks like the following:

Warning: OutputPage::getModuleStyles: style module should define its position explicitly: jquery.ui.datepicker ResourceLoaderFileModule

This is due to an apparent bug in core MediaWiki, which is thankfully easily fixed. In the file /resources/Resources.php, add the following line:

@@ -424,6 +424,7 @@ return array(
                'group' => 'jquery.ui',
        'jquery.ui.datepicker' => array(
+               'position' => 'top',
                'scripts' => 'resources/lib/jquery.ui/jquery.ui.datepicker.js',
                'dependencies' => 'jquery.ui.core',
                'skinStyles' => array(