Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

The date field is used to select the date and time.

Functionality

Appearance

During run-time, the field shows a pop-up calendar, where the user selects the date.

Date field with the pop-up calendar

By clicking in the month in the calendar pop-up, a month and year pop-up appears and the user can scroll for the necessary year and select the month.

Date field with the month and year pop-up

After selecting the date, if the field is configured that way, the time pop-up appears and the user can scroll for the necessary hour and minutes, and change AM to PM.

Date field with the time pop-up


The example below shows how to create a field for selecting a Driver’s license issue date. It will be a Date field, with only date values (as time is not needed here), that will synchronize to a PDF form.

Step 1: Add a Date Field.

Open Add Field panel. Add a Date field to the page. Enter the following values for the field settings:

Field

Value

Field Label

<b>Driver License (or ID) Issue Date</b>

Info

You can use HTML tags to format the label.

Meta Field Name

Owner1.DriverLicenseIDIssueDate

Display Type

Custom

A custom format with only the date picker will be shown to the user.

Custom Format

EEEE, MMMM d, y

The result will show the weekday and the full date, like this "Tuesday, January 5, 2016".

Enable Date

Selected

This will show the date selection pop-up to the user.

Enable Time

Deselected

This will hide the time selection pop-up from the user.

Size by content

Selected

The field size will be reduced to the size of the date entered.

Adding a Date field

Step 2: Apply the Changes.

Rw ui steps macro
Rw step

Click the Apply button at the bottom of the screen to close the Widget Design Screen and apply changes.

Rw step

Then click the Save button at the top of the Widget Details Screen to save these changes.

Step 3: Test the Widget.

Rw ui steps macro
Rw step

Test the widget by opening it.

Rw step

Click on the Calendar icon to open the date picker.

Rw step

Select a date. It should appear in the date field.

Date field in the wizard