<!-- Css --><link rel="stylesheet" href="vendors/datepicker/daterangepicker.css" type="text/css"><!-- Javascript --><script src="vendors/datepicker/daterangepicker.js"></script>

<input type="text" name="daterangepicker" class="form-control">

$('input[name="daterangepicker"]').daterangepicker({singleDatePicker:true,showDropdowns:true});

<input type="text" name="daterangepicker" class="form-control">

$('input[name="daterangepicker"]').daterangepicker();

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

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