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