Date Picker?

[farmlad]

I finally found some time to streamline and speed up the date picker I originally created. 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)

[RajeshK]

Thanks Farmlad! These were working fine couple of days back.
When i tried to use it today its not loading the dates in the calendar initially. But when i advance to the month May, it loads the dates. I guess something is wrong in my system which is why its not fetching the dates for the March and April Month.

[farmlad]

Hi Rakesh, I found the problem which was one of the calculations. Here are the updated versions.
desktop date picker.rp (715.0 KB)
mobile date picker.rp (765.5 KB)

[RajeshK]

Thank You! Works like charm!

[farmlad]

New and improved versions attached!

• More code stripped out to reduce size and make even faster
• Today’s date remains highlighted
• Dropdown options to select month and year (1901-2100) added
• Fixed problem with single digit dates
  date pickers 02042018.rp (1.9 MB)

[rajeshkpanda]

For the “ddmonth” dropdown, in the goback case there is an undefined set text. May be this is the reason, while changing month the dates, days are not getting updated. Please check this.

[farmlad]

Thanks for the feedback. I’m in the process of refining the code and making some enhancements but hope to have a new version up by the end of this week. Let me know if you need it sooner and I can upload an interim but working version.

[rajeshkpanda]

Thanks for the quick response. I appreciate your time and effort. Only one request from me, if you can convert this as a library file and upload here please.

[rajeshkpanda]

Hi Farmlad,

I forgot to add one more flaw I have identified in the date picker. Once you manually type in the date in the text field the date in the calendar panel is not automatically set to the entered date/month/year.

I must agree that identifying the flaw is easier than doing it, however I just thought of bringing to your notice.

[farmlad]

I’ve updated the date pickers and added a new version which won’t let you select a past date. I’ve also included versions for US (MM/DD/YYYY) and international (DD/MM/YYYY) input dates. I’m a designer not a coder so some of the scripting has been a challenge but have tried to streamline it as much as possible. Let me know if you find any other issues.date picker.rplib (2.4 MB)

[farmlad]

The last version of my date picker was very sluggish so I’ve come up with a significantly improved version that’s much more responsive. I’ve included a template version that has the date pickers as masters that can be detached and a library version you can use with your existing files without having to import variables. I’ve also added in error states, created styles for all the elements to make it easier to restyle and added the options for the calendar to display from Monday to Sunday or from Sunday to Saturday. Please reach out if you encounter any problems.
date pickers template.rp (2.2 MB)
date pickers.rplib (2.1 MB)

[cburtenshaw]

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??

I am in the middle of using is right now but cannot find the place that affects this…

[farmlad]

When you select a date, it fires an onClick event (btnFireEventCalendar). You can change the date format by changing this from

Set text on txtDate equal to to [[varSelectedDate.toLocaleDateString()]]
To
Set text on txtDate equal to to [[varSelectedDate.getDate()]] [[varSelectedDate.getMonthName().slice(0,3)]] [[varSelectedDate.getFullYear()]]

[cburtenshaw]

Wow. Awesome - thanks for your quick response

I have an additional formatting/styling question. I have redesigned your cal to look more material design. It’s been fairly easy apart from one bit.

I can’t find where the styling for the grey box around the numbers is coming from??

UPDATE: It was a shadow applied to the the CalWkXDayX which was not obvious as it wasn’t visible.

[farmlad]

Is that the latest version? I don’t have it bordered in my file. If you select the cell, it should give you the style name so you can then alter it.

[bermanatalie]

I have an additional formatting/styling

date-range.rp (2.4 MB)

[UXCat1]

Hi Jeff, 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?

[Jane_Axure]

Hi UXCat1!

Let’s continue troubleshooting on this thread.

[josh_db]

pick-date-single.rp (104.0 KB)

Thought I’d share my calendar that uses a repeater. It stores the date value in the text field labelled: “date selected”.

You can use the value from this text field at any point.

• The default value is [[Now]]
• After selecting a value from the calendar, the value changes to your selection.

You can reference the text field text as a date object. This allows you to do things like:
LVAR = text on widget: date selected
LVAR.getDate()

Not sure how well it works performance wise because of the use of the repeater.

I think I could adapt it to be a multi-date selector, and it’s a simple tweak to disable additional dates (such as past dates).

[JopSmith]

Hi there, I really love the styling changes you’ve made to the date picker. It’s just what I’m looking for. Are you able to share the .RP?