DateTime Picker

How to use DateTime Picker and 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. 

DateTime Picker Properties

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


  • Picker: There are three choices for the picker:
    - Date: User can select a date.
    - Time: User can only select a time.
    - DateTime: User can select both the time and date (as shown above in image).

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

  • Hide Caption: If you’re just labeling your 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 the screen?
    - 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 section or cell it has been dragged into


  • Format as: There are a number of ways to format the display of date and time. Examples of the different formats are below:
    - None: Defaults to Short Date and Time.
    - Number: N/A for this object.
    - Short Date: E.g. Aug-08-2017
    - Short Date and Time: E.g. Aug-08-2017 05:00 PM
    - Long Date: E.g. Tue, Aug 08, 2017
    - Long Date and Time: E.g. Tue, Aug 08, 2017 05:00 PM
    - Time: E.g. 05:00 PM
    - Hour: E.g. 5pm
    - Day: E.g. 08
    - Day of Week: E.g. Tue
    - Month: E.g. Aug
    - Month and Year: E.g. Aug-2017
    - Year: E.g. 2017


  • Date / Time Picker Colors: Pick the colors from the Method palette.

  • Text Size: The size of text inside of the field, but not the calendar/time picker.

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


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

Did this answer your question?