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>