Set today's date cell of calendar table to [[Now.getDate()]]

Axure RP 8
1

I have a calendar widget that is set up as a table and I have added a selected interaction style to each cell. I have named each cell with the date text that is in each cell. So each cell has a numeral for the name ie. “1” “2” etc.

Is there anyway I can set the selected state on a cell using the Now.getDate variable to choose which cell should be in the selected state?

I am trying to use a “now” button to set the selected cell to today’s date.

2

Hi,

you could use condition text on(widget) equals [[Now.getDate()]] and then set the cell to selected. To fire this you need any event. Could be the onClick on button, show table or you could use the onload

See here:

Datepicker_Table.rp (65.2 KB)

I think with a table you must implement this for every cell. With a repeater for the date picker it should be possible with less work.

3

I agree with the repeater approach. Using a repeater would let you use the one OnItemLoad action for your logic. You might even be able to change the days for each month with some work.

4

Repeater is definitely the way to go on this one. I did achieve this one myself. I’ve added the rp file as a starting point.

I say starting point as you will have to restructure the repeater data slightly to reflect this year. As I only included enough to cover 2014 when I built it. I think that once you update that, it should highlight again nicely
Date_Picker.rp (132 KB)

5

Had a play this morning and what you need to do is look at the filters on the month selection dynamic panel. Update those to be correct and the whole thing will fall into place.

6

Thanks guys. For some reason I didn’t receive the emails that you had answered my post. I will give this a shot at work tomorrow.

7

Here’s an unadorned date picker using a repeater. It uses the date functions to populate the calendar.

Live sample.

File:date_picker_4.rp (76.3 KB)

Update This one includes the ghosted days from the previous/next months

Live sample.

File: date_picker_5.rp (84.3 KB)

9 Likes
8

Hi,
I am trying to change the format the date is presented in date_picker_5.rp from MM/DD/YYYY to other formats…
how do I do it?
thanks,
Raz

9

Hi Raz -

My memory of this code is pretty hazy. That said, I updated this so it's (relatively) easier to change the date format. That said, you will need to familiarize yourself with the date functions, which you'll find listed in the Insert Variable or Function link in the fx box.

The second line of code in the OnClick handler of the calendarDay rectangle is where you want to do the formatting . It's currently set to this:

set text on clickedDay equal to [[date.getDayOfWeek()]] [[date.getMonthName()]] [[date.getDate()]], [[date.getFullYear()]]

"date" above is a local variable pointing at the selected date in MM/DD/YYYY format. The above uses various date functions to extract values for: first the name of the weekday, then the name of the month, then the current date in the month, and then the year.

If you get stuck, let me know!

date_picker_5.rp (89.6 KB)

1 Like
10

Hi Joseph, (I hope I got the name right)
Many thanks, I got it :slight_smile:
sorry for another question: is there a way to save the date “result” as a parameter and use it on another page/state?

thanks,
Raz

11

Hi! Yes, you can set a global variable to the value of the field on the next line. Then you can use that global variable on a different page.

1 Like