Date Picker

This article describes the date picker component and its properties.

This component provides a convenient graphical interface for a user to select a date:

Select Date Picker from the Controls category of the component library. Move the mouse over the canvas and click to add the component to your project:

Date Picker Properties

The properties are organized into GENERAL, STYLING,  and DYNAMIC VISIBILITY drawers. This guide will describe the general and styling properties only; the dynamic visibility properties are generic and a separate guide and tutorial on dynamic visibility can be found here.

The component properties are set and edited using different methods, some have multiple methods, some just one. See this Set property values article for more information on using the different methods.

GENERAL:

• Date Value – This property is the value in the spreadsheet which is linked to the selected date. It must be bound to a cell in the spreadsheet. The value in the bound cell will change when the selection in the date picker is changed and vice versa.
• Date format – This gives the format that the date picker will use to insert the value into the spreadsheet cell

STYLING:

The STYLING properties are used to control the appearance and behaviour:

• Display type – this controls the way in which the date picker is displayed in the project:
  • Popup – in this mode only an input box will appear in the project and clicking on it will display the full date picker
  • Inline – in this mode the full date picker will be permanently displayed in the project
• Font / Size / Text Color / Opacity – these properties affect the textual display of the date in the input box (similar settings for the selection portion of the date picker are controlled by properties in the “date picker panel” section below)
• Show icon – this checkbox controls whither the calendar icon is shown at the right-hand end of the input box.
• Icon Fill / Opacity – these control the colour and opacity of the calendar icon at the right hand end of the input box (if shown)

DATE PICKER PANEL:

These properties affect the main date selection interface.

• Background / Opacity – control the color and the opacity of the background
• Border  / Opacity – control the color and the opacity of the border
  • Weight / Line style – control the width and style of the border
• Corners – controls the rounding of the corners
• Font / Size / Text Color / Opacity – control the respective aspects of the text
• Selected Highlight / Opacity –  control the color and opacity of the selected date
• Hover Highlight / Opacity –  control the color and opacity of a date which the cursor hovers over
• Today Highlight / Opacity –  control the color and opacity of today’s date
• Effect – controls whether the a drop shadow effect is used