Disable date selection by setting the current date - DatePicker

Question

as written in the title I have implemented two DatePicker. Via MDBootstrap: (https://mdbootstrap.com/docs/jquery/forms/date-picker/).

My intent was to not allow the user to select a date that is before the current date.

I have searched in their support, but no command corresponds to what interests me.

In addition, what I would like the second DatePicker, can not select a date that occurred before the date that is selected in the first DatePicker.

The code is here on JSFiddle .

The part of Javascript, you can call it how you want for the test.

Thank you all.

Answer 1

You can add something like this make your datepicker disable dates before current date

$('.datepicker').pickadate({ 
  min: new Date(),
});

It seems like if your second date picker reacts with the changes of the first one then there might be the name conflict.

Answer 2

Try adding

minDate: new Date()

into your DatePicker initialiser function

Answer 3

You can try with min and max property of MDBootstrap. here i am using min function to achieve your task.

<div class="md-form">
  <input placeholder="Selected date" type="text" id="date-picker-example" class="form-control datepicker">
  <input placeholder="Selected date" type="text" id="date-picker-example2" class="form-control">
   <label for="date-picker-example">Try me...</label>
</div>

// Data Picker Initialization
$('.datepicker').pickadate({
  min : new Date(),
  onClose: function(){
       $('#date-picker-example2').pickadate({
         min : $('.datepicker').val()
       })
   }
});

you can see example here

for more options you can refer this document