Form Plugins header small text goes here...
<!-- required files -->
<link href="../assets/plugins/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet" />
<script src="../assets/plugins/moment/min/moment.min.js"></script>
<script src="../assets/plugins/bootstrap-daterangepicker/daterangepicker.js"></script>
<!-- html -->
<div class="input-group" id="default-daterange">
<input type="text" name="default-daterange" class="form-control" value="" placeholder="click to select the date range" />
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
<!-- script -->
<script>
$("#default-daterange").daterangepicker({
opens: "right",
format: "MM/DD/YYYY",
separator: " to ",
startDate: moment().subtract("days", 29),
endDate: moment(),
minDate: "01/01/2022",
maxDate: "12/31/2022",
}, function (start, end) {
$("#default-daterange input").val(start.format("MMMM D, YYYY") + " - " + end.format("MMMM D, YYYY"));
});
</script>
<!-- required files -->
<link href="../assets/plugins/select2/dist/css/select2.min.css" rel="stylesheet" />
<script src="../assets/plugins/select2/dist/js/select2.min.js"></script>
<!-- html -->
<select class="default-select2 form-control">
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
</select>
<!-- multiple selection -->
<select class="multiple-select2 form-control" multiple>
...
</select>
<!-- script -->
<script>
$(".default-select2").select2();
$(".multiple-select2").select2({ placeholder: "Select a state" });
</script>
<!-- required files -->
<link href="../assets/plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.css" rel="stylesheet" />
<script src="../assets/plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.js"></script>
<!-- html -->
<input type="text" class="form-control" id="datepicker-autoClose" />
<!-- script -->
<script>
$("#datepicker-autoClose").datepicker({
todayHighlight: true,
autoclose: true
});
</script>
<!-- required files -->
<link href="../assets/plugins/select-picker/dist/picker.min.css" rel="stylesheet" />
<script src=".。/assets/plugins/select-picker/dist/picker.min.js"></script>
<!-- html -->
<select class="selectpicker form-control" id="ex-search" multiple>
...
</select>
<!-- script -->
<script>
$('#ex-search').picker({ search: true });
</script>
<!-- required files -->
<link href="../assets/plugins/ion-rangeslider/css/ion.rangeSlider.min.css" rel="stylesheet" />
<script src="../assets/plugins/ion-rangeslider/js/ion.rangeSlider.min.js"></script>
<!-- html -->
<input type="text" id="default_rangeSlider" name="default_rangeSlider" value="" />
<!-- script -->
<script>
$("#default_rangeSlider").ionRangeSlider({
min: 0,
max: 5000,
type: "double",
prefix: "$",
maxPostfix: "+",
prettify: false,
hasGrid: true,
skin: "big" // big | flat
});
</script>
<!-- required files -->
<link href="../assets/plugins/spectrum-colorpicker2/dist/spectrum.min.css" rel="stylesheet" />
<script src="../assets/plugins/spectrum-colorpicker2/dist/spectrum.min.js"></script>
<!-- html -->
<input type="text" value="#007aff" class="form-control" id="colorpicker-default" />
<!-- script -->
<script>
$("#colorpicker-default").spectrum({
showInput: true
});
</script>
<!-- required files -->
<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">
<input id="timepicker" type="text" class="form-control" />
<span class="input-group-text input-group-addon">
<i class="fa fa-clock"></i>
</span>
</div>
<!-- script -->
<script>
$("#timepicker").timepicker();
</script>
<!-- html -->
<input type="text" class="form-control" id="jquery-autocomplete" />
<!-- script -->
<script>
$("#jquery-autocomplete").autocomplete({
source: ["ActionScript", "AppleScript", "Asp", "BASIC", "C"]
});
</script>
<!-- required files -->
<script src="../assets/plugins/jquery.maskedinput/src/jquery.maskedinput.js"></script>
<!-- html -->
<input type="text" class="form-control" id="masked-input-date" />
<!-- script -->
<script>
$("#masked-input-date").mask("99/99/9999");
</script>
<!-- required files -->
<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>
<!-- html -->
<ul id="jquery-tagIt-default">
<li>Tag1</li>
<li>Tag2</li>
</ul>
<!-- script -->
<script>
$("#jquery-tagIt-default").tagit({
availableTags: ["c++", "java", "php", "javascript", "ruby", "python", "c"]
});
</script>
<!-- required files -->
<script src="../assets/plugins/clipboard/dist/clipboard.min.js"></script>
<!-- html -->
<div class="input-group">
<input id="clipboard-default" type="text" class="form-control" value="https://github.com/zenorocha/clipboard.js.git" />
<button class="btn btn-dark" type="button" data-toggle="clipboard" data-clipboard-target="#clipboard-default"><i class="fa fa-clipboard"></i></button>
</div>
<!-- script -->
<script>
var clipboard = new ClipboardJS("[data-toggle='clipboard']");
clipboard.on("success", function(e) {
$(e.trigger).tooltip({
title: "Copied",
placement: "top"
});
$(e.trigger).tooltip("show");
setTimeout(function() {
$(e.trigger).tooltip("dispose");
}, 500);
});
</script>