The Range Date Picker is designed to help users quickly and visually choose a range of dates from a calendar component. The intention is that this date is sent from the Range Date Picker component to a Text, or Text Entry component inside a form. The Range Date Picker can be used in either simple mode (pressing on the date picker selects start/end dates), or in advanced mode (with separate button components used to select the start and end dates).

Features

• Customizable colors, icon images, font styles.
• Date can be saved in different formats
• Dates positioned in correct days of the week
• Knows when a leap year is.
• A month/year selector section to speed up Date Picking (hit the header text)
• Can select dates over a range of months, or even years.
• An advanced option, which allows the start/end dates to be selected with buttons.

Sub Component Overview

The date picker is comprised of several sub components:

This is the header, which displays the current date picker’s month & year. The arrow icons will change it to the previous/next month. The text is fully customizable with Umajin font styles, the icons can be changed, and the background color can be changed.

This is the days of the week header. It indicates the days of the week for the columns of dates below.

This is the dates mode. It stores all of the dates, correctly placed beneath the corresponding day for that month. It highlights the current date, seen as dark green in the image above (the month and year must also be same). There exist ‘Start’, ‘End’, ‘Inbetween’ and ‘Same’ selection states for the dates. All have their own customizable icons & font colors. In the image above, they are all the same icon and color. There is one ‘global’ font style used for all dates here, only the colors can be changed for the selected sections.

This is the month/year selection mode, which can be viewed by clicking on the header. This saves the user from clicking the arrow icons several times to reach a distant date. The arrow icons change which year is selected. These icons are customizable. When the user presses on a month, it will jump into that month in dates mode. The font styles for the months & icons can be changed here. Every other property is shared with the date mode.

How to use it

In simple mode, the first press on a date will select the start date. Pressing again will select the end date (this can be the same date).

When an arrow in the header is pressed, it will change to the previous/next month. It does NOT select a new date. The previously selected date is still stored. When a user presses on the Month/year section, it opens up a section which lets the user quickly choose the month. Pressing the arrows in this section will change the year. Choosing a month in this section will change the month & year, and switch back to the dates view.

The selected date can be saved to text or text entry using the Range date picker’s custom actions. The full date range and separate start/end dates can be saved to either text or text entry components.
The full date range is saved in the format dd/mm/yyyy-dd/mm/yyyy
Start/end dates are saved in the format dd/mm/yyyy
The default date save format is dd/mm/yyyy, this can be changed in the advanced properties section in the Range Date Picker

An example implementation (simple mode)

Imagine a range of dates is required on a form. To achieve this, when a date field on that form is pressed, it navigates to a new page containing just the Range Date Picker. The user then selects a start and end date. When end date is selected, it returns to the form page and the date is saved into the date field.

• Create a form component, and add in a ‘Date’ field which consists of a text component, and in image(or nine slice) background image of a border.

• Insert a Range Date Picker in its own page. Add an OK and CANCEL button. I’ve placed a white rectangle behind the calendar, so the calendar doesn’t look stretched.

• Go back to the form and bind an ‘on press’ action to the ‘Date’ field (bind to either the text or the image). Choose the action which shows a page. Choose to show the page with the date picker.

• Go back to the page with the date picker and on the ‘On End Selected’ event

1. Use a show page action to return to the page with the form.
2. Choose the ‘Formatted Date to Text’ action, selecting the date picker and the text on the page with the form.

• Finished! The date can now be selected and the form can be submit.

An example implementation (advanced mode)

This is a feature that requires additional buttons to help achieve. The intention is to have something like this:

• Select the ‘Select dates with start/end select buttons’ property, which can be found under Advanced Calendar Options at the end of the Properties panel.
• Add the ‘Select a Start Date’ and ‘Show Page…’ actions to the Start Date text/button . When pressed, it will set the state of the calendar to “select a start date” mode, and jump to that page.
• On the date range picker, set up the ‘Range Date Picker’s Start Date to Text’ action, as well as a ‘Show Page’ action to return to the page with the form on it.
• When the user selects a first date, the date will be sent to the text field in the form, then the page will be displayed again, ready for the end date to be selected.

• Add the ‘Select an End Date’ and ‘Show Page’ actions to the End Date text/button. When pressed, it will set the state of the calendar to “select an end date” mode, and jump to that page.
• On the date range picker, set up the ‘Range Date Picker’s End Date to Text’ action, as well as a ‘Show Page’ action to return to the page with the form on it.
• When the user selects an end date, the date will be sent to the text field in the form, then the page will be displayed again.

Properties for Range Date Picker Component