Calendar - Date element
Compose Enterprise is going through a design update. The illustrations on this page might be of the old design, but the information is up to date. Thank you for your patience during this update!
The date element allows the end-user to select a date through a date picker. This provides the end-user with a calendar for selecting the date, and makes it easier for the end-user to enter the correct date format in the form. The date element provides you with multiple options and you may for instance display months and years, show the week number or restrict the selection of dates to a pre-set time frame.
To use the Date element please navigate to the Builder section of the Form Builder. Under Elements you will find the Date element. Select the element, and the new date element will be added to the canvas.
Select the Date element to display the Properties panel on the right hand side. To learn more about the general properties for questions, please see the user guide on how to Build a simple form. Choose whatever question title you’d like, then click the Date Options button in the properties panel.
A pop-up with multiple date field element options appear. Please select the settings you would like to use for your date picker. Note: Only the Restrict date range settings affect the date picker in bootstrap. All settings effect the date pickers in standard or responsive HTML.
For this example we want to provide the respondent user with the possibility to view year, month and week, while selecting a date. We therefore check the boxes to Display year, month and week.
When display year is selected we also need to decide how many years we would like to show at the same time. When the end-user selects the date, the current year will by default be selected (unless you have chosen to restrict the date range). If the respondent user goes back and re-selects the date, the available range of years shown in the dropdown list will be relative to the selected year. In this example we would like to display the default of +/- 10 years from the selected date. The will enable a list with +/- 10 years from the currently selected date. Note: The illustrations were created in 2017.
Let’s add one more date element and open the Date Options menu. For this date element we want to restrict the date range the end-user can select from. We want to display month and week, including dates of other months, so check of these boxes under Date Options. We also want the respondent to see two calendar months at the time, so we’ll choose 2 from the number of months to show dropdown.
Check off Restrict date range. You may select a fixed range, or you may as this example shows add a range that is relative to the end-users current date. For this example we will restrict the range to 20 days before current date and 10 days after current date. Select Relative and under Start enter 20 days, and under End enter 10 days.
The specifications are reflected in the respondent view.
Remember to save the form draft and create a version to view the settings in a workflow.