Skip to main content

Forms Item: Date / Time Picker

Important

Information and features vary according to the roles to which you belong and the permissions associated with those roles. For more information, contact your module manager or your campus support team.

A Date / Time Picker lets a form completer choose a date, a time, or both using a pop‑up calendar and time selector. You can also use rules to trigger actions based on the date or time selected.

Tip

You can use rules to control if anything happens when the form completer selects a particular date. For example, the form completer selects their high school graduation date. If they pick a date in the next six months, you could show them additional form questions related to their test scores and intended field of study. If they pick a date a year from now, you could show them additional questions about when they'd like to attend a campus open house.

This topic explains how to add and configure date / time pickers in J1 Web Forms, including how functionality differs from Campus Portal Forms.

Settings

How To

Add a Date / Time Item Picker to a Form

  1. Access the Connect hub, Forms module, Manage Forms page.

  2. Find the form you're updating and from the Actions menu, select Edit form.

  3. From the Build step, select the tab where you want to add the date / time picker.

  4. Click Add Item. The New Item pop-up window appears.

  5. Enter an identifier for the checkbox in the Unique ID field.

  6. From the Type drop-down list, select Date / Time Picker.

  7. Select the appropriate label display option:

    • Display on the form: Appears visually on the form. If you do not show the item on the form, you must select Screen reader only to ensure screen readers can provide needed information.

    • Screen reader only: Hidden visually but available to assistive technologies for accessibility.

  8. In the Text field, enter and format the label you want to use to describe the date / time picker.

    Tip

    This is typically brief (e.g., Nickname), but can include leverage basic HTML formatting such as <bold>, <center>, <italics>, and hyperlinks <ahref>; when additional context is needed

  9. If you are grouping fields, enter the group name in the Group field.

    Items/fields with the same group name can be acted on simultaneously through other configurations. For example, multiple questions grouped under 'Faculty' can be shown, hidden, or validated together.

    Note

    Each item being included in the group must have the same group name in this field.

  10. Select the Settings tab.

    1. The item is automatically added to the left of the form page. Use the Alignment options to move it to the center or right.

    2. Use the Width and Height fields to adjust the size.

      Note

      You can use percentages (e.g., 50%) or pixel/point values (e.g., 50px) to control how large or small the field appears.

    3. Configure attributes:

      1. Select the Required checkbox to make the item mandatory.

      2. Select the Read Only checkbox to make the item visible to form completers but not available to select. This could be explanatory information or examples.

      3. Select the Show Only in Report checkbox to make the field and its responses appear only in the submitted form to the reviewer. Responses are hidden from form completers during form entry.

        For example, this can be used to collect the submitter's ID number in order to auto-populate other fields or include with the submission.

    4. Select Mobile, Tablet and/or Desktop to determine what platforms the item/field is visible on.

      If an item is required, all display on options are selected and cannot be updated.

    5. Enter a Default Value if you want specific information or a data shown to form completers when they first access the item/field. Form completers can update the value as needed.

      Tip

      This field can be used as hint text. Instructions such as "Enter your full legal name." can be entered and shown in a textbox item.

    6. Select the Date Picker, Time Picker, or both to determine which pickers are available.

  11. To associate actions with the item/field, click the Rules tab.

    1. Click Add.

    2. In the first drop-down, select the If answer value is condition.

      Note

      Rules must always have an If answer value is condition in the first statement of the sequence. This tells J1 Web Forms to execute the action if the user's answer matches the answer value you specify.

    3. In the field to the right of the drop-down, enter the answer value that will trigger the rule to execute. To execute the action when any answer is entered, or when a button is selected, enter * in the answer value field.

    4. In the second drop-down, select the action you want to occur when the condition is met.

    5. If needed, click Add to add another rule.

      • Else if answer value is tells J1 Web Forms to execute the action if the answer value matches the new answer value you specify when the "If" condition fails.

      • Else  tells J1 Web Forms to execute the action if no previous conditions were met.

      • And  tells J1 Web Forms to execute the action in addition to any other action that is set to execute in the previous rule condition.

  12. Click Update.

  13. If you want to move the item, use the drag and drop icons drag and drop icon The drag and drop icon. to move and i_drag_drop_block.png, and move it to the preferred location.