I'm new to javascript and using Materialize as CSS framework.
I'm implementing two datepickers for a start and end date. I'm struggling with setting the maxDate and minDate dynamically.
maxDate for the start datepicker shouldn't exceed the date of the end datepicker if the latter is selected.
minDate for the end datepicker should not be below the date of the start datepicker if the latter is selected.
I wonder how I would do that with Materialize version 1.0.0.
Here is my code (which is not working):
<div class="container">
<div class="row">
<div class="col s12 m3"></div>
<div class="col s12 m6">
<h3>StartDate</h3>
<div class="input-field">
<input id="input_from" type="date" name="StartDate" class="datepicker">
</div>
<h3>EndDate</h3>
<div class="input-field">
<input id="input_to" type="date" name="EndDate" class="datepicker">
</div>
</div>
<div class="col s12 m3"></div>
</div>
</div>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
< script >
document.addEventListener('DOMContentLoaded', function () {
var start_options = {
setDefaultDate: true,
autoClose: false,
showClearBtn: true,
format: 'dd/mm/yyyy',
disableWeekends: true,
showDaysInNextAndPreviousMonths: true,
firstDay: 1
};
var end_options = {
setDefaultDate: true,
autoClose: false,
showClearBtn: true,
format: 'dd/mm/yyyy',
disableWeekends: true,
showDaysInNextAndPreviousMonths: true,
firstDay: 1,
};
let StartDate = document.querySelector('#input_from');
let EndDate = document.querySelector('#input_to');
let start_instance = M.Datepicker.init(StartDate, start_options);
let end_instance = M.Datepicker.init(EndDate, end_options);
if (start_instance.date) {
end_options.minDate = start_instance.date;
};
if (end_instance.date) {
start_options.maxDate = end_instance.date;
}
})
</script>