Date Picker linked to different text content

Discussion Ask a question
,
1

Hi,

I would like to add to my wix site a calendar date picker whereby a user selects a date.

Depending on the date selected, text to appear which then appears below:

“This needs to be done by DD/MM/YY [6 months before date selected]”
“This should to be done by DD/MM/YY [3 months before date selected]”
“This should to be done by DD/MM/YY [1 month before date selected]”

The date in the text being a pre-determined setting of months/days before the date selected which I would choose/set.

Thank you for your suggestions / thoughts.

2

Ok so you mean that when a user selects any date in your calendar your code must check against what to determine what message should be shown?

Do you want to check if the selected date is 1, 3 or 6 month ahead and if not display the different messages?

3

Hi,

What I mean is that once a user has selected a date from the date picker, a text box below appears which says for instance:

“Sending Invitations should be done by [DATE dd/mmmmm/yyyy}”

whereby DATE = “let date = $w(”#myDatePicker").value and then subtract 6 months from that date picker selection etc;"

4

also by text box, I mean a whole separate text box below the date picker rather than text within the date picker element etc

5

Ok so when you have that just do…

var d = new Date($w("#myDatePicker").value);
var newDate = d.setMonth(d.getMonth() - 3);

That code will get a new date for you

$w("#messageText").text = "Sending invitations should be done by " + newDate.toLocaleDateString();

Hope it works, if it does and you are happy please mark this answer as TOP ANSWER

1 Like
6

Ok so I have put that code in the page code, and the both the date picker and text box have ID #myDatePicker and #messageText but I get error = newDate.LocaleDateString is not a function

7
  1. Click on the calendar and go to properties panel and under events select onChange och hit enter on your keyboard.
  2. Now Wix Code created a function for you that will execute when someone selects a date. Inside this function you will paste in my code from above.

After you done that paste in your whole Page Code here so I can see it.

8

hi, thank you for your help. so I used the code but changed the value before toLocaleDateString();:

// For full API documentation, including code examples, visit Velo API Reference - Wix.com
export function myDatePicker_change(event) {
var d = new Date($w(“#myDatePicker”).value);
var newDate = d.setMonth(d.getMonth() - 3);
var d1 = new Date($w(“#myDatePicker”).value);
var newDate1 = d1.setMonth(d1.getMonth() - 4);
var d2 = new Date($w(“#myDatePicker”).value);
var newDate2 = d2.setMonth(d2.getMonth() - 5);

$w("#messageText").text = "Sending invitations should be done by " + d.toLocaleDateString(); 
$w("#messageText2").text = "Sending flowers should be done by " + d1.toLocaleDateString() 
$w("#messageText3").text = "Sending RSVP should be done by " + d2.toLocaleDateString();

}

This seems to work fine.

Few questions:

  1. what happens if I want to subtract an amount of days rather than months?
  2. at the moment each text box has “text” “text2” in it which displays until a user selects date and it changes. how can I make it so the text boxes are blank and update/show only once a date is picked ?

Thank you for your help again