01 Getting Started

This tutorial covers the date and time field elements.

screen of all date and time field elements inserted into the project

02 Finding the Date and Time Input Fields

1. Click the + icon to expand the element menu.

2. Click on the Input field.

element menu > input tab > date and time inputs


Each field has a picker or modal that displays when the user interacts with it. For example, a clock modal displays when inputting time:

example of the time field pop up modal

03 Pushing Date Fields to Salesforce

To demonstrate how the date and time field is captured in Salesforce:
  • A date-time element was added to the canvas.
  • A button was inserted into the project.
  • A Salesforce push action was configured and assigned to the button.
  • The following mapping was configured:
    • If the date/time field is mapped to a date/time Salesforce field, the universal time zone is pushed to Salesforce.
    • If the date/time field is mapped to a text field, such as the last name, the data captured will reflect the user's time zone.
map salesforce fields > mapping tab

  • Debug mode was enabled to demonstrate how the data is captured:
project settings > tools tab > debug mode

Save and Preview. Select the date and time field and provide an input.

date and time modal

Click the Debug button. The date and time captured reflect the input.

debug project window

Navigate back to preview mode and click the configured button. This will push the captured data to Salesforce.
preview mode displaying date time element and configured button


To view the captured data in Salesforce:

1. Click the pink hyperlink to the Salesforce integration logs screen. The Salesforce window opens.

salesforce integration log screen

How the date and time are captured depends on your time zone settings.
  • The first date entry matches what the user provided.
  • The second entry was adjusted to match the time zone selected in Salesforce.
screenshot showing how time captured differs according to the mapping

04 Date Time Content Settings

We have used the DateTime input field as the example, as this element contains content options for both date and time elements.
  • You can choose to configure the date and time format.
  • Configure a default value.
  • Enable the Use Current Date and Time function to automatically capture the user's current date and time.

date time settings menu > content tab


05 Date Range Content Settings

When working with the date range field, you can:
  • Choose the date format.
  • Choose whether the current date is automatically selected.
  • Set a date value.
  • Configure the start and end date of the range.
  • Limit how many months users can choose from.
date range field settings > content tab

06 Interactivity Settings

You can set a default locale to display the calendar details in a specific locale.

1. Click on the Interactivity tab.

2. Use the Default Locale dropdown to select the country default.

To automatically display the user’s locale:

1. Enable the Auto Detect Locale feature.

date settings > interactivity > locale options

Users can scroll back and forth between calendar months when they input a date. You can restrict whether users can move through the months by using the Disable Future and Disable Past functions.

date settings > interactivity tab > disable future and past options

07 Got Feedback?

Additional Resources