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