Date/Time Component designstudio pro icon

Date/Time Component

The Date/Time component inserts a date and time field on the form, along with a date and time picker at the end of the field. A user can enter the date and time using the indicated format, or select the date and time from the picker.

The date/time format must exactly match the Timestamp Format that appears in the publish profile. See Add a Form Publish Profile.

Example: Date/Time Field Rendered on a Form

Date/Time Field Example

Date/Time Picker Selected

Date/Time Picker

Settings

The settings for each component are grouped under tabs. While there are multiple tabs and many fields, some are applicable to advanced users (for example, the API and Conditional tabs and JSON fields) and you do not need to complete them to render the component. For this reason, the settings that are necessary are detailed for each component. In some cases, when an optional field is frequently used, it is listed in a second optional settings table. For tabs and fields that are not listed, advanced users are assumed to have pre-existing knowledge of how to work with them if they elect to apply them; however, they should be aware that the fields may not be compatible with WebEOC. Contact the Juvare Support Center at +1 (877) 771-0911 for additional information.

Date/Time Settings Window

The following settings are necessary to render the component:

Date/Time settings fields (required)

Field

Description

Procedure

Label

(Display tab)

 A unique identifier that appears as the label for the date/time field. Unlimited alphanumeric characters, including special characters.

Format

(Display tab)

Format that is used to display the date and time.

The date/time format must exactly match the Timestamp Format that appears in the publish profile. See Add a Form Publish Profile.

The following settings are frequently used but are optional:

Date/Time settings fields (optional)

Field

Description

Procedure

Label Position

(Display tab)

Determines the positioning for the label.

Select one of the following options from the drop-down list:

  • Top

  • Left (Left-aligned)

  • Left (Right-aligned)

  • Right (Left-Aligned)

  • Right (Right-aligned)

  • Bottom

Label position options set both where the label displays in relation to the component and how the label text is aligned. For example, if you select the Left (Right-aligned) option, the label displays to the left of the component with right-aligned text.

Display in Timezone

(Display tab)

Displays the date/time in the picker using the selected time zone.

  • Leave as of Viewer (recommended) or select UTC.

  • of Submission and of Location are not supported by WebEOC.

Use Locale Settings

(Display tab)

Displays the date/time according to the local standard format.

  • A selected checkbox displays the date and time in the local standard format.

  • A cleared checkbox displays the date and time in the default format (yyyy-MM-dd hh:mm am or pm).

Enable Date Input

(Date tab)

Determines if the date can be entered or selected for the field.

  • A selected checkbox allows the user to enter or select the date and time.

  • A cleared checkbox allows the user to enter or select only the time.

Disable weekends

(Date tab)

Dims and disables Saturdays and Sundays on the Date/Time picker.

  • A selected checkbox allows the user to only enter or select dates that are from Monday to Friday.

  • A cleared checkbox allows the user to enter or select any day of the week.

Disable weekdays

(Date tab)

Dims and disables Monday through Friday on the Date/Time picker.

  • A selected checkbox allows the user to only enter or select dates that are on Saturday and Sunday.

  • A cleared checkbox allows the user to enter or select any day of the week.

Use Input to add moment.js for minDate

(Validationtab)

Used for JavaScript customization to specify the earliest dates that can be entered or selected. When selected, additional fields appear below the option.

This field is for experienced JavaScript users. We recommend that you leave this checkbox in a cleared state and use the default date/time picker.

Enable Time Input

(Time tab)

Determines if the time can be entered or selected for the field.

  • A selected checkbox allows the user to enter or select the time.

  • A cleared checkbox allows the user to enter or select only the date.

Hour Step Size

(Time tab)

Determines the number of hours the time picker increments.

Enter the number of hours for the increment.

Minute Step Size

(Time tab)

Determines the number of minutes the time picker increments.

Enter the number of minutes for the increment.

12 Hour Time (AM/PM)

(Time tab)

Determines if the time picker displays time in a 12 or 24 hour format.

  • A selected checkbox displays the time in a 12 hour format.

  • A cleared checkbox displays the time in a 24 hour format.

Required

(Validation tab)

Adds a red asterisk to the end of the label indicating that the field is mandatory.

An error message displays if the user does not complete the field and the form cannot be submitted.

  • A selected checkbox indicates that the field is mandatory.

  • A cleared checkbox indicates that the field is optional.

Icons

The following tool icons are available:

Tool icons and descriptions
Icon Name What it Does Procedure
Settings Icon Settings Displays the settings window, in which you can modify the component’s settings.

To modify settings

  1. In the Design area, move the mouse pointer over the component. A toolbar appears on the top right. The icons that appear depend on the component.

    Form Icons

  2. Click the Settings icon.

  3. Modify the fields as needed. See Add Form Components.

  4. Click Save.
Move Icon Move

Moves the component to another position on the board.

This option is useful with touch pages. If you are not using a touch page, you can drag the component to its new location.

  
Copy Icon Paste Icon

Copy

Paste

 Copies the current component and its settings and pastes it after the current component.

To copy the component

  1. In Design mode, click the component on the canvas. A toolbar appears on the top right.

  2. Click the Copy icon.

  3. Click the Paste below icon. A copy of the component appears below the original component.

  4. Click the Settings icon and modify the settings for the new component.

  5. Click Save to save the new settings for the newly-copied component.
Delete Icon Remove Removes the current component from the form.

To remove the component

  1. In Design mode, click the component on the canvas. A toolbar appears on the top right.

  2. Click the Remove icon.