Advanced Form Elements

Range

<p class="range-field">
  <input type="range" min="0" max="500" value="30" />
</p>

Character Counter

Input text

<div class="input-field">
  <input id="input_text" type="text" length="10">
  <label for="input_text">Input text</label>
</div>

Textarea

<div class="input-field">
  <textarea id="textarea1" class="materialize-textarea" length="120"></textarea>
  <label for="textarea1">Textarea</label>
</div>

Material Date Picker

<input class="datepicker" type="date">

Date

<div class="input-field">
  <input class="datepicker" id="input_date" type="date">
  <label for="input_date">Date</label>
</div>

Pikaday (datepicker)

Con uses Pikaday - is refreshing JavaScript Datepicker. Full documentation and examples see here https://github.com/dbushell/Pikaday.
Begin to use the plugin with this step:

<link rel="stylesheet" type="text/css" href="assets/pikaday/pikaday.css">
<script type="text/javascript" src="assets/pikaday/pikaday.js"></script>
<script type="text/javascript" src="assets/pikaday/pikaday.jquery.js"></script>

<input class="pikaday" type="text" value="12 Jan 2018">

Clock Picker

Con uses Clockpicker - is clock-style timepicker for Bootstrap (or jQuery). Full documentation and examples see here http://weareoutman.github.io/clockpicker/.
Begin to use the plugin with this step:

<link rel="stylesheet" type="text/css" href="assets/jquery-clockpicker/jquery-clockpicker.min.css">
<script type="text/javascript" src="assets/jquery-clockpicker/jquery-clockpicker.min.js"></script>

<input class="clockpicker" type="text" value="18:10" data-donetext="OK">

Spectrum (colorpicker)

Con uses Spectrum - is No Hassle JavaScript Colorpicker. Full documentation and examples see here https://bgrins.github.io/spectrum/.
Begin to use the plugin with this step:

<link rel="stylesheet" type="text/css" href="assets/spectrum/spectrum.css">
<script type="text/javascript" src="assets/spectrum/spectrum.js"></script>

<input type='text' class="spectrum" value="#42A5F5" />

Select2

Con uses Select2 - is jQuery replacement for select boxes. Full documentation and examples see here https://select2.github.io/.
Begin to use the plugin with this step:

<link rel="stylesheet" type="text/css" href="assets/select2/css/select2.min.css" />
<script type="text/javascript" src="assets/select2/js/select2.full.min.js"></script>

Default Select2 state:
Multiple Select2 state. Just use multiple="multiple" attribute:

<select class="select2">
  <optgroup label="Alaskan/Hawaiian Time Zone">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone">
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
  </optgroup>
  ...
</select>

Tags Input

Con uses jQuery Tags Input. This plugin will turn your boring tag list into a magical input that turns each tag into a style-able object with its own delete link. Full documentation and examples see here https://github.com/xoxco/jQuery-Tags-Input
Begin to use the plugin with this step:

<link rel="stylesheet" type="text/css" href="assets/jquery-tags-input/jquery.tagsinput.css" />
<script type="text/javascript" src="assets/jquery-tags-input/jquery.tagsinput.js"></script>

<input class="input-tag" type="text" name="tags" id="tags" value="PHP,JavaScript,CSS" />

Drop Zone

Con uses DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews. Full documentation and examples see here http://www.dropzonejs.com/
Begin to use the plugin with this step:

<link rel="stylesheet" type="text/css" href="assets/dropzone/dropzone.min.css" />
<script type="text/javascript" src="assets/dropzone/dropzone.min.js"></script>

<form action="/file-upload"
      class="dropzone"
      id="my-dropzone"></form>

Masked Inputs

Con uses Inputmask is a jquery plugin which create an input mask. An inputmask helps the user with the input by ensuring a predefined format. This can be usefull for dates, numerics, phone numbers, ... Full documentation and examples see here http://robinherbots.github.io/jquery.inputmask/
Begin to use the plugin with this step:

<script type="text/javascript" src="assets/jquery-input-mask/jquery.inputmask.bundle.min.js"></script>

Date

Date Alt

Time

Phone

Currency

<!-- Date -->
<div class="input-field">
  <input id="masked-date" type="text" data-inputmask="'alias': 'date'">
  <label for="masked-date">Date</label>
</div>
<!-- /Date -->

<!-- Date Alt -->
<div class="input-field">
  <input id="masked-date-alt" type="text" data-inputmask="'mask': 'y/m/d'">
  <label for="masked-date-alt">Date Alt</label>
</div>
<!-- /Date Alt -->

<!-- Time -->
<div class="input-field">
  <input id="masked-time" type="text" data-inputmask="'mask': 'h:s'">
  <label for="masked-time">Time</label>
</div>
<!-- /Time -->

<!-- Phone -->
<div class="input-field">
  <input id="masked-phone" type="text" data-inputmask="'mask': '(999) 999-9999'">
  <label for="masked-phone">Phone</label>
</div>
<!-- /Phone -->

<!-- Currency -->
<div class="input-field">
  <input id="masked-currency" type="text" data-inputmask="'numericInput': true, 'mask': '$ 999,999.99', 'rightAlignNumerics':false">
  <label for="masked-currency">Currency</label>
</div>
<!-- /Currency -->