Calendar picker

Hi,

I’m creating a test scenario for a mobile date-picker / calendar.
The implementation in JS would be similar to this example:

Edit fiddle - JSFiddle

Interaction:

  • on the first tap, the selected element becomes highlighted.
  • on the second tap, se next element becomes highlighted and all the elements in between are highlighted as well.
  • Third tap resets all highlights and reverts back to the first state (tapped element is highlighted).

Are repeaters the right solution for this case? Do you have any advice on how to proceed?

Hi robertdpi,

Repeaters could work here, though it could get quite complex given that you may need to implement some workarounds, triggers, etc. while you’re at it.

I’ve put together a sample .rp file which is attached here; feel free to see it live as well. I admit, my implementation isn’t too lucid or straightforward and there are clear limitations, but I hope it gives you some ideas of how you can move forward.

To explain: to determine the date range, I created two Global Variables–StartVar and EndVar–representing the start and end date. For the highlighting, I use the “Selected” Interaction Style, which is triggered OnClick of the Shape in the Repeater. When you click on one of the Repeater Items, the Interactions on the “Trigger” Hot Spot are executed, which Marks certain Rows of the Repeater Dataset, based on certain Conditions. Then, when the Repeater is reloaded, the corresponding Repeater Items that are Marked are, in turn, set to Selected.

Further, in lieu of or in addition to my example, here are a couple relevant forum posts that may help guide you a bit, too:

Date Range Picker

This one, below, isn’t a date picker; however, the use of Dynamic Panels (which would be a possible alternative) could potentially be adapted for your project:

(Example) Dynamic Star Rating

Hope this helps!
Alex
SampleCalendar.rp (72.6 KB)

Do you know if it would be possible to create something like that that spans multiple months, like the Multiple Months example here?

jQuery UI Date Range Picker Widget

This is one I made with a repeater that I think works really well. It may lag a bit because it uses a repeater, so just keep that in mind.

Hi,

is it possible to adjust the SampleCalendar.rp to make only the first selected value and the last to have rounded corners? Can you give me a hint how to do it, please?

Hi,

If you want the selected calendar dates to have rounded corners, then a quick way to do that would be to use the Selected interaction style to set the corner radius for the widgets so that when they are selected, they show rounded corners.

While easy, the above would add rounded corners to all of the selected items, not just the first and last ones.

While easy, the above would add rounded corners to all of the selected items, not just the first and last ones.

That’s the probiem, I just want to get it for the first and last ones.

Your repeater would need 3 different backgrounds in a dynamic panel and you switch the background based on the day.

1 Like

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