MaxDate

Ask the community
,
1

Hello,
I need help …
I have 2 DatePickers in which certain dates are deactivated according to a database :

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 (“#datePicker1”).disabledDates = disabledDates
$w (“#datePicker2”).disabledDates = disabledDates
}
} )

I use a 2nd code so that the date selected in DatePicker1 is the minimum date that can be selected in DatePicker2:

export function datePicker1_change(event) {
let firstTime = event.target.value.getTime();
let timeTwoDaysHence = firstTime + (1 * 86400000) ;
let dateTwoDaysHence = new Date(timeTwoDaysHence) ;
$w(‘#datePicker2’).minDate = dateTwoDaysHence ;

Now I would like the maximum selectable date in DatePicker2 to be the first deactivated date after the selected date in datePicker1. I hope to have been clear…
Is it possible to maxDate?
I have tried a multitude of formulas but cannot do it … can someone help me?

2

Yes it is possible:

const disabledDates = $w('#datePicker2').disabledDateRanges.map(e => new Date(e.startDate).getTime());
$w('#datePicker2').maxDate = new Date(disabledDates.find(e => firstTime < e));
3

Thank you very much for your feedback, but it’s not working.

I added your code as below:

export function datePicker1_change_1 ( event ) {
let firstTime = event . target . value . getTime ();
let timeTwoDaysHence = firstTime + ( 1 * 86400000 ) ;
let dateTwoDaysHence = new Date ( timeTwoDaysHence ) ;

 $w ( '#datePicker2' ). minDate  =  dateTwoDaysHence  ; 

   **const**  disabledDates  =  $w ( '#datePicker2' ). disabledDateRanges . map ( e  =>  **new**  
    Date ( e . startDate ). getTime ());  
 $w ( '#datePicker2' ). maxDate  =  **new**  Date ( disabledDates . find ( e  =>  firstTime  <  e ));

}

Am I jotting it down in the wrong place?

4

@caromagagna I can’t tell at first glance. Try to add console.log 's after each row and see where the error is.
But I think that in line 2 (refers to your last comment) you should use new Date().
Maybe something like:

let firstTime = new Date($w('#datePicker1').value).getTime();
5

@jonatandor35
I would have liked to get out of it on my own but no matter how hard I tried, it didn’t work…
Here is the error message displayed:

TypeError: Cannot read properties of undefined (reading ‘map’)

And here is my full code :

import wixData from ‘wix-data’ ;
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  ( "#datePicker1" ). disabledDates  =  disabledDates  
$w  ( "#datePicker2" ). disabledDates  =  disabledDates    
    }

});

export function datePicker1_change_1 ( ) { console . log
let firstTime = new Date ( $w ( ‘#datePicker1’ ). value ). getTime (); console . log
let timeTwoDaysHence = firstTime + ( 3 * 86400000 ); console . log
let dateTwoDaysHence = new Date ( timeTwoDaysHence ); console . log
$w ( ‘#datePickerdepart’ ). minDate = dateTwoDaysHence ; console . log

 **const**  disabledDates  =  $w ( '#datePicker2' ). disabledDateRanges . map ( e  =>  **new**  Date  ( e . startDate ). getTime ()); console . log

$w ( ‘#datePicker2’ ). maxDate = new Date ( disabledDates . find ( e => firstTime < e )); console . log

}

Am I forgetting something?

6

@caromagagna It looks like you have no disabled dates.
Try to see if you add:
Before the const disabledDates . what does it log?
I suggest:

  1. Get rid of the console.log (last line)

  2. Make sure there’re disabled dates.

  3. Currently, you’re using a depreciated method at the beginning:

//DEPRECIATED 
        $w ("#datePicker1").disabledDates = disabledDates 
           $w ("#datePicker2").disabledDates = disabledDates

Instead you should use disabledDateRanges to set these dates.

7

@jonatandor35 hello,

Hello,
I appreciate your help, but it not works…

  1. I deleted console.log
  2. I confirm you that there are disabled dates
  3. I modified :
    $w (“#datePicker1”).disabledDateRange = disabledDates
    $w (“#datePicker2”).disabledDateRange = disabledDates

It still does not work.
By indicating disabledDateRange from the beginning, the disabled dates are no longer grayed out, the code no longer works at all.
To better understand, and if you want to watch, I enclose the link of my site (« réserver » page, disabled dates are August 11 and 12) :
https://casachill.wixsite.com/locationbarcares

I have also just noticed that the price calculation is not done online (it displays Nan) while it works in “preview” mode. I do not understand anything anymore ! I will create another post about this.

Thanks in advance if you have a solution for me.