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