Disable dates in the past in datepicker

January 13, 2021, at 04:40 AM

Here I have implemented the code which disables previous dates of current date in "start date "datepicker and disables previous dates of chosen "start date" in "end date" datepicker. it was working very well but all of the sudden it does not disable previous dates of current date in "start date "datepicker.

view:

<div class="form-group col-md-4">
  <label for="pwd">Start Date</label>
  <input type="date" class="form-control" id='Sdate' name='Sdate' min="" value="">
  <div class="alert-danger"><?php echo form_error('Sdate'); ?></div>
</div>
<div class="form-group col-md-4">
  <label for="pwd">End Date</label>
  <input type="date" class="form-control" id='Edate' name='Edate' value="<?php echo set_value('Edate'); ?>">
  <div class="alert-danger"><?php echo form_error('Edate'); ?></div>
</div>

script:

$(document).ready(function(){

 var today = new Date();
 var sdate = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+(today.getDate() < 10 ? '0'+today.getDate() : today.getDate());
 $('#Sdate').prop('min', sdate);
 $('#Sdate').on('change', function(){
    $('#Edate').prop('min', $(this).val() );
 });
});

Answer 1

your variable sdate returns '2021-1-11' but should be '2021-01-11'

just change your code slightly, to add a leading 0for all month <10

$(document).ready(function() {
  const options1 = {
    year: 'numeric',
    month: 'numeric',
    day: 'numeric'
  };
  var today = new Date();
  y = today.getFullYear()
  m = today.getMonth() + 1
  m = m < 10 ? '0' + m : m;
  d = today.getDate()
  d = d < 10 ? '0' + d : d;
  sdate = y + '-' + m + '-' + d
  $('#Sdate').prop('min', sdate);
  $('#Sdate').on('change', function() {
    $('#Edate').prop('min', $(this).val());
  });
});

see a working jsfiddle here, dates in the past are now disabled