@@include('./parts/head.html', { "plugin_fa_icons": true, "plugin_mdi_icons": true, "plugin_ion_icons": true, "plugin_wi_icons": true, "plugin_rickshaw": false, "plugin_nvd3": false, "plugin_flot": false, "plugin_sparkline": false, "plugin_markitup": false, "plugin_ckeditor": false, "plugin_select2": true, "plugin_dropzone": true, "plugin_tagsinput": true, "plugin_clockpicker": true, "plugin_pikaday": true, "plugin_spectrum": true, "plugin_inputmask": true, "plugin_parsley": true, "plugin_gmaps": false, "plugin_jvectormap": false, "plugin_datatables": false, "plugin_fullcalendar": false, "plugin_simpleweather": false, "plugin_prettify": true }) @@include('./parts/top-navbar.html') @@include('./parts/sidebar.html', { "page": "forms-advanced", "classes": "yay-shrink yay-hide-to-small yay-gestures" })
@@include('./parts/title.html', { "title": "Advanced Form Elements", "crumbs": "
  • Dashboard
  • Forms
  • Advanced 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 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 -->
<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 -->
    @@include('./parts/search-bar.html') @@include('./parts/chat.html') @@include('./parts/foot.html', { "copyright": true })