Form Plugins page header description goes here...


Bootstrap datepicker

Bootstrap datepicker provides a flexible datepicker widget in the Bootstrap style. Please read the official documentation for the full list of options.

to
<!-- required js / css -->
<link href="assets/plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css" rel="stylesheet" />
<script src="assets/plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>

<!-- default html -->
<input type="text" class="form-control" id="datepicker" placeholder="dd/mm/yyyy" />

<!--component html -->
<div class="input-group">
  <input type="text" class="form-control" id="datepicker" placeholder="with input group addon" />
  <label class="input-group-text" for="datepicker">
    <i class="fa fa-calendar"></i>
  </label>
</div>

<!-- range html -->
<div class="input-group input-daterange" id="datepicker">
  <input type="text" class="form-control" name="start" placeholder="start date" />
  <span class="input-group-text">to</span>
  <input type="text" class="form-control" name="end" placeholder="end date" />
</div>

<!-- script -->
<script>
  $('#datepicker').datepicker({
    autoclose: true
  });
</script>

Bootstrap daterangepicker

Bootstrap daterangepicker provides a component for choosing date ranges, dates and times. Please read the official documentation for the full list of options.

 
<!-- required js / css -->
<link href="assets/plugins/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet" />
<script src="assets/plugins/bootstrap-daterangepicker/daterangepicker.js"></script>

<!-- html -->
<div class="input-group" id="daterange">
  <input type="text" name="daterange" class="form-control" value="" placeholder="click to select the date range" />
  <span class="input-group-text"><i class="fa fa-calendar"></i></span>
</div>

