Set min and max dates on Datepicker using javascript


Topic: Set min and max dates on Datepicker using javascript

AJEsler2019 pro premium priority asked 3 years ago

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.)


parson pro premium answered 3 years ago

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.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • 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