calculate two calendar pickers in days {not working}

Ask the community
,
1

Hello,
I’m trying to create two calendar pickers that calculate how many days there. have I set this up incorrectly ???

2

Please share you code in a code block in order to get assistance.

3

There you go:

$w.onReady(() => {
 const datePickerStart = $w("#datePicker1") //Change this to your Date Picker ID with start date
 const datePickerEnd = $w("#datePicker2")//Change this to your Date Picker ID with end date
 const textDateDifference = $w("#textDateDifference")//Change this to your text element

 let dateDifference = getDateDifference(datePickerStart.value, datePickerEnd.value)

    updateDateElement(dateDifference, textDateDifference.text) //Updates text element at start

    datePickerStart.onChange(() => {
 let newDateDifference = getDateDifference(datePickerStart.value, datePickerEnd.value)
        updateDateElement(newDateDifference, textDateDifference.text) //Updates text element at Date Picker Start Date change
 })

    datePickerEnd.onChange(() => {
 let newDateDifference = getDateDifference(datePickerStart.value, datePickerEnd.value)
        updateDateElement(newDateDifference, textDateDifference.text) //Updates text element at Date Picker End Date change
 })
})

//Function that gets the difference between a Start Date and an End Date and returns it in days
function getDateDifference(dateStart, dateEnd) { 
 let dateDiff = dateEnd - dateStart
 const daysDiff = Math.floor(dateDiff/86400000)
 return daysDiff
}

//Function to update an text element with the value you want, if you want to update an input box, you just change the element you want
function updateDateElement(value, element) {
    element = value.toString()
}
4

Have some experience with dates. Could you tell us exactly WHAT is not working?

5

Do I have added the two date pickers to my page, (they match the right #names too) but the the text Isn’t showing the calculation of how many days it is. is there a certain way you got to set the text up ?

6

Do I leave the text element blank or put any “” on it ?

7

@tobymcvittie you just need to see what is the ID of the element you created (mine was $w(“#textDateDifference”) ), and change it to yours. If you don’t know how to do it, take a screenshot of the selected text element and show us.

8

You need to show me your code and the event handler for the text element . This code is working fine in my test setup.