Studio | Form Plugins

Bootstrap datepicker

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

<!-- 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-append mb-0" for="datepicker">
    <span class="input-group-text"><i class="fa fa-calendar"></i></span>
  </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-append input-group-prepend">
    <span class="input-group-text">to</span>
  </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-append">
    <span class="input-group-text"><i class="fa fa-calendar"></i></span>
  </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-append">
    <span class="input-group-text"><i class="fa fa-clock"></i></span>
  </span>
</div>

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

Bootstrap select

Bootstrap select is a jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with Bootstrap 4 support. Please read the official documentation for the full list of options.

Default *

Multiple SelectBox *

Live Search *

With Button Class *

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

<!-- default -->
<select class="selectpicker form-control" data-style="btn-default">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

<!-- live search -->
<select class="selectpicker form-control" data-style="btn-default" data-live-search="true">...</select>

<!-- multiple -->
<select class="selectpicker form-control" data-style="btn-default" multiple data-max-options="3">
  <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>

Bootstrap colorpicker

Bootstrap colorpicker is a modular color picker plugin for Bootstrap 4. Please read the official documentation for the full list of options.

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

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

<!-- with addon -->
<div class="input-group colorpicker-component" id="colorpicker">
  <input type="text" value="#007aff" class="form-control" />
  <span class="input-group-append">
    <span class="input-group-text colorpicker-input-addon"><i></i></span>
  </span>
</div>

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

Bootstrap tags input

Bootstrap tags input is a jQuery plugin providing a Twitter Bootstrap user interface for managing tags. Please read the official documentation for the full list of options.

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

<!-- default -->
<input type="text" class="form-control" id="tagsinput" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" />

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.

<!-- 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 password strength

The jQuery Password Strength Meter is a plugin for Twitter Bootstrap that provides rulesets for visualy displaying the quality of a users typed in password. Please read the official documentation for the full list of options.

<!-- required js -->
<script src="assets/plugins/pwstrength-bootstrap/dist/pwstrength-bootstrap.min.js"></script>

<!-- default -->
<div class="form-group" id="pwdstrength-container">
  <label class="d-flex align-items-center">
    Password <span class="text-danger">*</span>
    <span class="pwstrength_viewport_progress ml-auto width-200"></span>
  </label>
  <input type="password" id="pwstrength" placeholder="password" class="form-control" />
</div>

<!-- script -->
<script>
  var options = {};
  options.ui = {
    container: "#pwdstrength-container",
    showVerdictsInsideProgressBar: true,
    viewports: {
      progress: ".pwstrength_viewport_progress"
    },
    progressExtraCssClasses: "progress-sm"
  };
  options.common = {
    debug: true,
    onLoad: function () {
      $('#messages').text('Start typing password');
    }
  };
  $('#pwstrength').pwstrength(options);
</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...

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

<div class="clearfix pt-3 pb-3">
  <img src="assets/img/gallery/gallery-1.jpg" alt="" width="283" class="rounded float-left mr-3 mb-3" />
  <div>
    <h3 class="mt-0">Summernote</h3>
    <p class="mb-0">
    	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.
    </p>
  </div>
</div>
<hr />
<div class="clearfix pt-3 pb-3">
  <img src="assets/img/gallery/gallery-2.jpg" alt="" width="283" class="rounded float-right ml-3 mb-3" />
  <div>
    <h2 class="mt-0">Easy to Install</h2>
    <p class="mb-0">
      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.
    </p>
  </div>
</div>

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

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

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

Notifications

Form Plugins page header description goes here...