LogoLogo
FeaturesHelp & ResourcesShowcasePricingLogin
Learn Section
Learn Section
  • Introduction
  • Getting Started
    • Finding your way around
    • Core concepts
      • Data Binding
      • Data Insertion
      • Dynamic Visibility
    • Creating and managing projects
      • Creating a Project
      • Saving a Project
      • Opening a Project
      • Version History
    • Templates
  • Components
    • Overview
    • Layout & Positioning
    • Charts
      • Line Chart
      • Column Chart
      • Bar Chart
      • Pie Chart
      • Combination Chart
      • Area Chart
      • Spline Chart
      • Step Chart
    • DataViz
      • Gauge
      • Word Cloud
      • Chord Diagram
      • Sankey Diagram
      • Schedule (Gantt)
      • Metric Tile
      • Progress Bar
      • Trend Icon
      • Mapbox
      • Loading Animation
    • Tables
      • Scorecard
      • Data Table
    • Controls
      • Push Button
      • Dropdown
      • Multi Select Dropdown
      • Listbox
      • Label Based Menu
      • Checkbox
      • Radio Button
      • Slider
      • Value Input
      • Print Button
      • URL Button
      • Screenshot
      • Hotspot
      • Date Picker
      • Toggle Switch
      • Scenario
    • Text
      • Text Label
      • Text Input
      • Text Area
    • Shapes
      • Rectangle
      • Ellipse
      • Line
    • Media
      • Image
      • Icon
    • Containers
      • Container
      • Web View
      • Repeat Container
      • Row Layout
      • Column Layout
  • Functions
    • Overview
    • Data Mover
    • External Parameters
    • Export to Excel
    • Export to PDF
    • Timer
    • Tableau Parameters
    • Browser Info
    • TextJoin
    • Unique List
  • Connections
    • Overview
    • Excel One Drive
      • Excel One Drive Read
      • Excel One Drive Writeback
    • Google Sheets
      • Google Sheets Read
      • Google Sheets Writeback
    • Ninox Connections
    • Smartsheets
    • CSV Connector
    • SAP Webi Connector
    • XDC Connections
    • Database Connections
    • Zapier Trigger
  • Spreadsheet
    • Overview
    • Spreadsheet functionality
    • Supported Spreadsheet Functions
    • Spreadsheet performance
  • Best practices for the Squirrel spreadsheet
  • Publishing & Sharing
    • Overview
    • Project Settings
    • Publishing to Squirrel Cloud
    • Publishing Locally
    • Using the Project Manager
    • Adding projects to PowerPoint
    • Adding projects to Tableau
    • Progressive Web Apps (PWA)
  • SETTINGS
    • Image Library
    • Custom Fonts
  • Account Management
    • Manage your account Profile
    • Understanding your Squirrel plan usage
    • Changing your Plan
    • Billing
    • How do I delete my account?
  • Frequent Questions
    • What data do you keep and for how long?
  • How-Tos
    • Overview
    • Add-ons
      • Add-on Documentation
      • Window Size – Add responsive behavior to your components
      • Window Size - Getting responsive behavior in the canvas
    • Adding your own Google Fonts
    • Chart title and Checkbox label text case formatting
    • Deleting functions and connections
    • Find & Replace Fonts
    • Getting a Mapbox API access token
    • Renaming a component, function or connection
    • Seeing Data from a Connector at Design time
    • Troubleshooting Projects in the Console
    • Using colors and color values
  • Tutorials
    • Cascading Dropdowns
    • Create a temperature conversion app
    • Create a revenue growth app from an existing spreadsheet
    • Whack-A-Squirrel Game
    • Filtered Rows Insertion: Building a Filtered Selection
Powered by GitBook
LogoLogo

Explore

  • Home
  • Features
  • Pricing
  • Download Squirrel

Help

  • Learn
  • Community
  • Support
  • FAQ's

Updates

  • Blog
  • Events
  • Release Notes

Company

  • Contact Us
  • Privacy Policy
  • Terms of Use

Copyright © 2019 - 2024 InfoSol Ltd. All rights reserved.

On this page
  • Date Picker Properties
  • GENERAL
  • STYLING
  • DATE PICKER PANEL

Was this helpful?

  1. Components
  2. Controls

Date Picker

This article describes the Date Picker component and its properties.

PreviousHotspotNextToggle Switch

Last updated 11 months ago

Was this helpful?

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


GENERAL

  • 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

When live, values inserted in the spreadsheet will be registered as Text values. Using the =DATEVALUE() formula, and referencing the Date Value cell, will easily convert this to its Date format.


STYLING

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

  • Display type – this controls how 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 data 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 whether the calendar icon is shown at the right-hand end of the input box.

  • Icon Fill / Opacity – these control the color 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

      • Individual Weight - selected this property to apply different widths to each of the component's borders. Each of these individual inputs can be manually edited or bound to the spreadsheet.

  • Corners – This property determines the corner radius of the button border. Use the slider to amend this property, or type a numerical value into the property field.

    • Individual Corners - selected this property to apply different radii to each of the component's corners. Each of these individual inputs can be manually edited or bound to the spreadsheet.

  • 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 that the cursor hovers over

  • Today Highlight / Opacity – Control the color and opacity of today’s date

  • Effect – choose between None and Drop Shadow from the dropdown box.

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 .

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

here
Set Property Values