<!-- script -->
<script>
  $('#daterange').daterangepicker({
    opens: 'right',
    format: 'MM/DD/YYYY',
    separator: ' to ',
    startDate: moment().subtract('days', 29),
    endDate: moment(),
    minDate: '01/01/2012',
    maxDate: '12/31/2018',
  }, function (start, end) {
    $('#daterange input').val(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
  });
</script>

Bootstrap timepicker

Bootstrap timepicker provide an easy way to select a time for a text input using your mouse or keyboards arrow keys. Please read the official documentation for the full list of options.

<!-- required js / css -->
<link href="assets/plugins/bootstrap-timepicker/css/bootstrap-timepicker.min.css" rel="stylesheet" />
<script src="assets/plugins/bootstrap-timepicker/js/bootstrap-timepicker.min.js"></script>

<!-- html -->
<div class="input-group bootstrap-timepicker timepicker">
  <input id="timepicker" type="text" class="form-control" />
  <span class="input-group-addon input-group-text">
    <i class="fa fa-clock"></i>
  </span>
</div>

<!-- script -->
<script>
  $('#timepicker').timepicker();
</script>

Bootstrap slider

Bootstrap slider provides single handle that can be moved with the mouse or by using the arrow keys. Please read the official documentation for the full list of options.

€ 1000 € 10
<!-- required js / css -->
<link href="assets/plugins/bootstrap-slider/dist/css/bootstrap-slider.min.css" rel="stylesheet" />
<script src="assets/plugins/bootstrap-slider/dist/bootstrap-slider.min.js"></script>

<!-- default -->
<input type="text" id="slider" class="form-control" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>

<!-- script -->
<script>
  $('#slider').bootstrapSlider();
</script>

Bootstrap typeahead

Bootstrap typeahead is for simple autocomplete use cases there seems to be nothing wrong with the dropped typeahead plugin. Please read the official documentation for the full list of options.

<!-- required js -->
<script src="assets/plugins/bootstrap-3-typeahead/bootstrap3-typeahead.js"></script>

<!-- html -->
<input type="text" value="" placeholder="Type 'a'" class="form-control" id="typeahead" />

<!-- script -->
<script>
  $('#typeahead').typeahead({
    source: [
      { id: '1', name: 'ActionScript' },
      { id: '2', name: 'AppleScript' },
      ...
    ],
    autoSelect: true
  });
</script>

jQuery Tag It

jQuery Tag It is a jQuery plugin providing a Simple and configurable tag editing widget with autocomplete support. Please read the official documentation for the full list of options.

  • fancy
  • new
  • tag
  • demo

You may enter the text (c++, java, php, javascript, ruby, python) for autocomplete preview

<!-- required js / css -->
<link href="assets/plugins/tag-it/css/jquery.tagit.css" rel="stylesheet" />
<script src="assets/plugins/jquery-migrate/dist/jquery-migrate.min.js"></script>
<script src="assets/plugins/tag-it/js/tag-it.min.js"></script>

<!-- default -->
<ul id="jquery-tagit" class="tagit form-control">
  <li>fancy</li>
  <li>new</li>
  <li>tag</li>
  <li>demo</li>
</ul>

<script>
  $(document).ready(function() {
    $('#jquery-tagit').tagit({
      fieldName: 'tags',
      availableTags: ['c++', 'java', 'php', 'javascript', 'ruby', 'python', 'c'],
      autocomplete: {
        delay: 0, 
        minLength: 2
      }
    });
  });
</script>

jQuery masked input

jQuery masked input allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format. Please read the official documentation for the full list of options.

<!-- required js -->
<script src="assets/plugins/jquery.maskedinput/src/jquery.maskedinput.js"></script>

<!-- html -->
<input type="text" id="masked-input" class="form-control" placeholder="mm/dd/yyyy" />

<!-- script -->
<script>
  $('#masked-input').mask('99/99/9999');
</script>

jQuery file upload

File Upload widget with multiple file selection, drag&drop support, progress bars, validation and preview images, audio and video for jQuery. Please read the official documentation for the full list of options.

Add files...
PREVIEW FILENAME SIZE ACTION
No file uploaded
<!-- required css /js -->
<link href="assets/plugins/blueimp-file-upload/css/jquery.fileupload.css" rel="stylesheet" />
<script src="assets/plugins/blueimp-file-upload/js/vendor/jquery.ui.widget.js"></script>
<script src="assets/plugins/blueimp-tmpl/js/tmpl.min.js"></script>
<script src="assets/plugins/blueimp-load-image/js/load-image.all.min.js"></script>
<script src="assets/plugins/blueimp-canvas-to-blob/js/canvas-to-blob.min.js"></script>
<script src="assets/plugins/blueimp-gallery/js/jquery.blueimp-gallery.min.js"></script>
<script src="assets/plugins/blueimp-file-upload/js/jquery.iframe-transport.js"></script>
<script src="assets/plugins/blueimp-file-upload/js/jquery.fileupload.js"></script>
<script src="assets/plugins/blueimp-file-upload/js/jquery.fileupload-process.js"></script>
<script src="assets/plugins/blueimp-file-upload/js/jquery.fileupload-image.js"></script>
<script src="assets/plugins/blueimp-file-upload/js/jquery.fileupload-audio.js"></script>
<script src="assets/plugins/blueimp-file-upload/js/jquery.fileupload-video.js"></script>
<script src="assets/plugins/blueimp-file-upload/js/jquery.fileupload-validate.js"></script>
<script src="assets/plugins/blueimp-file-upload/js/jquery.fileupload-ui.js"></script>

<!-- html -->
<input id="fileupload" type="file" name="files[]" multiple />

<!-- script -->
<script>
  $('#fileupload').fileupload({
    url: '--- your url here ---',
    dataType: 'json',
    sequentialUploads: true,
    done: function(e, data) {
      //console.log(data.result);
    }
  });
  $('#fileupload').on('fileuploadadd', function (e, data) {
    data.submit();
  });
</script>

Summernote

Summernote is a super simple WYSIWYG Editor on Bootstrap. It allows you to edit the HTML tag and preview it. Please read the official documentation for the full list of options.

<!-- required css / js -->
<link href="assets/plugins/summernote/dist/summernote-lite.css" rel="stylesheet" />
<script src="assets/plugins/summernote/dist/summernote-lite.min.js"></script>

<!-- html -->
<textarea name="text" class="summernote" id="contents" title="Contents">...</textarea>

<!-- script -->
<script>
  $('.summernote').summernote({
    height: 300
  });
</script>

Select picker

Select picker is jQuery plugin for multiselect tag-like picker. Please read the official documentation for the full list of options.

<!-- required js / css -->
<link href="assets/plugins/select-picker/dist/picker.min.css" rel="stylesheet" />
<script src="assets/plugins/select-picker/dist/picker.min.js"></script>

<!-- default -->
<select class="form-control" id="ex-basic">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

<!-- multiple -->
<select class="form-control" multiple>
  <optgroup label="Picnic">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </optgroup>
  <optgroup label="Camping">
    <option>Tent</option>
    <option>Flashlight</option>
    <option>Toilet Paper</option>
  </optgroup>
</select>

Spectrum colorpicker

Spectrum is a jQuery plugin for colorpicker. Please read the official documentation for the full list of options.

<!-- required js / css -->
<link href="assets/plugins/spectrum-colorpicker2/dist/spectrum.min.css" rel="stylesheet" />
<script src="assets/plugins/spectrum-colorpicker2/dist/spectrum.min.js"></script>

<!-- default -->
<input type="text" value="#007aff" class="form-control" id="colorpicker" />

<!-- script -->
<script>
  $('#colorpicker').spectrum({
    "showInput": true
  });
</script>