I am trying to disable past dates in input type="date". I can able to restrict previous dates in date picker. But when I type any previous dates in HTML date picker, I can save data even the date is already done (For example, I type 12/08/2020)

$(document).ready(function() { //DISABLED PAST DATES IN APPOINTMENT DATE
  var dateToday = new Date();
  var month = dateToday.getMonth()   1;
  var day = dateToday.getDate();
  var year = dateToday.getFullYear();

  if (month < 10)
    month = '0'   month.toString();
  if (day < 10)
    day = '0'   day.toString();

  var maxDate = year   '-'   month   '-'   day;

  $('#txt-appoint_date').attr('min', maxDate);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" id="txt-appoint_date" />

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can disable keyboard onkeydown event.

$(document).ready(function() { //DISABLED PAST DATES IN APPOINTMENT DATE
  var dateToday = new Date();
  var month = dateToday.getMonth()   1;
  var day = dateToday.getDate();
  var year = dateToday.getFullYear();

  if (month < 10)
    month = '0'   month.toString();
  if (day < 10)
    day = '0'   day.toString();

  var maxDate = year   '-'   month   '-'   day;

  $('#txt-appoint_date').attr('min', maxDate);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" id="txt-appoint_date" onkeydown="return false"/>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>