Add a calendar widget to your heyflow that supports different date formats, date ranges and other display options such as weekdays only.
Adding the date picker block
In the blocks tab, navigate to input and drag the date picker block into your heyflow
Adjust the settings such as format and date ranges as needed
Just publish your heyflow and you’re good to go!
💡 Currently, we support an English and German translation for the months and days. You can change the meta language in your flow settings under General. All other languages automatically set the date picker to English.
Edit options
General
General
Sensitive: If activated, the values are not saved in our database (more information here).
Required: If activated, your users must make a selection before they can continue clicking in the flow.
Date range: When activated, flow visitors will need to provide a start and an end date.
Workdays only: When activated, flow visitors will not be able to select weekends.
Starting today: When activated, only dates in the future can be selected (e.g. appointment bookings).
Ending today: When activated only dates in the past can be selected (e.g. birth dates).
Start week on Monday: Defines whether Sunday or Monday is displayed as first day of the week.
Date format: Select from a wide range of formats such as DD.MM.YYYY, MM-DD-YYYY or YYYY/MM/DD.
Spacing
Spacing
Width: You can use this to adjust the maximum spread of the block and choose between S, M, L and maximum width.
Top, Bottom, Left and Right: You can use these options to set the distance to all sides. To do this, either use the slider or specify the exact number of pixels.
Decorators
Decorators
Prefix icon: Specify an extra field with an icon before the date picker input.
Suffix icon: Specify an extra field with an icon after the date picker input.
Appearance
Appearance
Visibility: Here you can select whether the block is only displayed in the mobile or desktop version or whether it is hidden completely.
Background colour: You can select a colour to be used as the background for the block.
Validation
Validation
Error message: Choose the message displayed, in case there is an error.
Labels & Variables
Labels & Variables
System label: Specify a system label for the block.
Variable: See Variable.