Data Form Date Field Formatting Demo
Edit this page to see 8 different examples of how you can set options to customize the datepicker with Data Form Date fields.
Each date field lists the options used to render the datepicker. View the source of the template page to see how the data form for this example was built.
Dates:
Date 1: (default) [[date %%form_data{date-1}%% format="%D"]]
Date 2: DD, d MM yy [[date %%form_data{date-2}%% format="%A, %e %B %Y"]]
Date 3: DD, d MM yy CE [[date %%form_data{date-3}%% format="%A, %e %B %Y"]]
Date 4: d-m-y [[date %%form_data{date-4}%% format="%e-%m-%y"]]
Date 5: mm/dd/yy [[date %%form_data{date-5}%% format="%m/%d/%Y"]]
Date 6: DD, d MM yy [[date %%form_data{date-6}%% format="%A, %e %B %Y"]]
Date 7: d MM yy [[date %%form_data{date-7}%% format="%e %B %Y"]]
Date 8: (see altField Results below)
Date 9: (system default) [[date %%form_data{date-9}%% format="%c"]]
altField Results
Date-8 form_data: %%form_data{date-8}%%
alt-date form_data: %%form_data{alt-date}%%
Date-10 form_data: %%form_data{date-10}%%
alt-date-hidden form_data: %%form_data{alt-date-hidden}%%
| Datepicker Date Format Options | Wikidot Date Format Options | ||
| The format can be combinations of the following: | Use to display Data Form Datepicker date fields: [[date %%form_data{datefield}%% format="%b %d, %Y"]] |
||
| d | day of month (no leading zero) | %a | abbreviated weekday name (3 letters) |
| dd | day of month (two digit) | %A | full weekday name |
| o | day of the year (no leading zeros) | %b | abbreviated month name (3 letters) |
| oo | day of the year (three digit) | %B | full month name |
| D | day name short | %c | local date representation |
| DD | day name long | %d | day of the month (01…31) |
| m | month of year (no leading zero) | %D | is equivalent to "%m/%d/%y" |
| mm | month of year (two digit) | %e | day of the month (1…9, 10…31) |
| M | month name short | %H | hours (00…23) |
| MM | month name long | %I | hours (00…12) |
| y | year (two digit) | %m | month (01…12) |
| yy | year (four digit) | %M | minutes (00…59) |
| @ | Unix timestamp (ms since 01/01/1970) | %O | nn seconds/minutes/hours/days |
| ! | Windows ticks (100ns since 01/01/0001) | %p | AM/PM |
| '…' | literal text | %r | is equivalent to "%I:%M:%S %p" |
| '' | single quote | %R | is equivalent to "%H:%M" |
| anything else | literal text | ||
| %S | seconds (00…59) | ||
| %T | is equivalent to "%H:%M:%S" | ||
| %y | year (00…99) | ||
| %Y | year (1970…2999) | ||
| %z %Z |
time zone | ||
====
[[form]]
fields:
date-1:
label: 'Date 1'
width: '24'
type: date
header-1:
type: static
label: 'Options used'
value: |
**none** - All default values applied
Renders a basic calendar with prev/next navigation
----
date-2:
label: 'Date 2'
width: '24'
type: date
options:
changeMonth: true
changeYear: true
dateFormat: 'DD, d MM yy'
header-2:
type: static
label: 'Options used'
value: |
**changeMonth**: true
**changeYear**: true
**dateFormat**: 'DD, MM yy'
Adds month and year dropdown selection lists
Appplies date formatting
----
date-3:
label: 'Date 3'
width: '24'
type: date
options:
appendText: ' This Demo is Cool!'
autoSize: true
changeYear: true
dateFormat: 'DD, d MM yy CE'
firstDay: 1
showOn: button
yearRange: '2014:2025'
yearSuffix: ' CE'
header-3:
type: static
label: 'Options used'
value: |
**appendText**: ' This Demo is Cool!'
**autoSize**: true
**changeYear**: true
**dateFormat**: 'DD, d MM yy CE'
**firstDay**: 1
**showOn**: button
**yearRange**: '2014:2025'
**yearSuffix**: ' CE'
Add custom text, auto size input field based on date format, dropdown selection for the year, enable button to launch picker, set first day of the week to Monday, limit year range and add year suffix
----
date-4:
label: 'Date 4'
width: '24'
type: date
options:
appendText: ' Auto-sized input field!'
autoSize: true
buttonImage: 'http://community.wikidot.com/local--files/files/calendar-icon.png'
buttonImageOnly: false
buttonText: 'Show Picker!'
changeYear: true
dateFormat: 'd-m-y'
firstDay: 1
maxDate: '+1d -1m +2y'
minDate: 0
numberOfMonths: 3
showButtonPanel: true
showCurrentAtPos: 1
showOn: button
header-4:
type: static
label: 'Options used'
value: |
**appendText**: ' Auto-sized input field!'
**autoSize**: true
**buttonImage**: 'http://community.wikidot.com/local--files/files/calendar-icon.png'
**buttonImageOnly**: false
**buttonText**: 'Show Picker!'
**changeYear**: true
**dateFormat**: 'd-m-y'
**firstDay**: 1
**maxDate**: '+1d -1m +2y'
**minDate**: 0
**numberOfMonths**: 3
**showButtonPanel**: true
**showCurrentAtPos**: 1
**showOn**: button
This picker adds an image to the button, uses a short date format, adds a button panel with 'today' and 'Done' buttons, limits the range of dates that can be selected and displays 3 months at a tiome.
----
date-5:
label: 'Date 5'
width: '24'
type: date
options:
autoSize: true
buttonImage: 'http://community.wikidot.com/local--files/files/calendar-icon.png'
buttonImageOnly: false
buttonText: 'Show Picker!'
closeText: 'Abort Mission'
currentText: 'Go to Today'
dateFormat: 'mm/dd/yy'
numberOfMonths: 4
showButtonPanel: true
showCurrentAtPos: 2
showOn: button
header-5:
type: static
label: 'Options used'
value: |
**autoSize**: true
**buttonImage**: 'http://community.wikidot.com/local--files/files/calendar-icon.png'
**buttonImageOnly**: false
**buttonText**: 'Show Picker!'
**closeText**: 'Abort Mission'
**currentText**: 'Go to Today'
**dateFormat**: 'mm/dd/yy'
**numberOfMonths**: 4
**showButtonPanel**: true
**showCurrentAtPos**: 2
**showOn**: button
This picker adds custom text to panel buttons, uses a long (US) date format and displays 4 months at a tiome.
----
date-6:
label: 'Date 6'
width: '24'
type: date
options:
appendText: ' Localize for other languages!'
autoSize: true
buttonImage: 'http://community.wikidot.com/local--files/files/calendar-icon.png'
buttonImageOnly: false
dateFormat: 'DD, d MM yy'
dayNames: [Sonntag, Montag, Dienstag, Mittwoch, Donnerstag, Freitag, Samstag]
dayNamesMin: [So, Mo, Di, Mi, Do, Fr, Sa]
dayNamesShort: [Son, Mon, Die, Mit, Don, Fre, Sam]
monthNames: [Januar, Februar, März, April, Mai, Juni, Juli, August, September, Oktober, November, Dezember]
monthNamesShort: [Jan, Feb, Mär, Apr, May, Jun, Jul, Aug, Sep, Okt, Nov, Dez]
numberOfMonths: [ 2, 3 ]
showOn: button
stepMonths: 3
header-6:
type: static
label: 'Options used'
value: |
**appendText**: ' Localize for other languages!'
**autoSize**: true
**buttonImage**: 'http://community.wikidot.com/local--files/files/calendar-icon.png'
**buttonImageOnly**: false
**buttonText**: 'Pick!'
**dateFormat**: 'DD, d MM yy'
**dayNames**: [Sonntag, Montag, Dienstag, Mittwoch, Donnerstag, Freitag, Samstag]
**dayNamesMin**: [So, Mo, Di, Mi, Do, Fr, Sa]
**dayNamesShort**: [Son, Mon, Die, Mit, Don, Fre, Sam]
**monthNames**: [Januar, Februar, März, April, Mai, Juni, Juli, August, September, Oktober, November, Dezember]
**monthNamesShort**: [Jan, Feb, Mär, Apr, May, Jun, Jul, Aug, Sep, Okt, Nov, Dez]
**numberOfMonths**: [ 2, 3 ]
**showOn**: button
**stepMonths**: 3
Display 6 months at once by using an array of 2 rows and 3 columns, customize day and month names and set number of months to step with prev/next
----
date-7:
label: 'Date 7'
width: '24'
type: date
options:
appendText: ' Animate the calendar!'
autoSize: true
buttonImage: 'http://community.wikidot.com/local--files/files/calendar-icon.png'
buttonImageOnly: false
buttonText: 'Pick!'
closeText: 'Abort Mission'
currentText: 'Go to Today'
dateFormat: 'd MM yy'
duration: slow
nextText: 'Forward'
numberOfMonths: [ 2, 3 ]
prevText: 'Back'
showAnim: fadeIn
showButtonPanel: true
showCurrentAtPos: 1
showOn: both
showWeek: true
stepMonths: 3
weekHeader: 'wk#'
header-7:
type: static
label: 'Options used'
value: |
**appendText**: ' Animate the calendar!'
**autoSize**: true
**buttonImage**: 'http://community.wikidot.com/local--files/files/calendar-icon.png'
**buttonImageOnly**: false
**buttonText**: 'Pick!'
**closeText**: 'Abort Mission'
**currentText**: 'Go to Today'
**dateFormat**: 'd MM yy'
**duration**: slow
**nextText**: 'Forward'
**numberOfMonths**: [ 2, 3 ]
**prevText**: 'Back'
**showAnim**: fadeIn
**showButtonPanel**: true
**showCurrentAtPos**: 1
**showOn**: both
**showWeek**: true
**stepMonths**: 3
**weekHeader**: 'wk#'
Calendar appears slowly with slide down effect. You can also use milliseconds (as in the next example) to have exact control over the animation speed.
----
date-8:
type: date
label: 'This date will fill in the altDate field below'
options:
appendText: ' altField Demo'
autoSize: true
changeYear: true
dateFormat: 'DD, d MM yy'
altField: 'input[name=field-alt-date]'
altFormat: 'm/d/yy'
yearRange: '2014:2025'
header-8:
type: static
label: 'Description'
value: |
* Dates in a date field are stored as a date number and displayed based on the //dateFormat// option you specifiy.
* If you want to save and use the date as //text// and not a number, you can use the //altField// option to place a text version of the date into another field in your data form.
alt-date:
type: text
label: 'altDate - Filled in by date above'
width: 10
date-9:
label: 'Date 9'
width: '24'
type: date
options:
appendText: ' The Kitchen Sink!'
autoSize: true
buttonImage: 'http://community.wikidot.com/local--files/files/calendar-icon.png'
buttonImageOnly: false
buttonText: 'Pick!'
changeMonth: true
changeYear: true
closeText: 'Abort Mission'
currentText: 'Go to Today'
dayNames: [Sonntag, Montag, Dienstag, Mittwoch, Donnerstag, Freitag, Samstag]
dayNamesMin: [So, Mo, Di, Mi, Do, Fr, Sa]
dayNamesShort: [Son, Mon, Die, Mit, Don, Fre, Sam]
defaultDate: '+1m -1d'
duration: 5000
firstDay: 1
hideIfNoPrevNext: true
isRTL: false
maxDate: '-1m +2y'
minDate: 0
monthNames: [Januar, Februar, März, April, Mai, Juni, Juli, August, September, Oktober, November, Dezember]
monthNamesShort: [Jan, Feb, Mär, Apr, May, Jun, Jul, Aug, Sep, Okt, Nov, Dez]
nextText: 'Forward'
numberOfMonths: [ 2, 3 ]
prevText: 'Back'
shortYearCutoff: '+10'
showAnim: slideDown
showButtonPanel: true
showCurrentAtPos: 0
showMonthAfterYear: true
showOn: both
showWeek: true
stepMonths: 3
weekHeader: 'wk#'
yearRange: '2010:2020'
yearSuffix: ' CE'
header-9:
type: static
label: 'Options used'
value: |
**appendText**: ' The Kitchen Sink!'
**autoSize**: true
**buttonImage**: 'http://community.wikidot.com/local--files/files/calendar-icon.png'
**buttonImageOnly**: false
**buttonText**: 'Pick!'
**changeMonth**: true
**changeYear**: true
**closeText**: 'Abort Mission'
**currentText**: 'Go to Today'
**dateFormat**: (omitted - default)
**dayNames**: [Sonntag, Montag, Dienstag, Mittwoch, Donnerstag, Freitag, Samstag]
**dayNamesMin**: [So, Mo, Di, Mi, Do, Fr, Sa]
**dayNamesShort**: [Son, Mon, Die, Mit, Don, Fre, Sam]
**defaultDate**: '+1m -1d'
**duration**: 6000
**firstDay**: 1
**hideIfNoPrevNext**: true
**isRT**L: false
**maxDate**: '-1m +2y'
**minDate**: 0
**monthNames**: [Januar, Februar, März, April, Mai, Juni, Juli, August, September, Oktober, November, Dezember]
**monthNamesShort**: [Jan, Feb, Mär, Apr, May, Jun, Jul, Aug, Sep, Okt, Nov, Dez]
**nextText**: 'Forward'
**numberOfMonths**: [ 2, 3 ]
**prevText**: 'Back'
**shortYearCutoff**: '+10'
**showAnim**: slideDown
**showButtonPanel**: true
**showCurrentAtPos**: 0
**showMonthAfterYear**: true
**showOn**: both
**showWeek**: true
**stepMonths**: 3
**weekHeader**: 'wk#'
**yearRange**: '2010:2020'
**yearSuffix**: ' CE'
Virtually every available option is used.
----
date-10:
type: date
label: 'This date will fill in a hidden altDate field'
options:
appendText: ' hidden altField Demo'
autoSize: true
changeYear: true
dateFormat: 'DD, d MM yy'
altField: 'input[name=field-alt-date-hidden]'
altFormat: 'yy'
yearRange: '2014:2025'
header-10:
type: static
label: 'Description'
value: |
* Dates in a date field are stored as a date number and displayed based on the //dateFormat// option you specifiy.
* If you want to save and use the date as //text// and not a number, you can use the //altField// option to place a text version of the date into another field in your data form.
alt-date-hidden:
type: text
label: 'alt-date-hidden'
width: 10
[[/form]]
page revision: 15, last edited: 10 May 2016 17:49
Powered by Wikidot.com
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License