title: How to Clear Input for Bootstrap DateRangePicker Field
body: <p>Was using Bootstrap DateRangePicker Jquery plugin, and to help deal with manual entry issues, I made the date field readonly and used created ranges to it, from which the user should pick the one they want. Something like this..</p>
  <pre><code>// set datepicker
      function cb(start, end) {
              $('#daterange input').val(start.format('Do MMM YYYY') + ' - ' + end.format('Do MMM YYYY'));
      }
     
      $('#daterange').daterangepicker({
          autoApply: true,
          autoUpdateInput:true, 
          ranges: [
             'Today': [moment(), moment()],
             'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
             'This Week': [moment().startOf('week'), moment()],
             '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')]
          }
      }, cb);
  </code></pre>
  <p>
  The problem is, how do I clear the contents of the field, given that it is readonly and no button to do that exists on the interface of the datepicker?
  </p>
  <p>On the official website of dararange picker, they somehow provide a slight solution, which is that when the 'Cancel' button is clicked you can attach an event that clears the date field.</p>
  <pre><code>$('#daterange').daterangepicker({
  locale: { cancelLabel: 'Clear' }
  });  
  $('#daterange').on('cancel.daterangepicker', function(ev, picker) {
    //do something, like clearing an input
    $('#daterange').val('');
  });
  </code></pre>
  <p>But that  is not what I intend to do. Both Clear and Cancel and valid actions. So now, how do I go about it?</p>