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 2015">

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 -->