Date-time pickers

Date-time pickers are components that allow users to easily select a date and time range.

• Date-time-picker component
  • Date-time-picker range module
  • Date-time-picker directional range (D-range) module
• Date-time picker GMT time offset
• Usage
  • Via javascript
  • Javascript methods

Date-time picker component

The date-time picker can be consisted of up to 3 different modules that can be enabled or disabled on-demand by using the appropriate tabbed content markup.

• The presets module, that allows developers to define custom data/time range presets, based on application needs.
• The range module, that allows users to easily define a date/time range by individually setting year, month, day and time.
• The directional range module, that allows users to easily define a date/time range, by pinpointing a specific timestamp and then setting a custom duration and direction - before, ahead or around the specified timestamp. The directional range is particularly useful when users need to quickly locate events that occurred close to a known timestamp.

The date-time picker component has been specifically designed to be accommodated in a filter sidebar with each module inside its own tab. It is left to the developer to define the range presets, which are styled as radio buttons. Below is an example date-time picker with all 3 modules enabled and a few custom range presets defined.

Code output

HTML Markup

Copy<div id="datetime-1" class="tabs">
  <div class="tab-buttons">
    <div class="btn-group btn-group-justified">
      <a class="btn btn-underlined active" data-toggle="tab" data-href="#datetime-1-presets">Presets</a>
      <a class="btn btn-underlined" data-toggle="tab" data-href="#datetime-1-range">Range</a>
      <a class="btn btn-underlined" data-toggle="tab" data-href="#datetime-1-drange">D-range</a>
    </div>
  </div>
  <div class="tabs-content">
    <div id="datetime-1-presets" class="tab active">
      <ul class="list-filters">
        <li>
          <label class="custom-radio">
          <input name="group1" value="option2" type="radio">
          <span>Option 1</span>
          </label>
        </li>
        <...>
      </ul>
    </div>
    <div id="datetime-1-range" class="tab">
      <div class="datepicker-range"></div>
    </div>
    <div id="datetime-1-drange" class="tab">
      <div class="datepicker-directional-range"></div>
    </div>
  </div>
</div>

Date-time picker range module

The range module accepts the following data-attributes upon its initialization:

• The optional data-init-date-to attribute sets the pre-selected date and time in the to column. If a data-init-date-to is not specified, the current local date and time is selected.
• The optional data-init-date-from attribute sets the pre-selected date and time in the from column. If a data-init-date-from is not specified, the current local date and time minus one minute is selected.
• The optional data-min-date attribute sets the minimum date and time allowed to be selected in the range module
• The optional data-max-date attribute sets the maximum date and time allowed to be selected in the range module

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 data-range-to-target="#target-id-1" and data-range-from="#target-id-2" attributes expose the defined date range from the to and from columns respectively to the input elements.

The following markup renders a range module with a pre-selected date range between Aug 10 2016 12:40 and Aug 20 2016 12:40, constrained by a minimum and maximum date of Jan 1 2015 00:00 and Dec 31 2017 23:59. The date and time from both from and to columns are also exposed to input elements.

Code output

HTML Markup

Copy<div id="datetime-range-module-1" class="datepicker-range" data-init-date-from="Aug 10 2016 12:40" data-init-date-to="Aug 20 2016 12:40" data-min-date="Jan 1 2015 00:00" data-max-date="Dec 31 2017 23:59" data-range-from-target="#datetime-range-module-1-from-date" data-range-to-target="#datetime-range-module-1-to-date"></div>

<label>Date-time picker range <i>from</i></label>
<input id="datetime-range-module-1-from-date" type="text" readonly>

<label>Date-time picker range <i>to</i></label>
<input id="datetime-range-module-1-to-date" type="text" readonly>

Date-time picker directional range (d-range) module

The directional range module accepts the following data-attributes upon its initialization:

• The optional data-init-date attribute sets the pre-selected date and time in the directional range module. If a data-init-date 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 directional range module
• The optional data-max-date attribute sets the maximum date and time allowed to be selected in the directional range module

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 data-directional-to-target="#target-id-1" and data-directional-from-target="#target-id-2" attributes expose the defined date range as it is defined by the module to the input elements.

The following markup renders a directional range module with a pre-selected date of Aug 10 2016 12:40, constrained by a minimum and maximum date. The date range defined by the module is also exposed to input elements.

Code output

HTML Markup

Copy<div id="datetime-d-range-module-1" class="datepicker-directional-range" data-init-date="Aug 10 2016 12:40" data-min-date="Aug 1 2016 12:40" data-max-date="Aug 30 2016 12:40" data-directional-from-target="#datetime-d-range-module-1-from-date" data-directional-to-target="#datetime-d-range-module-1-to-date"></div>

<label>Date-time picker d-range <i>from</i></label>
<input id="datetime-d-range-module-1-from-date" type="text" readonly>

<label>Date-time picker range <i>to</i></label>
<input id="datetime-d-range-module-1-to-date" type="text" readonly>

Date-time picker GMT time offset

A date-time picker 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 date-time picker component module, 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 date-time picker module. In the example shown below, a date-time picker range module using a data-offset-group attribute, targets a select element with the class datetime-picker-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 selected range date and time values, but changes the exposed output values as shown in the bound input below.

Two new attributes are 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 data-range-offset-to-target="#target-id-1" and data-range-offset-from="#target-id-2" attributes expose the defined date range from the to and from columns respectively to the input elements, in human date format, that includes day of week and time zone information.

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>Date-time picker range</label>
<div id="datetime-range-module-2" class="datepicker-range" data-offset-group="#offset-group-1" data-init-date="Aug 10 2016 12:40" data-min-date="Aug 1 2016 12:40" data-max-date="Aug 30 2016 12:40" data-range-from-target="#datetime-range-module-2-from-date" data-range-to-target="#datetime-range-module-2-to-date" data-range-offset-from-target="#datetime-range-module-2-offset-from-date" data-range-offset-to-target="#datetime-range-module-2-offset-to-date"></div>

<label>Date-time picker range <i>from</i></label>
<input id="datetime-range-module-2-from-date" type="text" readonly>

<label>Date-time picker range <i>to</i></label>
<input id="datetime-range-module-2-to-date" type="text" readonly>

<label>Date-time picker range <i>human date from</i> with day of week and time zone information</label>
<input id="datetime-range-module-2-offset-from-date" type="text" readonly>

<label>Date-time picker range <i>human date to</i> with day of week and time zone information</label>
<input id="datetime-range-module-2-offset-to-date" type="text" readonly>

Usage

Depending on the date-time picker modules required per case, the corresponding markup has to be replicated.

Via Javascript

Either of the two date-time picker modules - range or directional range - can be called using Javascript using their unique id.

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

Javascript methods

The following Javascript methods can be used to set various attributes of the range module.

Copy$('#range').dtpRange('setDateFrom', 'Aug 10 2016 12:40')

Copy$('#range').dtpRange('setDateTo', 'Aug 10 2016 12:40')

Copy$('#range').dtpRange('setMin', 'Aug 10 2016 12:40')

Copy$('#range').dtpRange('setMax', 'Aug 10 2016 12:40')

Only followin Javascript method is the only one available for the directional range module.

Copy$('#d-range').dtpRange('setDate', 'Aug 10 2016 12:40')