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. 

They often resemble dropdowns, but they can be displayed a variety of ways.

Settings

  • 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

Display Format

  • 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

Style

  • 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.

Actions/Events

  • Change event: Event triggers when a user changes the date in this object.
Did this answer your question?