Skip to main content

Date Picker

The date picker component enables you to display a calendar that saves the users input as a variable. This variable can then be combined with other Studio components, such as text boxes, to dynamically update your View.

For example - a single date picker is used to update the variable in the text box:

An animated example of populating a text box component by using a date picker.

Configuring a date picker component

The date picker component can be dragged and dropped into your View, giving you the following options to configure:

  • Date range or single date: Allow the user to select a date range (with start and end dates) or a single date.

  • Save input to variables: Choose which View or Knowledge Model variables to save the user input to.

    For more information about variables, see: Enhanced variables

  • Data settings: Choose whether the apply selection limits, with the following options available:

    • None

    • Do not allow dates in the past

    • Do not allow dates in the future

  • Style: Enable quick selections for the user.

To configure the example, the date picker component settings are:

single_date_config.jpg

  • Single selection

  • Save date selection to 'datevar' View variable

  • Do not allow dates in the past

The text box configuration then includes the 'datevar' View variable as a dynamic field:

text_box_example.jpg

Using enhanced view variables in PQL

To ensure that data and string type view variables are correctly interpreted and function as intended within PQL, please follow the guidelines below:

  • Date type variables: When you're comparing data type variables, the variable formatting to use is:

    {t ${date_variable_name_here}}

  • String type variables: When using string type variables, the variable formatting to use is:

    ('${string_variable_name_here}')

    Without quotations, the variable will be treated as if it is PQL. For example, a string variable value of 2025-02-01 without using quotations will result in a literal calculation: 2025-2-1 = 2022.

  • Date string variables: Data string inputs can be referenced in PQL using  {d } or integer inputs with a count of milliseconds since 01.01.1970 using {t }. Two formats are supported as date string input:

    • yyyy-MM-dd HH:mm:ss

    • yyyy-MM-dd