JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<input type="text" class="datepicker" id="from" value="from">
<input type="text" class="datepicker" id="to" value="to">
JavaScript
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth();
var day = date.getDate();
var date = new Date(year - 18, month, day);
var minOne = new Date(year, month, day - 1);
var maxDate;
$('#from').datepicker({
autoClose : true,
format : 'dd mmm yyyy',
yearRange : 1,
minDate: date,
maxDate: minOne,
defaultDate: minOne,
setDefaultDate:minOne,
onSelect: function() {
var toYear = this.date.getFullYear();
var toMonth = this.date.getMonth();
var toDay = this.date.getDate();
maxDate = new Date(toYear, toMonth, toDay + 9);
$("#to").datepicker({
format : 'dd mmm yyyy',
defaultDate: maxDate,
setDefaultDate:maxDate
})
}
});
$("#to").datepicker({
autoClose : true,
format : 'dd mmm yyyy',
defaultDate: maxDate,
setDefaultDate:maxDate,
})