Calendars

Calendars allow users to easily select a specific date and/or time through a graphical user interface.

• Calendar component
  • Date-only calendar component
• Calendar GMT time offset
• Calendar ranges
• Usage
  • Via javascript
  • Javascript methods

Calendar component

The example markup below creates a date calendar and pre-selects the current local date and time by default. A unique id is required so that each calendar component has its own methods and can be easily targeted for Javascript usage.

Code output

HTML Markup

Copy<div id="calendar-1" class="calendar"></div>

The calendar component accepts the following data-attributes upon its initialization:

• The optional data-value attribute sets the pre-selected date and time. If a data-value is not specified, the current local date and time is selected.
• The optional data-min-date attribute sets the minimum date and time allowed to be selected in the calendar
• The optional data-max-date attribute sets the maximum date and time allowed to be selected in the calendar

All the above data-attributes accept date and time values as strings, formatted as mmm dd yyyy HH:MM, where:

• mmm is the abbreviated month name (Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec)
• dd is the zero padded day of the month (eg 01, 10, 22)
• yyyy is the year (eg 1981, 2017, 2020)
• HH the hour of a 24-hour clock (eg 03, 14, 23)
• MM the minutes of the hour (eg 00, 36, 59)

The following markup renders a calendar with a pre-selected date of Aug 10 2016 12:40, constrained by a minimum and maximum date. The date and time are also exposed to an input.

Code output

HTML Markup

Copy<label>Calendar with date and time exposed on auto-generated input</label>
<div id="calendar-2" class="calendar" data-value="Aug 10 2016 12:40" data-min-date="Aug 01 2016 00:00" data-max-date="Aug 20 2016 00:00" ></div>

Date-only calendar component

A calendar that includes only date can be rendered by applying a data-date-only="true" attribute on the calendar component; by default current date is pre-selected.

Code output

HTML Markup

Copy<div id="calendar-date-only" class="calendar" data-date-only="true"></div>

Calendar GMT time offset

A calendar component, by default, is initialized using the local date and time, so that users manipulate data based on their system's local time zone. However, it is often necessary to manipulate data produced by systems in different time zones. For such cases the GMT time offset is introduced that allows users to examine events in the selected date and time but in a different time zone.

GMT time offsets are formatted as ±HH:MM where HH represents the hour of a 24-hour clock (eg 03, 14, 23) and MM represent the minutes of the hour (eg 00, 36, 59), while the ± shows whether the specified time is before or ahead of the Greenwich Mean Time (GMT).

To set a time offset on a calendar component, simply apply a data-offset attribute with its value, for example data-offset="+02:00".

It is also possible to bind a set of various time-offset values within a select element to a calendar component. In the example shown below, a calendar component using a data-offset-group attribute, targets a select element with the class calendar-offset that includes a set of time-offset options. Keep in mind, that more than one calendars can be bound to the same GMT time offset.

Changing the time offset does not change the auto-generated input date and time values located within the calendar component, but changes the exposed output value as shown in the bound input below.

A new attribute is introduced with the use of GMT time offset functionality to expose the date in human date format that includes day of week and time zone information:

• The optional data-offset-target="#target-id" attribute exposes the selected date and time in human date format, that includes day of week and local time zone information, to an input element.

Code output

HTML Markup

Copy<label>Time offset</label>
<select class="datetime-picker-offset" id="offset-group">
<...>
<option value="02:00">(GMT+02:00) Athens, Bucharest, Istanbul</option>
<...>
</select>

<label>Calendar with date and time exposed on auto-generated input</label>
<div id="calendar-offset-1" class="calendar" data-offset-group="offset-group" data-offset-target="calendar-offset-1-output"></div>

<label>Exposed date in human date format, including time zone information</label>
<input type="text" class="calendar-offset-1-output">

Calendar ranges

Two calendars can be linked so that they form a from-to date and/or time range. Each of the two range calendars must point to its respective complementary calendar id by using the appropriate data-from or data-to attribute.

The individual calendars within a range can be combined with the data-value, data-min-date and data-max-date attributes.

Code output

HTML Markup

Copy<label>Calendar range <i>from</i></label>
<div id="calendar-range-from-1" class="calendar" data-to="#calendar-range-to-1"></div>

<label>Calendar range <i>to</i></label>
<div id="calendar-range-to-1" class="calendar" data-from="#calendar-range-from-1"></div>

Usage

Calendars produce all the necessary interface elements simply by replicating the one-line markup.

HTML Markup

Copy<div id="calendar-1" class="calendar"></div>

Via Javascript

Calendars can be called using Javascript using their unique id.

Copy$('#id').calendar()

Javascript methods

The following methods are available for calendars.

Copy$('#id').calendar('setDate', 'Aug 10 2016 12:40')

Copy$('#id').calendar('setMin', 'Aug 10 2016 12:40')

Copy$('#id').calendar('setMax', 'Aug 10 2016 12:40')