Using date picker master to populate today, tomorrow, the next day, etc

I’m trying to simulate a scheduling tool that uses current dates. Can I use a variation of [[DayofWeek]] or [[LVAR1.getDayofWeek()]] to do this? I’ve attached an example of how I’d like to set it up. Any help appreciated!!
dayofweek_example.rp (300 KB)

Hi breezybetty,

Just to clarify, you want to be able to select a date using the date picker and have it populate the schedule fields with the corresponding days of the week, correct? For example, if you pick today (3/16/2015) you want it to display “Monday, Tuesday, Wednesday” etc…?

It looks like you have the right idea here but the issue is coming from the order in which the value of the date is being taken from the date picker. For example, if you pick 3/16/2015 and then click the arrow button, it shows “Sunday” instead of “Monday”. If you were to manually type 3/16/2015 into another widget and use the “.GetDayOfWeek()” function on that text, it would correctly display “Monday”. However, if you typed “2015-03-16” it would get “Sunday” (if you’re in the US, at least). This seems to be what is happening with the date picker here; if you add a case to set the value of a variable to the value of the text on your “date” text field, you’ll see that the browser is storing the date as “2015-03-16”. Though the date is still right, the format is causing the system to spit out the wrong day of the week.

This looks like this may be a GMT issue. In JS, if all you feed the system is a date in the format of year-month-day, it pulls up midnight GMT for that specified date. So, 2015-03-16 pulls up midnight GMT for Monday, but the US is still several hours behind on Sunday. Because of this, when you use the .GetDayOfWeek() function to pull up the local day of the week in your time zone, you get Sunday. To fix this, you’ll want to add on as many hours that separates you from GMT so that you get the correct date when selecting a date from the date picker.

Try swapping out your function for this:

 [[(LVAR1.addhours(Now.getHours()).getDayOfWeek())]] 

That should allow you to use the date picker and still get the right day of the week. Hopefully that helps!

Alyssa - That worked! Thank you. What I still can’t figure out is how to use this formula to populate the ongoing days for tomorrow, the next day, etc. Can I add in (+1) somewhere?

Hi breezybetty,

Ah yes, sorry I forgot about that part! To set up the function for each of the following days, you’ll want to add 24 hours to the “Now.getHours()” function. For example, to get the value for “Tomorrow”, add 24 hours to the function that I provided last time:

 [[LVAR1.addHours(Now.getHours()+24).getDayOfWeek()]] 

To get “2 days from now” you’ll want to add 48 hours, for 3 days add 72, etc…

Alternatively, you could add an additional day using the “.addDays(days)” function, where “days” is the number of days that you want to add on. Here’s an example:

 [[LVAR1.addHours(Now.getHours()).addDays(1).getDayOfWeek()]] 

This will take the value of Today (now it’s Tuesday), and add an extra day to give you Wednesday. To get the value of two days from today (Thursday), simply change the “1” in “.addDays(1)” to “2”.

One thing that you’ll want to watch out for is to make sure that you redeclare the LVAR1 value when you’re writing the function. The new “set text” actions won’t automatically inherit the LVAR1 information, so you’ll want to make sure that you create LVAR1 and specify that it’s pulling the value from your date text field. Otherwise, when previewed in the browser the function will show up instead of the day of the week that you’re trying to get.

Hopefully that helps! :slight_smile:

1 Like

Alyssa - Thanks so much - I’m making headway. The last piece of my puzzle is to also have the date [[Month]]/[[Day]] written below the day of the week, but I’m having trouble coordinating that with the LVAR1 formula. Any suggestions?

So I was able to link the LVAR1 formula to also populate the date. However, I’ve run into a new issue. Because of the format that I need to use (mm/dd), the day is calculated independently from the month. This causes the day to start over but the month remains the same once you reach the end of the current month. Is there a layer of conditional logic that you would suggest to keep this from happening?

I’ve attached a series of screenshots to depict what I’ve describing.
Axure_error.docx (89.1 KB)






Hi again,

For this I think you’ll want to use conditions, as you mentioned. To do that, you’ll want to check if the date in the text field matches a certain day (e.g., 31) and then if that condition returns true, add a month for “Tomorrow”, “2 days after Today”, etc…

Here’s what the condition could look like:

To get the triggered case to add a month, you’ll want to use something like this:

 [[LVAR1.addHours(Now.getHours()).addDays(1).getDayOfWeek()]], [[LVAR1.addMonths(1).getMonth()]]/[[LVAR1.addHours(Now.getHours()).addDays(1).getDate()]] 

This code in particular would go on on the widget “Tomorrow”, since it adds one day to the selected date. It also adds 1 month to the selected month so if, for example, you selected 3/31/2015, it would display “Wednesday, 4/1” on the “Tomorrow” field. For the rest of the days, you’ll want to also add the method “.addMonths(1)” before the “.getMonth()” portion so that the subsequent widgets also display next month’s date.

The condition in the screenshot only works if the selected date is on the 31st of a month. For other months that don’t end in 31 you’ll want to make a separate condition that checks for that and then runs similar cases. Hopefully that helps!

I have some questions related to this topic.

I have a “from” date field and a “to” date field, if I format the text field as Date, it gives me the mm/dd/yyyy format I want and it has the clickable calendar, which is awesome (this is in chrome).

