DateTime Picker

How to use DateTime Picker and let users choose date and time information on the screens.

Updated over a week ago

Many screens use DateTime pickers as a convenient way for the user to choose date and time information without having to manually type it in. 


Accessing value of DateTime Picker

  • The DateTime picker object will hold a value of the date and time set. Even when the Display Format is set to a subset, the value will always hold the full date and time.

  • When you update the value of the picker with Update controls on Screen action, you will only be able to set it to a date.

  • When an action requires you to 'Assign a value', you can pull the date and time set in the DateTime Picker.


DateTime Picker Properties

When you select the DateTime Picker object, you can configure its settings, display format (new), styles, and events.

Settings

  • Caption: What the control is called and titled when displayed.

  • Hide Caption: If labeling control for your own information but don’t want the text to show in the live screen, check this box.

  • Load State: The default state of the control (regular/hidden/disabled).

  • Placeholder: Reminder text. E.g. “Choose a date”

  • Use Current Date/Time: Sets the default value to the local current date and time.

  • Width: How wide should your control be in relation to its container.

    • Auto: object will be the width of the text and/or icon.

    • Fixed: assign the width of the object in pixels.

    • Full: object will be full width of the container its dragged into.

Display format

Format as: There are a number of ways to format the display of date and time. This will also affect what the user is able to choose. For example, if set to show the Hour, then the user can only select time, not date. Examples of the different formats are below:

Format

Example

None

Defaults to Short Date and Time

Number

N/A for this object

Short Date

Aug-08-2017

Short Date and Time

Aug-08-2017 05:00 PM

Long Date

Tue, Aug 08, 2017

Long Date and Time

Tue, Aug 08, 2017 05:00 PM

Time

05:00 PM

Hour

5pm

Day

08

Day of Week

Tue

Month

Aug

Month and Year

Aug-2017

Year

2017

Style

  • Date / Time Picker Colors: This only affects the background of the picker itself. It doesn't affect the dropdown or the calendar.

  • Text Size: No effect.

  • Caption color/size/text alignment/font weight: Choose the color, size, alignment, and font weight of the text in your caption.

Actions / Events

  • Change event: Event triggers when a user changes the date in this object.

Did this answer your question?