Advanced Form Elements

Range

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

Character Counter

<div class="input-field">
  <input id="input_text" type="text" length="10">
  <label for="input_text">Input text</label>
</div>
<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">
<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 -->
<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 -->
Online
Felecia Castro
Felecia Castro
Lorem status
Max Brooks
Max Brooks
Lorem status
Patsy Griffin
Patsy Griffin
Lorem status
Chloe Morgan
Chloe Morgan
Lorem status
Vernon Garrett
Vernon Garrett
Lorem status
Greg Mcdonalid
Greg Mcdonalid
Lorem status
Christian Jackson
Christian Jackson
Lorem status
Offline
Willie Kelly
Willie Kelly
Lorem status
Jenny Phillips
Jenny Phillips
Lorem status
Darren Cunningham
Darren Cunningham
Lorem status
Sandra Cole
Sandra Cole
Lorem status
Monday, Feb 23, 8:23 pm
Hi, Felicia.
How are you?
John Doe Hi! I am good!
Glad to see you :)
This long text is intended to show how the chat will display it.
John Doe Also, we will send the longest word to show how it will fit in the chat window: Pneumonoultramicroscopicsilicovolcanoconiosis
Friday, Mar 10, 5:07 pm
Hi again!
John Doe Hi! Glad to see you.
I want to add you in my Facebook.
Can you give me your page?
John Doe I do not use Facebook. But you can follow me in Twitter.
It's good idea!
John Doe You can find me here - https://twitter.com/nkdevv