DatePicker Format

#1

Hi

I’m using a datepicker I found here:

Does anyone know if there is a way to change the date format to dd/mm/yyyy instead of mm/dd/yyyy?

Cheers
Andy

#2

Hi Andy,

For that sample datepicker, it looks like the “build date” radio button (which is named “method.buildDate”) in the hidden master widget is the one responsible for formatting the MM-DD-YY order:

The yellow highlighted portion shows how this was manually set up for each month in the Set Text action of the conditional cases. I went ahead and changed the order of the MM and DD for April (outlined in blue) in the screenshot. Reordering each Set Text action as such should get you up and running. Hope that helps!

#3

Hi Alex

Thanks for that. I just tried it for April but I still get it as MM-DD.

Did you change anything else?

#4

Ah. I found another bit that affects it. On an item called grid square, there’s this:

[[currentDate.getMonth()]]/[[This.text]]/[[currentDate.getFullYear()]]

If I swap it here then it gets me another step closer. The only problem is that if I select, say, 9th April, it comes up 9/4 in the text box. That’s good. If I then click on the calendar again, it shows September, which isn’t good.

I’ll carry on looking but my knowledge is limited to click around and hope whereas someone else might have a more scientific method for tracking down where it is.

Cheers
Andy

#5

It also comes up with NaN if you select, say 26th Oct and then open the calendar again.

#6

Hi Andy,

Hmm, I did the same changes as Alex and got the calendar to output the date as DD/MM/YYYY. I’ve attached an edited version of the RPLIB file to show the changes I made to the OP’s widget library file. Is that different from your edits? If so, could you post your edited file here for me to test?

DatePicker_EDIT.rplib (350.2 KB)

#7

Thanks for that. I’ve actually got another method working now. I’m using a Jquery datepicker. It works fine (ish). I’m still trying to nail 2 getting rid of element ids so I don’t have to change them every time I do something on the page.

#8

Weird, weird, weird.

I jut thought I’d have a look at that.

Downloaded the lib file and loaded it into a new prototype. Works perfectly.

Opened it in my existing prototype and the calendar shows by default - both in Axure and the browser. The first time you click a dat, it puts it in as [whatever day you choose]/01/2000. Try again and it works fine. But that only happens in my existing prototype!

#9

And more weird.

If I create a new page and drag the widget in, it works in as much as the calendar is hidden until you click the icon. BUT… the date is still mm/dd/yyyy.

New prototype… works exactly as you’d expect with dd/mm/yyyy

I’ve renamed the library to make sure I’ve got the right one.

#10

Hi Andy,

Yep, the date picker calendar library outputs the date as DD/MM/YYYY on my end when dragging it into a new file. So I think there’s something in your existing file that’s messing with the date format. To see what that is, could you post your RP file here for me to test? In case this helps, you could try looking at the Console tab of the HTML sidebar in the output to see what differs from your file vs. a new file with the same date picker from my edited widget library.

#11

Hi Jane

Thanks for the help on this. I’m going to sort of abandon it at the moment as I have to get the prototype ready to do some user testing.

  • I’ve tried an Axure widget and had problems
  • I’ve tried a Jquery one and had different problems

The solution at the moment is to set the type to ‘date’ and let the browser deal with it. You get a lovely, accessible date picker. The downside is browser support. But we’re going to be testing on a controllable audience and the datepicker is just so we can set a task to choose a date range for a search. The actual mechanism is irrelevant but I do want it to react like a datepicker would in real life.

Best regards
Andy

#12

Hi Jane, thanks for that library. It works well, however there is one thing that is causing me problems. The Set Focus on date picker that’s at the end of the onCalendarLoad causes the page to jump down to the calendar. If I remove this the calendar doesn’t initialise correctly. Is there any way it can be initialised without it making the page jump?

Date Picker?
#13

Hi UXCat1,

Hmm, I’m having trouble reproducing the page jump. Is the issue that initially loading the page in the browser jumps the page to the bottom? Are there any other steps that are needed to produce the page jump? Is this happening in one file, or do you see the same behavior in all files containing the calendar master? Please also let me know the browser you’re using to test, as well as the build of Axure RP 8 (e.g. 3379). Thanks!

#14

For anyone that needs a date picker with a usable date, before or after selection.