Date range selection

Axure RP 8
, ,
1

Hello,
May I please ask if anyone could advise how to create a date picker with a date range selection?
In the posted file, I have a mockup design for a single date selection that supports automatic snapping of the highlighted date to the current date in user’s calendar.
I was wondering if there is an option to augment this design (on the left) with an option to select a date range (on the right).

Preview

date range.rp (278.6 KB)

Thanks in advance!
Natalie

2

Hi Natalie!

I created this widget a while back as an exercise (also initially based on @mbc66’s date range picker). I made the following changes to it:

  • A range can be a single day
  • A range can span months (though the UX of this model is iffy at best)
  • The calendar starts off with the current month and you can go to next/previous months
  • Clicking within the date range resets the range: otherwise, you can never pick a start date that’s within the range without resetting (see note below on how this could be better)
  • Clicking the start/end dates (above the calendar) navigates to the appropriate month
  • The dateCell DP has just one state.
  • Got rid of the mouse-over states, due to bugs dealing with such states in repeaters…
  • It doesn’t write to (or read from) the repeater’s dataset, so it’s more performant

I won’t attempt to explain how it works beyond this: there’s a lot of date math and conditional logic, both in OnClick of the date (which sets the “variables” indicating the range) as well as in OnItemLoad (which draws the range based on those variables)

Preview

File: daterange.rp (110.7 KB)

Note: a better solution for this click-within-the-range issue might be to update the start date when the clicked date is closer to the start date than it is to the end date, else update the end date with the clicked date.

[Edit] Got rid of some unnecessary tests in the conditional logic (in OnItemLoad) and added display of the current date. I updated the preview as well:

daterange_2.rp (182.3 KB)

2 Likes
3

Hi Joseph,

Thank you so much!!! As usual, this was a pure genius and it completely resolved the issue! Everything works perfectly now.

Many thanks!
Natalie

4

Oh good. This was a fun one.

One last update: I added a second page that has the same deal except with ghosted days from the previous/next month. I’m not sure whether it makes a range that spans months more or less confusing! :roll_eyes: The performance is degraded a bit; I’d hate to see it in IE!

Preview

Updated file: daterange_2.rp (182.3 KB)

5

Wow! This is even better! I will try to check it in EI and, if it gives any trouble, will update you on this :slight_smile:
Thank you so much again, Joseph!

6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.