What I can’t figure out how to do is prepopulate the text fields. I’d like the default dates to be the current date for the “from” date field and one year from the current date in the “to” date field.

is there a way to do this?

Hi niki_h,

If you want the selected date to set the desired dates on your “from” and “to” widgets, then you’ll want to add an interaction that sets the text on those widgets to the value of the date that you picked. If you want the populated dates to retain the same format as shown in the date picker text field then you’ll want to go into the editor and do some work with the methods there. The reason for this is because though the date from the date picker displays as “mm/dd/yyyy”, when saved by the browser it flips it around.

Here’s how you would set it up if you wanted the date to show up as “mm/dd/yyyy”:

[[LVAR1.getMonth()]]/[[LVAR1.addHours(Now.getHours()).getDate()]]/[[LVAR1.getFullYear()]]

To add on a year, you’ll want to use this:

[[LVAR1.getMonth()]]/[[LVAR1.addHours(Now.getHours()).getDate()]]/[[LVAR1.addYears(1).getFullYear()]]

I’ve attached a sample file for you to take a look at. I hope that helps!
From and To Date Example.rp (68.2 KB)

1 Like

OMG, this is EXACTLY what I need!!!

Thank you SO much!!!

Hey Alyssa, I still don’t totally understand how it all works, but your date picker got me about 90% of where I needed to go, and it gave me enough information that I was able to figure out the last 10% on my own.

I’m posting my solution here in case it will help anyone else.

From and To Date Example - EDIT.rp (63.7 KB)

Okay Alyssa, you got me 90% of where I needed to go, and I got myself to about 98%. Now, I need help with the last 5%.

I have it set so when I click into the “to” box, it automatically sets the date to one year after the date in the “from” box. This works perfectly UNLESS it’s the first day of a month, then the second box subtracts a month. So if the date in the “from” box is 04/02/2015, the “to” box correctly displays 04/02/2016, BUT if I set the date in the “from” box to 04/01/2015, the date in the “to” box shows up as “03/01/2016.”

What am I doing wrong???

And actually what I’d ideally like is for the second box to display one date earlier, so if I pick 04/01/2015 in the “to” box, the “from” box will display “03/31/2016” if you can get me that last bit of the way, I will be ecstatic.

RP:

From and To Date Example - EDIT.rp (63.1 KB)

Hi niki_h,

Aha. I think what’s happening is that the browser is setting the date as though it were midnight UTC time. Since we’re over here in Pacific time (8 hours behind), we’re still registering as being on 3/31 when the date is set to 4/1. To fix this, you can add 8 hours to the month like so:

[[LVAR1.addHours(8).getMonth()]]/[[LVAR1.addHours(Now.getHours()).getDate()]]/[[LVAR1.getFullYear()]]

If you want the date in the “To” box to show as a day ahead, you can subtract 24 hours from your .getDate function. Here’s what that would look like:

[[LVAR1.addHours(Now.getHours()-24).getDate()]]

As for also rolling back the month, since you only want to do this at the end of the month you’ll want to use similar conditions as I used in this screenshot up top:

Using date picker master to populate today, tomorrow, the next day, etc

If you set up your conditions to check for the last day of the month, then you can have the interaction subtract a month. I think this code should do the trick for that:

[[LVAR1.addHours(8).addMonths(-1).getMonth()]]

Since not all months have 31 days, you’ll probably want to use the “all” conditions and add multiple conditions. For example, if “(date on text field) is equal to 31 and (month on text field) is equal to (April or any other month with 31 days), then subtract a month and a day”.

Hopefully that helps!

Edit: Now that I think of it, if you need the prototype to show the right day/month for timezones other than US/Pacific, you can use the Now.getHours() method in place of specifying “8”.

Hey Alyssa, I still don’t fully understand how the date functions all work, so it took some trial and error on my part, but I finally got exactly what I wanted with only four conditions and a global variable!

Basically, I wanted the default date settings to be for one year, so if I put 04/01/2015 in the “from” field, when I clicked on the “to” field it would automatically populate with “03/31/2016”

OH and the best part is, I didn’t even have to take into account the number of days in a month, or if the date picked was January 1!

I thought I’d post it here to see if it helped anyone else.

From and To Date Example - EDIT.rp (63.5 KB)

Excellent, sounds like you got everything sorted out! Thanks for posting your finished file as an example–I’m sure it will help others out, since all this date and time stuff can certainly get tricky!:thumbup:

Hi Alyssa,

I have seen your posts, the way replying in detail was excellent. can you please help me out on this.

thanks
srinivas

Hi Srinivas,

From the title of your post it sounds like you have a question about how to populate dates. Would you mind elaborating a bit on what you’re trying to achieve? For example, do you have a date range and you’re trying to pick a specific date from that range? Or are you trying to achieve something like in the example file above where you can populate a date range by selecting a date?

If you could clarify your question a bit then I should be better able to address your question.

What if we aren’t using a date picker but want to show the day of the week of yesterday? This sounds so simple but I’m struggling to accomplish it.

[[Now.addDays(-1).getDayOfWeek()]]

Hey Niki, is there any way to change the design of the drop down date picker in this file you uploaded? It is perfect except I need to change the look and feel of the calendar to match my designs.