Skip to main content
Date Picker

The date selection block is a tool to request appointments or a date better.

Heyflow avatar
Written by Heyflow
Updated over a week ago

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

  1. In the blocks tab, navigate to input and drag the date picker block into your heyflow

  2. Adjust the settings such as format and date ranges as needed

  3. 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

  • 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

  • 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

  • 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

  • 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

  • Error message: Choose the message displayed, in case there is an error.

Labels & Variables

Did this answer your question?