Date
Form field for selecting a date.
---
import Date from "@forms/date/Date.astro";
---
<Date label="Select Date" name="date" />---
blocks:
_component: building-blocks/forms/date
label: Select Date
name: date
---Overview
A form field for selecting dates with the browser’s native date picker. Supports label, name, placeholder, default value, and required options.
Properties
label string | default: My date
The label text for the date field.
name string | default: my_date
The name attribute for the date field.
required boolean | default: false
Whether the field is required.
value string | default: 2026-01-01T15:30:00
The default value for the date field (ISO8601 format).
min string
The minimum date allowed (ISO8601 format).
max string
The maximum date allowed (ISO8601 format).
Examples
With constraints
---
import Date from "@forms/date/Date.astro";
---
<Date label="Feb 2026 Date" max="2026-02-28" min="2026-02-01" name="eventdate" />---
blocks:
_component: building-blocks/forms/date
label: Feb 2026 Date
name: eventdate
min: '2026-02-01'
max: '2026-02-28'
---Required
---
import Date from "@forms/date/Date.astro";
---
<Date label="Birth Date" name="birthdate" required />---
blocks:
_component: building-blocks/forms/date
label: Birth Date
name: birthdate
required: true
---