Topic: Set datepicker min date from another datepicker
Hi everyone, I have two datepickers that should work together as a From -> To range where the max date is always the current date. I would like that when I set a date in the "from" datepicker, in the second (the "to" datepicker) that date would be set as a minimum date. I also would like that if set a date in the "to", that date should be set as a max date in the "from" datepicker.
<div class="form-row">
<div class="col-4">
<div id="date-picker-from" class="md-form input-with-post-icon datepicker" inline="true">
<input placeholder="Select a date" type="text" id="dateFrom" class="form-control">
<label for="dateFrom">From</label>
<i class="fas fa-calendar input-prefix"></i>
</div>
</div>
<div class="col-4">
<div id="date-picker-to" class="md-form input-with-post-icon datepicker" inline="true">
<input placeholder="Select a date" type="text" id="dateTo" class="form-control">
<label for="dateTo">To</label>
<i class="fas fa-calendar input-prefix"></i>
</div>
</div>
</div>
Now, I tried to achieve it with this code, but it doesn't work and I think it's because I didn't intercept the right event.
$(document).ready( () => {
$('.datepicker').datepicker({
max: true,
inline: true
});
$("#date-picker-from").datepicker().on('changeDate', (selected) => {
var minDate = new Date(selected.date.valueOf());
$('#date-picker-to').datepicker('setStartDate', minDate);
});
$("#date-picker-to").datepicker().on('changeDate', (selected) => {
var minDate = new Date(selected.date.valueOf());
$('#date-picker-from').datepicker('setEndDate', minDate);
});
})
Is changeDate an event in mdb datepicker? Or where am I wrong? I tried to initialize both of them individually, without the general initialization, but it's not that.
Thanks for the attention
Marcin Luczak staff answered 4 years ago
Hi,
There is no such event as changeDate
. You can check all of Datepicker's events in our events section https://mdbootstrap.com/docs/jquery/forms/date-picker1/#events.
The functionality you want to achieve is described in detail and supported by live preview and code snippet in the relevant section of our documentation for Datepicker https://mdbootstrap.com/docs/jquery/forms/date-picker1/#to-and-from
Regards, Marcin
Zxcid commented 4 years ago
Oh ok, I needed to look for the documentation of the previous versions. That wasn't obvious actually cause I have the v4.19.1 The most recent page lacks few parts of that documentation.
Anyway, thank you so much for your help, that's exactly what I needed.
Zx.
Marcin Luczak staff commented 4 years ago
Thank you for the information about the documentation. We will take a look at this.
Regards, Marcin
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.19.1
- Device: desktop
- Browser: chrome
- OS: win 10
- Provided sample code: No
- Provided link: No