1 css

              <link rel="stylesheet" href="public/admin/plugins/daterangepicker/daterangepicker.css">
              

2. js

                <script src="public/admin/plugins/moment/moment.min.js"></script>
                <script src="public/admin/plugins/daterangepicker/daterangepicker.js"></script>

              

3. script

      

 $(function () {
    $('.daterange-btn').daterangepicker(
        {
          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')],
            'Tomorrow'   : [moment().add(1, 'days'), moment().add(1, 'days')],
            'Next 7 Days'   : [moment().add(1, 'days'), moment().add(7, 'days')],
            'Next 30 Days'   : [moment().add(1, 'days'), moment().add(30, 'days')],
          },
          autoUpdateInput: false, 
          //startDate: moment().subtract(29, 'days'),
          //endDate  : moment(),
          locale: {
            format: 'DD/MM/YYYY',                             
          }
          
        },
        function (start, end) {
          //console.log($(this));
          //$('.daterange-btn').val(start.format('MM-DD-YYYY') + ' :: ' + end.format('M-D-YYYY'));
          //$('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'))
        }
      ).on("apply.daterangepicker", function (e, picker) {
           picker.element.val(picker.startDate.format(picker.locale.format)+'-'+picker.endDate.format(picker.locale.format));
      });

});

$(".date_clear_btn").click(function(){                  
    $(this).parent().find('.daterange-btn').val('');
});

4. in html

<button type="button" class="btn btn-default float-right" id="daterange-btn1" class="daterange-btn">
                      <i class="far fa-calendar-alt"></i> Date range picker
                      <i class="fas fa-caret-down"></i>
                    </button>

      <input type="" name="date" id="daterange" class="daterange-btn" >



      OR


      <input type="text" name=""  class="form-control  daterange-btn " readonly  >
      <span class="date_clear_btn" style="position:absolute;top:35px;right:20px">Clear</span>