jQuery UI datepicker
The date formatting in flexcal
lets you do simple formatting and parsing, with numbers only. Including jquery.flexcal.format.js
allows much more sophisticated formatting, and formatting the calendar itself. It replaces $.bililite.flexcal.format
and $.bililite.flexcal.parse
, which are used by the flexcal
plugin itself.
In the format string, any word in braces (/{(\w+)}/
) is replaced by the localized version (with $.bililite.flexcal.localize
), then any text in single quotes is frozen from further replacement. Use two single quotes (''
) for an actual single quote.
Then the following date-specific replacements are made:
d
: Date numberdd
: Date number, padded to two digitsdddd
: Date number, formatted (using the dates
function)D
: Day name, minimized ('S', 'M', etc.)DD
: Day name, short ('Sun', 'Mon',etc.)DDDD
: Day name, full, ('Sunday', 'Monday',etc.)m
: Month number (1-indexed. Note that internally (as with Date
) months are 0-based)mm
: Month number, padded to two digitsM
: Month name, short ('Jan', 'Feb', etc.)MM
: Month name, full ('January', 'February', etc.)yy
: Year number. There is no option for a two-digit year.yyyy
: Year number, padded to four digits (which really shouldn't be relevant)YYYY
: Year number, formatted (using the years
function)Note the order of the replacement, and how the quoting works. Using d = new Date (2015, 3, 27) // April 27, 2015
and loc = $.bililite.flexcal.toL10n() // default localization
, we have $.bililite.flexcal.format(d, "'{today}'", loc) === 'Today' // localize the text in braces but don't replace the date formatting codes since it is in single quotes
. But $.bililite.flexcal.format(d, "{today}", loc) // no single quotes
is 'To27ay'
, since the 'd'
is interpreted as a date number.
dateFormat: 'DDDD, d MM yyyy'
Using formatted years (a years
function that shows Roman numerals).
dateFormat: 'd MM YYYY'
Varied languages
jquery.flexcal.format.js
also extends the presentation of the calendar itself to allow customizing the title, date numbers and next/prev buttons. Five more fields are added to the localization object:
captionText
Formatting string to use for formatting the caption (the month/year title bar) of the calendar. In order to use drop-down menus, the month has to be in a span with class=ui-datepicker-month
and the year has to be in a span with class=ui-datepicker-year
.
"'<span class=ui-datepicker-month>'MM'</span>' '<span class=ui-datepicker-year>'YYYY'</span>'"
Note the use of single quotes to prevent parsing the embedded HTML.
captionText: 'mm/yyyy'
dateText
Formatting string to use for the dates (the individual cells of the table that makes up the calendar).
"dddd"
dateText: "'<span style=transform:rotate(180deg)>'dd'</span>'"
. OK, that's silly.
dayOfWeekText
Formatting string to use for the days of the week (the header of the calendar columns).
"D"
dayOfWeekText: "DDDD"
nextButtonText
, prevButtonText
Formatting strings to use for the Next and Previous month buttons. The unextended flexcal
just uses nextText
and prevText
, but this allows customizing (such as putting in the name of the month. See the example.
"'{next}'"
and "'{prev}'"
nextButtonText: "MM", prevButtonText: "MM"
. The CSS replaces the text with the icons, but uses that text for the title. Hover over the next/prev icons to see the month names.