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 them. 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 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. For example, 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 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. Navigate to the Salesforce integration logs screen and click the pink hyperlink. 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.

To automatically display the user’s locale:
1. Enable the Auto Detect Locale feature.
date settings > interactivity > locale options

When users input a date, they can scroll back and forth between calendar months. You can restrict whether users can move through the months by using the Disable Furture and Disable Past functions.
date settings > interactivity tab > disable future and past options

07 Got Feedback?

Additional Resources