Form Elements & Plugins

For basic form elements such as inputs, checkboxes, selectboxes and file input, please see Form Elements

Datepicker

You can use any datepicker plugin.
In this demo I've used Tiny Date Picker with some custom styling that you can modify in scss/plugins/date.scss.
You should also include tiny-date-picker/tiny-date-picker.css before before ace.css.

The plugin supports date ranges and modal mode. For date ranges you should include tiny-date-picker/date-range-picker.css as well.

It may also be a good idea to display native datepicker in mobile devices.

if( 'ontouchstart' in window && window.matchMedia('(max-width: 600px)') ) {
  document.querySelector('#mydate').setAttribute('type', 'date');
}
else {
  TinyDatePicker('#mydate', {
    mode: 'dp-modal',
  })
}

Not all devices support a native datepicker, so you may need to perform additional checking.

Datetimepicker

Eonasdan/bootstrap-datetimepicker is used in Ace demo.
You should include eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css before ace.css.
Some custom styling is inside scss/plugins/date.scss.

Please note that this plugin was designed to work with Bootstrap 3.
In order to use it in Ace and Bootstrap 4, you need to make some changes.
See views/pages/form-basic/@page-script.js and search for Datetimepicker plugin inside it and see the NOTE below it.

Range slider

noUiSlider and Ion.RangeSlider plugins are included

noUiSlider

You can customize it in scss/plugins/slider.scss and you should also include nouislider/distribute/nouislider.min.css before ace.css.
The following is an example:

html

<div id="myslider" class="noUi-toggle-tooltip slider-thin"></div>

var myslider = document.getElementById("myslider");
noUiSlider.create(myslider, {
  tooltips: true,
  start: [20, 80],
  connect: true,
  range: {
      'min': 0,
      'max': 100
  }
})

//add custom colors to slider elements
$(myslider)
.find('.noUi-handle').addClass('brc-info border-2 radius-round slider-bars-none').end()
.find('.noUi-base').addClass('bgc-grey-l1').end()
.find('.noUi-connect').addClass('bgc-info').end()
.find('.noUi-tooltip').addClass('bgc-dark-tp1 text-white border-0 text-90 radius-1 px-2')

Ion.RangeSlider

Some customization can be done in scss/plugins/slider.scss. Search for $plugin-ionslider .
You should also include ion-rangeslider/css/ion.rangeSlider.min.css before ace.css .

Input Spinner

Bootstrap TouchSpin plugin in included Ace's demo. Here is an example with custom buttons:

html

 <input class="form-control form-control-lg" id="myspinner" type="text" value="55" name="id-spinner-1" />

$("#myspinner").TouchSpin({
  min: 0,
  max: 100,
  step: 0.1,
  decimals: 2,
  boostat: 5,
  maxboostedstep: 10,
  postfix: '%',

  buttondown_class: 'btn btn-danger',
  buttonup_class: 'btn btn-success',

  buttondown_txt: '<i class="fa fa-minus"></i>',
  buttonup_txt: '<i class="fa fa-plus"></i>',
})

Select2

For some customization you can modify scss/plugins/select2.scss.
You should also include select2/dist/css/select2.css before ace.css.

There is also the tag-input-style style which you can enable like this:

html

<div class="tag-input-style" id="myselectbox-container">
  <select class="select2" id="myselectbox">
    ...
  </select>
</div>

$('#myselectbox').select2({
   allowClear: true,
   dropdownParent: $('#myselectbox-container'),
})

Chosen

For some customization you can modify scss/plugins/chosen.scss.
You should also include chosen-js/chosen.css before ace.css.

There is also the tag-input-style style which you can enable like this:

html

<select class="chosen-select tag-input-style" id="myselectbox">
  ...
</select>

$('#myselectbox').chosen({
   allow_single_deselect: true
})

Tag input

Bootstrap Tagsinput plugin is used, and you can use it like this:

html

<input type="text" id="tag-input" class="form-control" />

$('#tag-input').tagsinput({
  tagClass: 'badge badge-secondary badge-xlg font-normal',
  focusClass: 'tagsinput-focus'
})

Some customization is done inside scss/plugins/form.scss. Look for $plugin-tagsinput

Bootstrap Select

Bootstrap select plugin can be cutomized like this:

html

<select multiple  id="select-picker" class="form-control" 
       data-style="btn-outline-primary btn-h-outline-primary btn-a-outline-primary">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

$.fn.selectpicker.Constructor.DEFAULTS.tickIcon = 'fas fa-check-square text-125 text-orange-m2 mt-1'
$('#select-picker').selectpicker()

You should also include bootstrap-select/dist/css/bootstrap-select.css before ace.css if you want to use it

Typeahead

Twitter typeahead.js is used. For an example you can see views/pages/form-more/@page-script.js
A little customization is done in scss/plugins/form.scss. Look for $plugin-typeahead

Rating

Bootstrap star rating plugin is used and you can use it like this:

$.fn.ratingThemes['fontawesome5-theme'] = {
  filledStar: '<i class="fas fa-star text-orange-m2"></i>',
  emptyStar: '<i class="far fa-star"></i>',
  clearButton: '<i class="fas fa-minus-circle text-110"></i>'
}

$('.star-rating').rating({
  animate: false,
  hoverOnClear: false,
  size: 'sm',
  theme: 'fontawesome5-theme',
  containerClass: 'is-star',

  clearCaptionClass: 'badge badge-sm bgc-secondary-l2 border-1 brc-black-tp10 text-80',

  starCaptionClasses: {
    0.5: 'badge badge-sm btn-light-danger border-1 text-80',
    1: 'badge badge-sm btn-light-danger border-1 text-80',
    ...
  }
});

For the complete example please see views/pages/form-more/@page-script.js

You should also include bootstrap-star-rating/css/star-rating.css before ace.css.
And a little customization is done in scss/plugins/form.scss . Look for $plugin-rating

Masked Input

Inputmask is included in Ace

Textarea

Autosize

Automatically shrinks/grows the textarea:

autosize($('#mytextarea'))

Bootstrap Maxlength

This plugin shows a customizable message when typing in a textarea or input element:

$('#mytextarea').maxlength({
  alwaysShow: true,
  allowOverMax: false,
  appendToParent: true,

  warningClass: "w-100 popover bs-popover-bottom  brc-primary-m2 border-2",
  limitReachedClass: "w-100 popover bs-popover-bottom brc-danger-m2 border-2",
  placement: 'bottom',

  message: function(currentText, maxLength) { 
    return '<div class="arrow '+(maxLength == currentText.length ? 'brc-danger': 'brc-primary')+'" style="left:calc(50% - 0.5rem)"></div>\
            <div class="popover-body">'+(Math.max(0, maxLength - currentText.length))+' characters remaining ...\
            <div class="h-1"></div> max allowed: '+maxLength+'!</div>';
  }
});

Dropzone.js

To customize it you should use the previewTemplate option.
For an example please see views/pages/form-upload/#index.hbs and views/pages/form-upload/@page-script.js

You should also include dropzone/dist/dropzone.css before ace.css and a little customization is done in scss/plugins/form.scss