Working date picker

advanced-prototyping
#1

I’ve seen numerous posts about date pickers and lots of examples but none that start on the current day’s date so I built my own. It took far too long but was a great learning experience and now I’d like to know if there might have been a simpler way to achieve the same result as this one is a bit large and slow to load which impacts the prototype significantly when there are multiple instances. There are also some minor idiosyncrasies you might notice if you advance months but otherwise it seems to work well.

All feedback and suggestions welcome.
date picker desktop.rp (1.23 MB)

Duplicating Dynamic panels with code
#2

Wow, farmlad, the speed of going month-to-month is stunning!

I created a repeater version a while back which highlights the selected date as well as the current date. Stripped down to the basic feature set, it might possibly be lighter-weight than yours, but it won’t be anywhere near as fast. Great work!

#3

This is EXACTLY what I was looking for! Thank you! :grin:

UPDATE:
Newbie question: When I paste this into my project, why aren’t the dates updating?

#4

@cmw It looks like it depends on global variables that you don’t have defined in your prototype. Try adding varMonthName and varYear as global variables to your prototype.

#5

As in this?
https://www.axure.com/support/reference/variables

#6

Yes. You just have to add them to your list of global variables. You don’t need to give them an initial value (normally, unless this particular widget requires it but I’d guess not).

What you showed in your screenshot is what would be expected to happen if you were using variables that weren’t declared in the file.

#7

Thanks - I see what you’re talking about now. It looks like the project example I downloaded has 26 global variables. Is there a way to export/import from another file or do I have to manually enter them in?

#8

Actually, yes. If you open your project, under the File menu you should see an option called Import from RP File…

Choose that, navigate to the downloaded project, and go through the wizard choosing what to import. In this case you can probably skip everything until you get to the step where you choose which variables to import. Select the ones you need (or all of them) and finish the wizard.

#9

Awesome, thanks for your help!

#10

I finally found some time to streamline and speed up the date picker. Instead of using dynamic panels, the calendar is now built on the fly. This means it’s much more responsive and lightweight than the previous version.

It’s created as a master but I’ve found that if I break it away, it stops working. I added a raised event on date selection (so it’s no longer hard coded) to get around the need to break it away so hopefully it’s more flexible now. If you want to use it, don’t forget to also import the styles and variables from the RP file.
desktop date picker.rp (717.9 KB)
mobile date picker.rp (750.6 KB)

#11

Updated version to fix an error in the date pickers.
desktop date picker.rp (715.0 KB)
mobile date picker.rp (765.5 KB)

#12

More streamlined versions with new options including ability to select month and year (1901-2100) to jump to

date pickers 02042018.rp (1.9 MB)

#13

Hi Farmlad,
May I use your awesome date picker (that starts on today’s date!) in my Axure file? It’s just what we need for an upcoming usability test.

Thank you,
David Hoard
Interaction Design Strategist
Beckton Dickinson

#14

absolutely…let me know how you go.

#15

Thanks! I appreciate it. :slight_smile:

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