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'));});