Start and end datepickers

You can dynamically set those values, or dispose and init the Datepicker again with different options.

Here's my suggestion from preventing starting date to be later than the ending date, and opposite. https://mdbootstrap.com/snippets/standard/m-duszak/2950484#js-tab-view

Thanks, @Michał Duszak! I expanded the JS a bit to hit my other requirements and think it's working ok now. Appreciate all your help!

HTML

<div class="container">
    <form>
        <div class="row">
            <div class="col">
                <div class="form-outline datepicker-startdate" data-mdb-format="mmm dd, yyyy">
                    <input type="text" class="form-control" id="startDate" />
                    <label for="startDate" class="form-label">Select starting date</label>
                </div>
            </div>
            <div class="col">
                <div class="form-outline datepicker-enddate" data-mdb-format="mmm dd, yyyy">
                    <input type="text" class="form-control" id="endDate" />
                    <label for="endDate" class="form-label">Select ending date</label>
                </div>
            </div>
        </div>
        <div class="row text-center justify-content-center">
            <div class="col-2 text-center">
                <button type="submit" class="btn btn-primary btn-block mb-4">Submit</button>
            </div>
        </div>
    </form>
</div>

JS

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 notSaturday = date.getDay() !== 6;
  const notSunday = date.getDay() !== 0;
  const isBeforeEnd = date < Date.parse(datepickerWithFilterEndingInput.value || new Date());
  const isAfterBeginning = date > new Date(2021,0,1);

  return notSaturday && notSunday && isBeforeEnd && isAfterBeginning;
}

const filterFunctionForEndingDate = (date) => {
  const notSaturday = date.getDay() !== 6;
  const notSunday = date.getDay() !== 0;
  const isBeforeEnd = date < new Date();
  const isAfterStart = date > Date.parse(datepickerWithFilterStartingInput.value || new Date(2021,0,1));

  return notSaturday && notSunday && isBeforeEnd && isAfterStart;
}

let starting = new mdb.Datepicker(datepickerWithFilterStarting, { filter: filterFunctionForStartingDate });
let ending = new mdb.Datepicker(datepickerWithFilterEnding, { 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 });
})

let today = new Date();
today.setHours(0,0,0,0);
datepickerWithFilterEndingInput.value = today.toLocaleString('en-CA', {month:'short', day:'numeric', year:'numeric'}).replace(".","");

let yesterday = new Date()
yesterday.setDate(yesterday.getDate() - 1)
while (yesterday.day == 0 || yesterday.day == 6) { yesterday.setDate(yesterday.getDate() - 1) }
datepickerWithFilterStartingInput.value = yesterday.toLocaleString('en-CA', {month:'short', day:'numeric', year:'numeric'}).replace(".","");