Working date picker

advanced-prototyping

#16

I just want to express my extreme appreciation for the work that was done here. The date picker is awesome!

I had a few tweaks I needed to make, among others:
*date format
*being able to input the date manually
*week format - start with sunday on the calendar
*overall style
*getting it to work without global variables (mine was needed for part of a larger widget library).

I thought I’d share mine here in case others looking for similar adjustments found it useful.

DatePickers.rp (829.7 KB)


#17

Hello,

First of all I appreciate the wonderful work done. For the date-picker with drop down, there is a flaw. After changing the year and month the calendar is not updated.


#18

Changing month is not reflecting properly. It is always takes the same month calendar.


#19

WOW! That’s an incredible amount of work and I learnt a few things I didn’t know by dissecting it. Interested in why you think it’s better without variables. I’ve made a few updates to mine (thanks for your inspiration) and added in a new version which won’t allow past dates to be selected. Also tried to clean up the code and converted to a library file for easier use (but still uses global variables). Let me know what you think.
date picker.rplib (2.4 MB)


#20

The main reason I needed to get away from the variables was that they weren’t automatically being pulled into the prototype when I used them from the library. I develop Axure widgets for an entire team of designers, and I wanted to streamline things for them so they could focus on their designs instead of Axure problems. I don’t know if it’s because of the large number of variables or what, but some variables would come over while others wouldn’t. I spent a LOT of time trying to get the variables to work: to either find out the reasons why some come over and others do not, or to research whether this was an Axure bug. I came up empty-handed and had to proceed with a workable solution. I had already spent too much time on it, but I would have preferred to use variables as opposed to my hack.


#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.