Date Picker

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

Date Picker Properties

The properties are organized into GENERAL, DATA INSERTION, 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.

For more information on property panels, see the article on how to Set Property Values

GENERAL

• Default Date Picker - define the default state of the date picker

  • Custom - Display the custom date picker according to the styling properties defined

  • Native - uses the OS or browser native date picker styling. If this is selected, you cannot define your own styling.

• Use native on iOS and Android - When checked, If the published app is viewed on a mobile device, then the Date Picker will use the native Android or iOS styling.

• Display Type - Define the Date Picker display type.

  • Pop-up - the date picker panel will appear beside the input field when selected

  • Inline - the date picker panel is permanently visible (no input field)

  • Inline + Input - Both the Input field and date picker panel are displayed.

• Min Date - define a Minimum date for the Date Picker. This date means that users cannot go further back than this date.

• Max Date - define a Maximum date for the Date Picker. This date means that users cannot go beyond this date.

• Enable date range selection - check this property to enable range selection. This will change the Date Picker behaviour

• Placeholder text for range - The placeholder text that should be displayed in the input field (only visible when Display Type is set to 'Pop-up' or 'Inline + Input').

DATA INSERTION

• Date Value – This property is the value in the spreadsheet that 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

• Separator - Select this dropdown to choose the separator between the date parts

STYLING

The STYLING properties are split into 3 sub-sections: INPUT BOX, DATE PICKER PANEL, and SCROLL BUTTONS

INPUT BOX

• Background - set the background color of the Input Box. This property can be bound to the spreadsheet or selected via the Color Picker.

  • Opacity - set the opacity of the Input Box. This property can be bound to the properties panel

• Border - set the border color of the Input Box

  • Opacity - set the border opacity of the Input Box.

• Weight - set the border weight of the Input Box. This can be applied to individual borders via the button

• Line Style - select from the dropdown to apply a Line Style to the Input Box border.

• Corners - set the corner rounding of the Input Box. This can be applied to individual corners via the button

• Padding - set the padding of the Input Box. This can be applied to individual edges via the button

• Font - select from the dropdown to change the font of the Input Box

• Size - change the size of the displayed text in the Input Box

• B I U – Apply Bold, Italic, and Underline text styling to the Input Box. When any of these is toggled on, the button is blue:

• Text Color - set the text color of the Input Box.

  • Opacity - set the text color opacity

• Placeholder Text Color - set the text color of the Input Box placeholder text.

  • Opacity - set the text color opacity of the placeholder text

• Show Icon - check/ uncheck this option to show or hide the Input Box label. This is checked by default.

• Icon Fill - set the color of the Icon (if it is set to display)

  • Opacity - set the opacity of the icon displayed in the Input Box (if it is set to display)

DATE PICKER PANEL

These properties affect the main date selection interface.

• Background - set the background color of the Date Picker Panel. This property can be bound to the spreadsheet or selected via the Color Picker.

  • Opacity - set the background opacity of the Date Picker Panel. This property can be bound to the properties panel

• Border - set the border color of the Date Picker Panel.

  • Opacity - set the border opacity of the Date Picker Panel.

• Weight - set the border weight of the Date Picker Panel. This can be applied to individual borders via the button

• Line Style - select from the dropdown to apply a Line Style to the Date Picker Panel border.

• Corners - set the corner rounding of the Date Picker Panel. This can be applied to individual corners via the button

• Header Background - set the header background color of the Date Picker Panel.

  • Opacity - set the header background opacity of the Date Picker Panel.

• Effects – choose between None and Drop Shadow from the dropdown box. If Drop Shadow is selected, further drop shadow properties are shown.

  • Color - This property sets the color of the shadow

    • Opacity - This property changes the opacity of the shadow

  • X Offset - This property adjusts the X offset of the shadow, moving it left or right depending on a positive or negative value

  • Y Offset - This property adjusts the Y offset of the shadow, moving it up or down depending on a positive or negative value

  • Blur - This property adjusts the blur percentage of the shadow

• Header Font - select from the dropdown to change the font of the header text in the Date Picker Panel

• Size - change the size of the header text in the Date Picker Panel

• B I U – Apply Bold, Italic, and Underline text styling to the Input Box. When any of these is toggled on, the button is blue:

• Header Text Color - set the header text color of the Date Picker Panel.

  • Opacity - set the header text opacity of the Date Picker Panel.

• Calendar Font - select from the dropdown to change the font of the calendar text in the Date Picker Panel

• Size - change the size of the calendar text in the Date Picker Panel

• B I U – Apply Bold, Italic, and Underline text styling to the Input Box. When any of these is toggled on, the button is blue:

• Calendar Text Color - set the calendar text color of the Date Picker Panel.

  • Opacity - set the calendar text opacity of the Date Picker Panel.

• Selected Highlight - set the selected highlight color of the Date Picker Panel.

  • Opacity - set the selected highlight opacity of the Date Picker Panel.

• Hover Highlight - set the hover highlight color of the Date Picker Panel.

  • Opacity - set the hover highlight opacity of the Date Picker Panel.

• Today Highlight - set the 'today' highlight color of the Date Picker Panel.

  • Opacity - set the today highlight opacity of the Date Picker Panel.

SCROLL BUTTONS

• Background - set the background color of the Scroll Buttons. This property can be bound to the spreadsheet or selected via the Color Picker.

  • Opacity - set the background opacity of the Scroll Buttons.

• Border - set the border color of the Scroll Buttons.

  • Opacity - set the border opacity of the Scroll Buttons.

• Weight - set the border weight of the Scroll Buttons. This can be applied to individual borders via the button

• Corners - set the corner rounding of the Scroll Buttons. This can be applied to individual corners via the button

• Arrow Color - set the arrow color of the Scroll Buttons.

  • Opacity - set the arrow color opacity of the Scroll Buttons.

• Hover Highlight - set the hover highlight color of the Scroll Buttons.

  • Opacity - set the hover highlight opacity of the Scroll Buttons.