Working date picker

advanced-prototyping

#21

The problem seemed to have been the number of global variables. You could create a library, but when you tried to use it only 8 global variables would be brought in. Seems like a Axure limitation. But this only seems to use 7 so works well. Thanks!


#22

Thanks for the response. I know what you mean about spending a lot of time on it…I hate being beaten by a problem and can get quite obsessive about it! I spent over a week trying to figure out why It wouldn’t work as a library widget and eventually got it working by moving the page onload events to widget onload events but I also refined a lot of the code. As part of that process I removed a few of the variables and from Paul0927723’s response, maybe that’s what actually fixed it…in which case the solution was a pure accident :slight_smile:


#23

Thanks for that. It had never occurred to me that there might be a limit on the number of variables. I removed a few when I realised there was a smarter way to do what I wanted, so if that fixed it, it was purely accidental :slight_smile:


#24

I’ve created another version which is much more responsive if you’re interested. It also includes versions with the week starting Sunday, US and international date formats, error states and named styles to make it easier to restyle.


#25

I’ve created another newer version which is much more responsive if you’re interested. It also includes versions with the week starting Sunday, US and international date formats, error states and named styles to make it easier to restyle. I think i’ve ironed out most of the bugs now but let me know if you find any problems.


#26

This has been a fantastic find for me - it solves EXACTLY what I was looking for. My only question. How can you change the default date display format? Instead of DD/MM/YYYY but change to DD Mmm YY??


#27

Hi @cburtenshaw
I made a version that is fully customizable in terms of the format you want to display. The raised event "dateSelected" on the master when you place it on a page or another master can be called to do what you ask.

You would simply change my default:
Set text on Your library item to [[dateSelected.getMonthName()]] [[dateSelected.getDate()]] [[dateSelected.getFullYear()]]

To...
Set text on Your library item to [[dateSelected.getMonthName()]] [[dateSelected.getDate()]] [[dateSelected.getFullYear().substring(2,4)]]


#28

Awesome work. Thank you!


#29

Trying to incorporate this date picker into my proto but need to have this format to show : yyyy/mm/dd. What do I need to change ? tks


#30

There’s a raised event called btnFireEventCalender that updates the txtDate field to the selected date. To change the format open btnFireEventCalender in the case editor and click on setText on txtDate to to edit it. Click fx to edit the text and replace with
[[varSelectedDate.getFullYear()]]/[[varSelectedDate.getMonth()]]/[[varSelectedDate.getDate()]]

You’ll also need to change the initial format of the txtDate field which is set by an OnLoad event. Hope that helps. Feel free to attached the RP file if you’d like me to update it for you.


#31

Is it not easier to just add a text field and set input type to ‘Date’?
image


#32

I and thanks myalterego,
I was able to change the OnLoad event to have it displayed as I wanted but not the first part. So yeah, if you could look at my rp file, that would help me so muchDATE-PICKER-EKL.rp (297.2 KB)


#33

Here you go. I’ve also added a couple of screenshots showing how it’s setup in case you need to make changes to the date format in the future.DATE-PICKER-EKL.rp (475.3 KB)


#34

Hi GordonC. It sure is but sadly doesn’t work in all browsers (eg Safari) and when I first built this, it didn’t work in any browsers. I also needed something I could apply branding to easily (we have different date pickers for different channels) and to apply a specific date format.


#35

Thanks @myalterego I wasn’t aware that this functionality didn’t work in Safari so useful to be aware of.