How to add a date and time picker field to your registration pages

As part of your event registration journey, you can include a configurable date and time picker in the registration page for your attendees to complete.

This is a great way to collect logistic information such as arrival or departure times.

You can choose to use:

• A date picker only
• A time picker only
• A combined date and time picker.

Whatever the option you choose above, you can select the format of the date or time, and even use a date range for attendees to choose from.

How does this look in the registration form?

As an example, you may want to ask your attendees to enter their estimated date and time of arrival at the event:

The date/time picker field is added like any other field to the registration page, either on the main page or any additional form.

Please note that in order to make the date/time picker field available to be added to the registration page, you will first need to create the relevant field (metadata) in the workspace metadata manager.

Creating and configuring the metadata for the date and time picker

To create the date/time picker user metadata, you will need to access the metadata manager in your workspace. In the User metadata type, you can add a new metadata.

For example, you can call it "When will you be arriving?", and then select the type "formatted-datetime" for the metadata:

Next, you can choose how you would like the date and time picker to work, by clicking on Edit options:

Based on your needs, you can choose whether to enable a date picker, a time picker, or both combined.

For the date, you can choose the format you want to use: 

You can also enable Set specific date range, if needed, so that the registrants can only select a date between a pre-configured start and end date:

For the time, you can choose the format you want to use: 

The above options will be applied automatically to the field when used in a registration page form.

Note: The Keep original data timezone option visible here is only applicable to integrations, when this metadata is used for importing dates and times from third party platforms. It has no effect at all when using this metadata on registration pages.

Adding the date and time picker to the registration page form

Once the date/time picker metadata is added and configured in the workspace metadata (as described above), head over to the registration page where you can now add the date/time picker field:

Once the time picker field is added to the registration form it will be available for your registrants to use when they register to the event. It will work exactly as configured via the metadata manager.

If you need to use multiple date/time picker fields, that each have different configurations, you can create multiple distinct date and time picker user metadata, and use each one wherever needed.

How does the time picker look in the registration page?

Once the time picker field is added to the registration page, your registrants will be able to use when they register to the event:

Select their arrival date:

Select their arrival time:

Confirm their choice: