title: Date picker daterange in laravel
body: <p>In my laravel project, I have two datepickers which include <strong>from</strong> and <strong>to</strong> dates.</p>
  
  <p>When the <strong>from date</strong> is selected, I want to <strong>disable</strong> the dates before the from date's and let the user to select the <strong>to date</strong> after the selected from date. </p>
  
  <p>In briefly, from date is <strong>earlier date</strong> and <strong>to date</strong> should be a later date.</p>
  
  <p>Here is the code in blade.php</p>
  
  <pre><code>&lt;div class="form-group"&gt;
  &lt;i class="fa fa-calendar"&gt;&lt;/i&gt;&lt;label for="date"&gt;From:&lt;/label&gt;&lt;input type="text" class="datefrom" id="datefrom" name="datefrom" value="{{ old('datefrom') }}" /&gt;
  &lt;i class="fa fa-calendar"&gt;&lt;/i&gt;&lt;label for="date"&gt;To:&lt;/label&gt;&lt;input type="text" class="dateto" id="dateto" name="dateto" value="{{ old('dateto') }}" /&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  $(function() {
    $('.datefrom').daterangepicker({
      singleDatePicker: true,
      showDropdowns: true,
      minYear: 1985,
      autoUpdateInput: false,
      maxDate: new Date,
      maxYear: parseInt(moment().format('YYYY'),10),
      locale: {
                  format: 'DD-MM-YYYY'
              } 
    }, function(start, end, label) {
      var years = moment().diff(start, 'years');
    },
  
      $('.dateto').datepicker(
              "change", {
              minDate: new Date($('.datefrom').val())
          });
  });
  
  $(function() {
    $('.dateto').daterangepicker({
      singleDatePicker: true,
      showDropdowns: true,
      minYear: 1985,
      autoUpdateInput: false,
      maxDate: new Date,
      maxYear: parseInt(moment().format('YYYY'),10),
      locale: {
                  format: 'DD-MM-YYYY'
              } 
    }, function(start, end, label) {
      var years = moment().diff(start, 'years');
    },
  
     $('.datefrom').datepicker(
              "change", {
              maxDate: new Date($('.dateto').val())
          });
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>I want the functionality as [<a href="http://jsfiddle.net/jjLhca9o/5/][1]" rel="nofollow noreferrer">http://jsfiddle.net/jjLhca9o/5/][1]</a>. Though I tried by using ids and classes in many ways I failed. May I know where I have gone wrong.</p>
  
  <p>I want to validate the Date picker as well. But, datepicker takes the default date as current date. As a solution for that, I suggested to keep the date field empty before input any date. I tried with <code>autoUpdateInput: false</code>. When I add it to the script, the date field keeps empty though I selected a date from the date picker.</p>
  
  <p>I am new to coding. Please help. Thank you very much. </p>