<!-- 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/2024",
    maxDate: "12/31/2024",
  }, function (start, end) {
    $("#default-daterange input").val(start.format("MMMM D, YYYY") + " - " + end.format("MMMM D, YYYY"));
  });
</script>