Date Element

The Date element provides a date picker input for selecting dates.

---

Overview

Date is ideal for:

• Birth dates
• Appointment scheduling
• Event dates
• Deadlines and due dates
• Any date selection

---

Adding a Date Element

1. Open the Website Builder
2. Find Date in the Elements panel
3. Drag it onto your page
4. Configure properties in the Floating Design Panel

---

Properties

General Tab

Property	Description
Question Text	Label displayed above the picker
Default Date	Initial date value

Default Date Options

Setting	Behavior
Current	Automatically sets to today's date
Specific Date	Pre-set to a particular date
Empty	No default selection

Color Tab

Property	Description
Panel Background	Container background
Input Background	Picker background
Input Border	Picker border
Input Text	Date text color

Dimensions Tab

Property	Description
Font Size	Date text size
Padding	Inner spacing
Border Radius	Corner rounding

---

Visual Display

The date element uses the browser's native HTML5 date picker:

• Click to open calendar view
• Navigate months/years
• Select a specific date
• Format adapts to user's locale

---

Use Cases

Birth Date

Label: "Date of Birth"
Default: (empty)

Event Date

Label: "Event Date"
Default: Current date

Deadline

Label: "Due Date"
Default: (specific future date)

Appointment

Label: "Preferred Date"
Default: Current date

---

Date Handling

• Dates are stored in ISO format (YYYY-MM-DD)
• Display format depends on browser/locale
• State updates are debounced for performance

---

Best Practices

1. Set sensible defaults - Use "current" for near-future dates

2. Label clearly - Specify what the date represents

3. Consider range limits - Some dates may not be valid choices

4. Account for time zones - Be aware of date interpretation

5. Test across browsers - Date pickers vary by browser

---

Questions?

If you have any questions, please don't hesitate to contact us. Alternatively, you can submit an issue on this platform.

Useful Links:

Web Elements - https://help.acenji.com/#/./create-web-application/elements/index Text Input - https://help.acenji.com/#/./create-web-application/elements/text-input/index

Was this article helpful?