Topic: Set min and max dates on Datepicker using javascript
Expected behavior I am migrating from MDB4 to MDB5 and use a number of datepickers where I set dates based on date selected in another datepicker (eg when selecting a date range, set min date from datepicker to the date selected in the datepicker), (eg set the max date to today's date where where the use case dictates that it should not be possible to select a date in the future)
Actual behavior I cannot find any documentation re how to achieve this. I have looked at the following documentation (https://mdbootstrap.com/docs/standard/forms/datepicker/#docsTabsAPI) which seems to indicate that it is possible to achieve using the Options. But I can't find how to use the options in Javascript
Resources (screenshots, code snippets etc.)
Hi,
I had the same issue and found a post with a working solution. I've included the code I'm using below in case you haven't written anything yourself.
const myDateRangeSelect = document.getElementById('date-range')
myDateRangeSelect.addEventListener('valueChange.mdb.select', (e) => {
checkDateOption(e.target.value);
})
const datepickerWithFilterStarting = document.querySelector('.datepicker-startDate');
const datepickerWithFilterEnding = document.querySelector('.datepicker-endDate');
const datepickerWithFilterStartingInput = datepickerWithFilterStarting.querySelector('input');
const datepickerWithFilterEndingInput = datepickerWithFilterEnding.querySelector('input');
const filterFunctionForStartingDate = (date) => {
const isBeforeEnd = date < Date.parse(datepickerWithFilterEndingInput.value || new Date());
const isAfterBeginning = date > new Date(2017, 0, 0);
return isBeforeEnd && isAfterBeginning;
}
const filterFunctionForEndingDate = (date) => {
const isBeforeEnd = date < new Date();
const isAfterStart = date > Date.parse(datepickerWithFilterStartingInput.value || new Date(2017, 0, 0));
return isBeforeEnd && isAfterStart;
}
let starting = new mdb.Datepicker(datepickerWithFilterStarting, {
min: new Date(2017, 0, 1),
filter: filterFunctionForStartingDate});
let ending = new mdb.Datepicker(datepickerWithFilterEnding, {
max: new Date(),
filter: filterFunctionForEndingDate});
datepickerWithFilterStarting.addEventListener('dateChange.mdb.datepicker', (e) => {
ending.dispose();
ending = new mdb.Datepicker(datepickerWithFilterEnding, {filter: filterFunctionForEndingDate});
})
datepickerWithFilterEnding.addEventListener('dateChange.mdb.datepicker', (e) => {
starting.dispose();
starting = new mdb.Datepicker(datepickerWithFilterStarting, {filter: filterFunctionForStartingDate});
})
Michał Duszak staff commented 3 years ago
@AJEsler2019 did it work for you?
AJEsler2019 pro premium priority commented 3 years ago
Haven't had a chance to incorporate as yet. Moved on to the reporting screen based off selected dates including SQL component as I can build and test these components prior to incorporating the date filtering capability. Will update once I have come back to this. @parson thanks for your help!!
AJEsler2019 pro premium priority commented 3 years ago
Hi Michal I have now tried this and am getting the following error: mdb.Datepicker is not a constructor I have a similar issue with "new mdb.MultiRangeSlider" Could I have a missing library or similar? The datepicker works fine apart from setting the date range.
Michał Duszak staff commented 3 years ago
Hello, could your recreate this ''is not a constructor'' issue in a snippet? Try console.log(mdb) and see if there are Datepicker and MultiRangeSlider defined.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 3.9.0
- Device: PC
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes