DisableDateRanges

Ask the community
,
1

I’m back again for help…
I have 2 DatePickers in which certains dates are disabled thanks to a database.
I am using some code to make the date selected in the DatePicker1 the minimum date that can be selected in the DatePicker2.
I now want to use maxDate so that the maximum date selectable in DatePicker2 is the first disabledDates after the date selected in datePicker1.
Here is my code:

import wixData from 'wix-data';
$w.onReady(function () {
//CODE DATES INDISPONIBLES BASE DE DONNEE
wixData.query ("News") 
. eq ("dispo", true ) 
. limit (1000) 
. find () 
. then ((res)  =>  { 
    let items = res.items ; 
    if (items.length > 0)  { 
        let disabledDates = [ ] ; 
        items.forEach (e => { 
        disabledDates.push (e.date) ;      
    } ) 
        $w ("#datePickerarrivee").disabledDates = disabledDates
    $w ("#datePickerdepart").disabledDates = disabledDates
        }     
});
});
  export function datePickerarrivee_change_1(event) {  
     let firstTime = new Date($w('#datePickerarrivee').value).getTime(); 
     let timeTwoDaysHence = firstTime + (3 * 86400000);
     let dateTwoDaysHence = new Date(timeTwoDaysHence);
     $w('#datePickerdepart').minDate = dateTwoDaysHence;   
 const disabledDates = $w('#datePickerdepart').disabledDateRanges.map(e => new Date(e.startDate).getTime());
$w('#datePickerdepart').maxDate = new Date(disabledDates.find(e => firstTime < e));
}

But maxDate doesn’t work, and I get the following error for the line of code:
const disabledDates = $w(‘#datePickerdepart’).disabledDateRanges.map(e => new Date (e.startDate).getTime());
TypeError: Cannot read properties of undefined (reading ‘map’)
I have dates checked in my database and which are grayed out in the datespickers but which do not seem to be recognized.
I realize that disabledates is deprecated and that disabledateRanges should be used. Does the problem come from the 1st part of the code?
I tried replacing disabledates with disabledDateRanges:
$w (“#datePickerarrivee”).disabledDateRanges = disabledDates
$w (“#datePickerdepart”).disabledDateRanges = disabledDates
but dates are no longer disabled in datepickers.
Is the transition from disabledates to disabledateRange a problem?
If anyone can help me, I would greatly appreciate it!

2

You really need to add a dataset onReady following the page onReady to make sure your collection is ready to be accessed by the query -

$w.onReady( function() {
$w(“news”).onReady(() => {
.
.
});
});

3

Hi Colin,
I added to my code : $w ( ‘news’ ). onReady (() => {
but the error message remains the same: TypeError: Cannot read properties of undefined (reading ‘map’).
My database loads correctly since the first part of my code works.
What is wrong with the code ?
const disabledDates = $w ( ‘#datePickerdepart’ ). disabledDateRanges . map ( e => new Date ( e . startDate ). getTime ());
$w ( ‘#datePickerdepart’ ). maxDate = new Date ( disabledDates . find ( e => firstTime < e ));