Date & Time picker

<!-- Datepicker --> 
<input id="datepicker" width="276" value="12/08/2019"/>
<script>$("#datepicker").datepicker({ showOtherMonths: true });</script>

<!--Datetimepicker --> 
<input id="datetimepicker" width="312"/>
<script>$("#datetimepicker").datetimepicker({ footer: true, modal: true });</script>

<!--Timepicker--> 
<input id="timepicker" width="276"/>
<script>$("#timepicker").timepicker();</script>

Datepicker Range

<!-- basic -->
<input class="form-control" type="text" name="basic">
<script>
$("input[name="basic"]").daterangepicker({
  singleDatePicker: true,
  parentEl: ".main-content-body",
});
</script>

<!--dates-->
<input class="form-control" type="text" name="dates">
<script>
  $("input[name="dates"]").daterangepicker({
    parentEl: ".main-content-body",
  });
</script>

Date Range Picker With Times

<!-- datetimes -->
<input class="form-control" type="text" name="datetimes" />
<script>
$(function() {
  $("input[name="datetimes"]").daterangepicker({
    parentEl: ".main-content-body",
    timePicker: true,
    startDate: moment().startOf("hour"),
    endDate: moment().startOf("hour").add(32, "hour"),
    locale: {
      format: "M/DD hh:mm A"
    }
  });
});
</script>

Predefined Date Ranges

<div id="reportrange" class="btn btn-raised-primary">
  <i class="fa fa-calendar"></i>&nbsp;
  <span></span> <i class="fa fa-caret-down"></i>
</div>

<script>
$(function() {

    var start = moment().subtract(29, "days");
    var end = moment();

    function cb(start, end) {
        $("#reportrange span").html(start.format("MMMM D, YYYY") + " - " + end.format("MMMM D, YYYY"));
    }

    $("#reportrange").daterangepicker({
        parentEl: ".main-content-body",
        startDate: start,
        endDate: end,
        ranges: {
           "Today": [moment(), moment()],
           "Yesterday": [moment().subtract(1, "days"), moment().subtract(1, "days")],
           "Last 7 Days": [moment().subtract(6, "days"), moment()],
           "Last 30 Days": [moment().subtract(29, "days"), moment()],
           "This Month": [moment().startOf("month"), moment().endOf("month")],
           "Last Month": [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")]
        }
    }, cb);

    cb(start, end);

});
</script>