Date and time play important role in forms as they provide a log of information and help you organize your forms in chronological order.

The form builder has three types of components for capturing date and time. They are:

  • Date/Time: This component displays a calendar and a clock for the user to select the date and time. This is used for entries like appointment dates and appointment time slots.

    For examples of this component, from sample forms, refer to the Aesthetics treatment form. The Treatment date field is a date/time field.

  • Day: This component is a combination of day, month, and year parts and the user has to select individual parts to enter the date. This can be used to capture the date of birth of the user.

  • Time: This component captures timestamps. It is typically used to mark the start and end times of appointments.

    For examples of this component, from sample forms, visit the Aesthetics treatment form. The Time fields under Treatment are time fields.

  1. To add a date component, from the Tools list, drag the Day component onto the form.

    To add a time component, from the Tools list, drag the Time component onto the form.

    To add a component for date and time together, from the Tools list, drag the Date/Time component onto the form.

  2. To customize the component, place the mouse pointer on the component and click Edit.

  3. To name the component, under the Basic tab, in the Label field, enter the name for the list.

    If you want to customize other settings, refer to the table below.

  4. Click Save.

Note: The settings listed in the table below are for all three components: Day, Time, and Date/Time. While customizing the components, you must make sure you are under the right tab mentioned for each setting.

Action

Perform these steps

Display text to guide the user

Note: A guidance text includes any of the following:

  • Expected action in the field

  • Examples of an entry

  • Instructions to make an entry

For example, if you want to display a specific date as an example or guide the user by displaying the text "Enter date" in the field.

  • For the Day component, under the Day, Month, and Year tabs, enter the guidance text in the respective Placeholder fields.

  • For the Date/Time component, under the Basic tab, enter the guidance text in the Placeholder field.

Prevent the user from editing the value in the field

Note: In this context, a user is not just the guest but anyone who fills the form.

For example, if you want to set a specific date, say the current date as the response, and make it non-editable, you can disable the field.

Under the Basic tab, select the Disabled check box.

To not display the field label or input labels (day, month, or year)

For example, if multiple fields are placed in a table with a common heading, say the selection of the dates of multiple appointments. You can hide the labels of the field. Similarly, if the field is labeled as "Date". You can hide the individual day, month, and year labels to save space on the form as the filed label is present on the form.

Under the Basic tab, select the Hide label or Hide input labels check box.

Allow users to type date and time into the Date/Time field

This field displays a calendar and clock to select the date and time. If the user's device doesn't support the drop-down panel, you can enable manual input so they can type date and time as an entry.

Under the Basic tab, select the Allow manual input check box.

Customize how you accept entries for the Day component

Note: There are two types of entries that you can accept as entries for your day component.

  • Number: A number entry with buttons to increase and decrease values.

  • Select: A drop-down list with days, months, and years as options in the list.

For the Day component, under the Day, Month, and Year tabs, from the Type list, select Number or Select.

To not display the day, month, or year part of the Day component

For example, a form for an offer that lasts only for a month (or for several months in the same year). You can hide the year part of the field to make the field simple.

For the Day component, under the Day, Month, and Year tabs, from the Type list, select the Hidden check box.

Place the day field before the month and year fields in the component

For the Day component, under the Day tab, select the Day first check box.

Set a format for the date input

For the Date/Time component, under the Date tab, from the Select date format list, select a date format.

Allow only a specific range of years to be input into the Day component

For example, you want some offers to be applicable only to the guests who signed up in a specific duration, say between 2015 and 2020. You can configure the field to take year inputs only between the years 2015 and 2020.

For the Day component, under the Year tab, in the Minimum year and Maximum year fields, enter the minimum and maximum years you want to allow in the field.

Accept only date or only time inputs in the Date/Time field

You can configure this component to accept only date, only time, or both date and time by a combination of the described check boxes. For example, if you have fields for multiple appointments for a guest on the same day. You can disable the date input on the fields and capture only the time of appointments. Also, if you want to maintain a log of all the availed services in a membership on different dates. You can disable time input and capture only the dates on which the services were availed.

For the Date/Time component, under the Date or Time, tabs, select the Enable date input check box to accept date inputs and select Enable time input check box to accept time inputs.

Allow the date inputs to be only after a particular date

For example, some cosmetic services such as tanning can be taken in two sessions. It is recommended to wait a certain number of days in between each session. You can set the minimum date for the second appointment to be a number of days after the first one to make sure enough gap is maintained.

For the Date/Time component, under the Date tab, in the Use calendar to set min date field, set a date.

To not accept a particular date or range of dates in the Date/Time field

For example, your center is under renovation and you want to stop taking appointments for some days. You can disable users entering the dates by disabling some dates.

For the Date/Time component, under the Date tab, in the Disable specific dates or dates by range field, enter a date or a range of dates that you want to disable.

Configure the field to not accept weekends or weekdays as inputs

For the Date/Time component, under the Date tab, select the Disable weekends or Disable weekdays check box.

Set the date input to the field as the current date

For example, you want to capture the exact date when the user has consented to the terms and conditions on the form. You can set the date field below the signature field to reflect the current date.

For the Date/Time component, under the Date tab, from the Default to today's date list, select a date format.

Change the time format

Note: By default, the time on the form follows the 24-hour format. You must select this setting if you want it to be in the 12-hour format

For the Date/Time component, under the Time tab, from the 12-hour time (AM/PM) list, select a date format.

Set a specific date or time as the default value for the field

For example, if you want a specific date or time to be already entered when the form opens, you can add it as the default value.

Under the Data tab, from the Default value drop-down list, select a value.

Ensure that the guest cannot change the contents of the field

For example, fields for the therapist's signature or doctor's notes can be made read-only in the guest's view.

Under the Basic tab, select the Make field read-only for guest (on CMA, Kiosk, Webstore, Zenoti Mobile guest mode) check box.

To not display the field to the guests on CMA, Kiosk, Webstore, ZMA guest mode

For example, fields reserved for office use can be hidden from the guest.

Under the Basic tab, select the Hide field from guest (on CMA, Kiosk, Webstore, Zenoti Mobile guest mode) check box.

Enable the entry of multiple values in the field

For example, you want to capture the time stamps of the appointment start and end times in the same field. You can do so by selecting this setting.

Under the Data tab, select the Multiple Values check box.

Make the field or a part of the field mandatory

  • For the Day component, under the Validation tab, select the appropriate check box.

  • For the Date/Time and Time components, under the Validation tab, select the Required check box.

Allow only a specific date range to be input

For example, you want to provide an offer to the guests who took their first service during a specific duration. You can set the field to have a minimum and maximum date for guests who took the service during a specific duration.

Under the Validation tab, in the Minimum day and Maximum day fields, enter the first and last dates you want to allow in the field as entries.

Display an error message on the form when validation is not followed

For example, when the field is set to accept only a specific set of dates as entries and the user enters a date that does not belong to those dates. You can display an error message guiding the user to input the right date.

Under the Validation tab, in the Custom error message field, enter the error message you want to display.

Note

You can make a field appear or disappear on the form based on the value of another field.

Did this answer your question?