---
title: Calendar
slug: generic-onboarding/calendar
description: Learn how to easily insert a Calendar element for date selection on your webpage with this comprehensive document. Explore field details, prefilling options, enabling variables, date formats, and toggle buttons for fine-tuning your requirements. Discover 
docTags: 
createdAt: 2023-03-01T11:05:00.000Z
---

This element enables inserting a Calendar to the page in case a date needs to be selected for easy selection.

![](https://api.archbee.com/api/optimize/w0YdjmC6Uxu0AJ6sPj9OT/YOlvg_a8Dq0gUGtSEXlZr_image.png "Element Details of Calender")

### Field Details

- **Variable Name:** The variable that is used to identify the element is entered here.
- **Label Text:** Label text is entered here.
- **Placeholder Text:** This is the short info that is displayed in the input field before the user enters a value.
- **Hint Text: **This is used so that the user can better understand what the element is used for.
- **Regex: **The pattern is used to do pattern-matching "search-and-replace" functions on text.
- **Error Message: **This message is displayed when input is invalid.

### Prefilling Options

- **Prefill Page: **The page from the flow that we want to pull the prefill data from can be chosen.
- **Prefill Variable: **The prefill variable can be chosen from the prefill page using this dropdown.

### Choose when to enable variable 

This is used to select when to enable a variable depending on the condition such as:

- To enable when the current variable’s value exists.
- To enable when the current variable’s value is defined.

### Type of Date 

It is a library of some standard types of date format.

### Toggle Buttons

- **Required: **To enable whether to make the variable required or not.
- **Non-Editable:** To enable whether to make the field input value non-editable or not.
- **Hide this field from the user: **This toggle is given to enable the option to hide the selected field of the element from the user’s view.
- [Hide fields from Backops](docId\:seG7CPO1Jycu1qXE9368f): This toggle when enabled hides the field from the backops user.
- [Enable backops users to edit](docId\:seG7CPO1Jycu1qXE9368f): This toggle enables backops users to edit the field and override the customer's input.
- [Input Data Processing](docId\:gpKZruPXMyC1g4amWScwi)**: **This toggle is given to select whether the data entered should have a data formatting option or not such as concatenateString, calculateAge, differenceBetweenDates, trimSpacesString, uppercaseString, lowercaseString, differenceBetweenDatesInDays, differenceBetweenDatesInMonths, and sorted array variable.

:::hint{type="info"}
### Getting help

Please feel free to contact us if you have any questions, require clarification, or have ideas for how to make the documents or any of our services better.


You can reach out to us at [help@signzy.com](#).
:::