Please wait...
Page is loading

Super Date field

is a text field enhanced with Flat date picker with additional RTL support and mobile non native support.

Getting started

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

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

super date field should be manually initialized as follows 

$(selector).superDateField({});

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

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

You can use super date field as described in Flat date picker

Default behaviour

Super date field is a regular text field with .form-control and it defaults to a floating label (and you should add a place holder - "__/__/____"), it's direction defaults to LTR. You can use the following options

  • data-toggle: 'super-date-field' (when using the initializer) to auto initialize the text field
  • 'data-clear-button': 'xxx' to set clear button text
  • 'data-today-button': 'xxx' to set today button text
Floating label
Floating label fixed
.form-row
  .col-24.col-md-12
    .form-group
      =label_tag 'super-date-field-no-today', 'date'
      =text_field_tag '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 'super-date-field-with-today', 'date with "today" button'
      =text_field_tag '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 '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 'super-date-field-floating-label-no-today', 'date (__/__/____)'
  .col-24.col-md-12
    .form-group.floating-label
      =text_field_tag '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 'super-date-field-floating-label-with-today', 'date with "today" button (__/__/____)'

%h5='Floating label fixed'
.form-row
  .col-24.col-md-12
    .form-group.floating-label.floating-label-fixed
      =text_field_tag 'super-date-field-floating-label-no-today', nil, class: 'form-control', placeholder: '__/__/____',
                      data: {toggle: 'super-date-field', 'clear-button': t('application.clear')}
      =label_tag 'super-date-field-floating-label-no-today', 'date'
  .col-24.col-md-12
    .form-group.floating-label.floating-label-fixed
      =text_field_tag 'super-date-field-floating-label-with-today', nil, class: 'form-control', placeholder: '__/__/____',
                      data: {toggle: 'super-date-field', 'clear-button': t('application.clear'), 'today-button': t('date.today')}
      =label_tag 'super-date-field-floating-label-with-today', 'date with "today" button'

Super date field calendar is normally appended to the body, when inside a modal it will create a problem because the focus will be outside the modal (clicking on the cal). That's why super date field inside a modal gets a "special" treatment and it's calendar is detached from the body and appended to the modal. Also clicking on the escape key when super date field is "open" inside a modal will close the cal but will not close the modal. 

=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