Please wait...
Page is loading

Super Time field

is a text field enhanced with Time picker width additional RTL support and mobile non native support.

Getting started

To use super time field simply include bs4 theme in your bundle file 

//= require vendor/bootstrap-4.4.1-iplan-theme.bundle

super time field should be manually initialized as follows 

$(selector).timepicker({});

When using super time field include in your bundle file BS4 super time field initializer and every dom element with {data: {toggle: 'super-time-field'}} will be auto initialized with the super time field and pre defined custom options. 

//= require initializers/bs4-super-time-field

You can use super time field as described in Time picker

Default behaviour

Super time field is a regular text field with .form-control and it defaults to a floating label with a place holder - "__:__" and direction is LTR.

To auto initialize super time field use {data-toggle: 'super-time-field'}

Floating label
Floating label fixed
.form-row
  .col-24.col-md-12
    .form-group
      =label_tag 'super-time-field', 'Time'
      =text_field_tag 'super-time-field', nil, class: 'form-control', placeholder: '__ : __',
                      data: {toggle: 'super-time-field'}
  .col-24.col-md-12
    .form-group
      =label_tag 'super-time-field-with-none-option', 'Time with "none" option'
      =text_field_tag 'super-time-field-with-none-option', nil, class: 'form-control', placeholder: '__ : __',
                      data: {toggle: 'super-time-field', 'none-button': 'none'}

%h5='Floating label'
.form-row
  .col-24.col-md-12
    .form-group.floating-label
      =text_field_tag 'super-time-field-floating-label', nil, class: 'form-control', placeholder: '__ : __',
                      data: {toggle: 'super-time-field'}
      =label_tag 'super-time-field-floating-label', 'Time'
  .col-24.col-md-12
    .form-group.floating-label
      =text_field_tag 'super-time-field-floating-label-none-option', nil, class: 'form-control', placeholder: '__ : __',
                      data: {toggle: 'super-time-field',
                             'none-button': 'none',
                             'min-time': '12:00', 'max-time': '16:00', step: 30}
      =label_tag 'super-time-field-floating-label-none-option', 'Time with "none" option'

%h5='Floating label fixed'
.form-row
  .col-24.col-md-12
    .form-group.floating-label.floating-label-fixed
      =text_field_tag 'super-time-field-floating-label', nil, class: 'form-control', placeholder: '__ : __',
                      data: {toggle: 'super-time-field'}
      =label_tag 'super-time-field-floating-label', 'Time'
  .col-24.col-md-12
    .form-group.floating-label.floating-label-fixed
      =text_field_tag 'super-time-field-floating-label-none-option', nil, class: 'form-control', placeholder: '__ : __',
                      data: {toggle: 'super-time-field',
                             'none-button': 'none',
                             'min-time': '12:00', 'max-time': '16:00', step: 30}
      =label_tag 'super-time-field-floating-label-none-option', 'Time with "none" option'

Custom range & Step

Custom steps are set in minutes (eg. 60 minutes for 1 hour steps), when custom time range is set, values outside of the time range will be ignored and cleared.

To set custom time range and step use the following options:

  • data-min-time: "xx:xx" (eg. '09:00')
    Min time value will be included in the options
  • data-max-time: "xx:xx" (eg. '20:00')
    Max time value will not be included in the options
  • data-step: "30" (in minutes)
Min & Max time
When using custom range both min time and max time are mandatory, if you will use only min time,eg. min time 10:00, values from 24:00 and above will be shown but rejected)
Time is limited to range
Time is limited to range
.form-row
  .col-24.col-md-12
    .form-group
      =label_tag 'super-time-field-range', '12:00 to 16:00 with 30 minutes steps'
      =text_field_tag 'super-time-field-range', nil, class: 'form-control', placeholder: '__ : __',
                      data: {toggle: 'super-time-field',
                             'none-button': 'none',
                             'min-time': '12:00', 'max-time': '16:00', step: 30}
      .small.text-muted.form-text='Time is limited to range'

  .col-24.col-md-12
    .form-group
      =label_tag 'super-time-field-range', 'From 12:00 to 22:00 with 1 hour steps'
      =text_field_tag 'super-time-field-range', nil, class: 'form-control', placeholder: '__ : __',
                      data: {toggle: 'super-time-field',
                             'none-button': 'none',
                             'min-time': '12:00', 'max-time': '22:00',
                             step: 60}
      .small.text-muted.form-text='Time is limited to range'

Scroll default

If you want scroll position to start from a specific time use {data-scroll-default: 'xx:xx'}

Time is limited to range
.form-row
  .col-24.col-md-12
    .form-group
      =label_tag 'super-time-field-scroll-default', 'Scroll to 10:00'
      =text_field_tag 'super-time-field-scroll-default', nil, class: 'form-control', placeholder: '__ : __',
                      data: {toggle: 'super-time-field',
                             'none-button': 'none',
                             'scroll-default': '10:00', step: 30}
  .col-24.col-md-12
    .form-group
      =label_tag 'super-time-field-range-scroll-default', 'Scroll to 10:00 (range start at 08:00)'
      =text_field_tag 'super-time-field-range-scroll-default', nil, class: 'form-control', placeholder: '__ : __',
                      data: {toggle: 'super-time-field',
                             'none-button': 'none',
                             'min-time': '08:00', 'max-time': '20:00',
                             'scroll-default': '10:00', step: 60}
      .small.text-muted.form-text='Time is limited to range'

Super time field is normally appended to the body, when inside a modal we append it to the modal to avoid z-index issues. 

=button_tag 'modal with super date field', class: 'btn btn-light', 'data-toggle': "modal", 'data-target': "#super-date-field-modal", type: 'button'

.modal#super-date-field-modal{tabindex: '-1'}
  .modal-dialog
    %form.modal-content
      .modal-header
        %h5.modal-title='Modal with super date field'
        =button_tag class: 'close', 'data-dismiss': 'modal', type: 'button' do
          %span ×
      .modal-body
        .form-row
          .col-24.col-md-12
            .form-group
              =label_tag 'modal-super-date-field-no-today', 'date'
              =text_field_tag 'modal-super-date-field-no-today', nil, class: 'form-control', placeholder: '__/__/____',
                              data: {toggle: 'super-date-field', 'clear-button': t('application.clear')}
          .col-24.col-md-12
            .form-group
              =label_tag 'modal-super-date-field-with-today', 'date with "today" button'
              =text_field_tag 'modal-super-date-field-with-today', nil, class: 'form-control', placeholder: '__/__/____',
                              data: {toggle: 'super-date-field', 'clear-button': t('application.clear'), 'today-button': t('date.today')}
        %h5='Floating label'
        .form-row
          .col-24.col-md-12
            .form-group.floating-label
              =text_field_tag 'modal-super-date-field-floating-label-no-today', nil, class: 'form-control', placeholder: true,
                              data: {toggle: 'super-date-field', 'clear-button': t('application.clear')}
              =label_tag 'modal-super-date-field-floating-label-no-today', 'date (__/__/____)'
          .col-24.col-md-12
            .form-group.floating-label
              =text_field_tag 'modal-super-date-field-floating-label-with-today', nil, class: 'form-control', placeholder: true,
                              data: {toggle: 'super-date-field', 'clear-button': t('application.clear'), 'today-button': t('date.today')}
              =label_tag 'modal-super-date-field-floating-label-with-today', 'date with "today" button (__/__/____)'


      .modal-footer
        =button_tag 'close', type: 'button', class: 'btn-block btn btn-light', 'data-dismiss': "modal"
On this page