A JavaScript component for choosing date ranges, dates and times. Plugin page. 

<!-- Css --><link rel="stylesheet" href="vendors/datepicker/daterangepicker.css" type="text/css"><!-- Javascript --><script src="vendors/datepicker/daterangepicker.js"></script>
Single Date Picker 
<input type="text" name="daterangepicker" class="form-control">
$('input[name="daterangepicker"]').daterangepicker({  singleDatePicker: true,  showDropdowns: true});
Simple Date Range Picker 
<input type="text" name="daterangepicker" class="form-control">
$('input[name="daterangepicker"]').daterangepicker();
Simple Date Range Picker With a Callback 
<input type="text" name="daterangepicker" class="form-control">
$('input[name="daterangepicker"]').daterangepicker({    opens: 'left'}, function (start, end, label) {    swal("A new date selection was made", start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'), "success")});
Date Range Picker With Times 
<input type="text" name="datetimes" class="form-control">
$('input[name="datetimes"]').daterangepicker({    timePicker: true,    startDate: moment().startOf('hour'),    endDate: moment().startOf('hour').add(32, 'hour'),    locale: {        format: 'M/DD hh:mm A'    }});
Input Initially Empty 
<input type="text" name="datefilter" class="form-control">
var datefilter = $('input[name="datefilter"]');datefilter.daterangepicker({    autoUpdateInput: false,    locale: {        cancelLabel: 'Clear'    }});datefilter.on('apply.daterangepicker', function(ev, picker) {    $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));});$('input.create-event-datepicker').daterangepicker({    singleDatePicker: true,    showDropdowns: true,    autoUpdateInput: false}).on('apply.daterangepicker', function(ev, picker) {    $(this).val(picker.startDate.format('MM/DD/YYYY'));});