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.

September 14, 2022 - October 13, 2022 
<!-- 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>

jQuery typeahead

The jQuery Typeahead Search is a simple plugin that suggest search results from the character(s) that were typed in the search bar using JavaScript. Please read the official documentation for the full list of options.

× 
<!-- required css & js -->
<link href="/assets/plugins/jquery-typeahead/dist/jquery.typeahead.min.css" rel="stylesheet" />
<script src="/assets/plugins/jquery-typeahead/dist/jquery.typeahead.min.js"></script>

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

<!-- script -->
<script>
  $.typeahead({
    input: '#typeahead',
      order: "desc",
        source: {
          data: [
            "Afghanistan", "Albania",
              ...
            ]
        }
  });
</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.

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.

Summernote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu sollicitudin est. Cras et feugiat magna. Fusce sit amet euismod sem, pellentesque pellentesque risus. Quisque id lobortis quam. Nulla non magna vel ipsum volutpat malesuada dapibus sit amet elit. Quisque iaculis placerat lorem vel vestibulum. Maecenas nisi lacus, finibus vel massa vitae, hendrerit aliquet urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam egestas commodo varius. Aliquam enim ante, pharetra eu augue sed, dignissim semper mauris. Mauris fringilla arcu libero. Proin maximus enim quis diam condimentum, vel feugiat sapien sodales. Aliquam erat volutpat. Sed lorem nunc, commodo molestie ante ac, varius elementum neque. Nunc sem erat, varius vel sapien a, ultrices condimentum dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Easy to Install

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu sollicitudin est. Cras et feugiat magna. Fusce sit amet euismod sem, pellentesque pellentesque risus. Quisque id lobortis quam. Nulla non magna vel ipsum volutpat malesuada dapibus sit amet elit. Quisque iaculis placerat lorem vel vestibulum. Maecenas nisi lacus, finibus vel massa vitae, hendrerit aliquet urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam egestas commodo varius. Aliquam enim ante, pharetra eu augue sed, dignissim semper mauris. Mauris fringilla arcu libero. Proin maximus enim quis diam condimentum, vel feugiat sapien sodales. Aliquam erat volutpat. Sed lorem nunc, commodo molestie ante ac, varius elementum neque. Nunc sem erat, varius vel sapien a, ultrices condimentum dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 

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

Select value
Select value
Select value
<!-- 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>
Dark Mode NEW
Adjust the appearance to reduce glare and give your eyes a break.
{% for (var i=0, file; file=o.files[i]; i++) { %}

{%=file.name%}

Processing...

{% if (!i && !o.options.autoUpload) { %} {% } %} {% if (!i) { %} {% } %} {% } %} {% for (var i=0, file; file=o.files[i]; i++) { %} {% if (file.thumbnailUrl) { %} {% } %}

{% if (file.url) { %} {%=file.name%} {% } else { %} {%=file.name%} {% } %}

{% if (file.error) { %}
Error {%=file.error%}
{% } %} {%=o.formatFileSize(file.size)%} {% if (file.deleteUrl) { %}
{% } else { %} {% } %} {% } %}