behavior: calendar

behavior: calendar

Calendar element behavior. Element is rendered as a month view.

Example, calendar input element:

<input type="calendar" name="calendar" value="2004-01-24" />

Calendar element is sensitive to current user' locale settings, e.g. it will use localized names of months and week days.

Elements

that have this behavior applied by default (see master style sheet):

<input type=“calendar” />
<widget type=“calendar”></widget>

Attributes

this behavior knows about:

value=“YYYY-MM-DD” - initial value of the input element - string. Format of the date in this string is fixed: year - four digits, '-', month - two digits, '-', day - two digits.

Events

Together with the standard set of events (mouse, keyboard, focus) behavior: calendar generates:

SELECT_SELECTION_CHANGED event - value of the element was changed due to user actions. Posted (asynchronous) event.

Value

type json::value::V_STRING, reflects current selected date (table cell of the calendar).

Special key combinations

LEFT - previous day;
RIGHT - next day;
UP - same day, previous week;
DOWN - same day, next week;
PAGE-UP - same date, previous month;
PAGE-DOWN - same date, next month;
SHIFT + PAGE-UP - same date, previous year;
SHIFT + PAGE-DOWN - same date, next year;
HOME - first day of current month;
END - last day of current month;

You can override styles of components of the calendar, see master style sheet for the names of parts. For example, to define different style of today's cell you may use following CSS declaration:

input[type="calendar"] td.day.today { background-color:yellow; }