Topic: Start and end datepickers

Colin S free asked 1 year ago


I'm setting up two datepickers to allow a user to specify a start and end date. I'd like all dates to be restricted to weekdays after a specified start date, and before or equal to today. I'd also like to enforce the start date being strictly before the end date, and provide default entries of today for the end date and the prior weekday for the start date.

Can you please suggest how to modify my existing code in order to add the default values and restrict the end date to be after the start date? Thank you!

HTML

<div class="container">
<form>
    <div class="row">
        <div class="col">
            <div class="form-outline datepicker-with-filter1" 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-with-filter2" 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>
</form>

CSS

const datepickerWithFilter = document.querySelector('.datepicker-with-filter1');
const datepickerWithFilter2 = document.querySelector('.datepicker-with-filter2');

var minDate = new Date(2021,1,1);

const filterFunction = (date) => {
  const notSaturday = date.getDay() !== 6;
  const notSunday = date.getDay() !== 0;
  const isBeforeToday = date < new Date();
  const isAfterStart = date > new Date(2021,1,1);

  return notSaturday && notSunday && isBeforeToday && isAfterStart;
}

new mdb.Datepicker(datepickerWithFilter, { filter: filterFunction });
new mdb.Datepicker(datepickerWithFilter2, { filter: filterFunction });

Colin S free answered 1 year ago


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(".","");

Michał Duszak staff answered 1 year ago


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



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: 3.2.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No