Form date
Captures an ISO-formatted date with native browser date input behavior.
On this page
This docs is LLM-friendly and available as clean Markdown.
Supported browser agents can also use WebMCP to search, read, and open these docs. Learn more
Usage
import { GlFormDate } from "gitlab-ui-react/form-date";<GlFormDate aria-label="Due date" />Default
Use GlFormDate for a date that belongs to a submitted form. It uses a native date input and exposes the value as a yyyy-mm-dd string.
Date input
import { GlFormField, GlFormFieldLabel } from "gitlab-ui-react/form-field";
import { GlFormDate } from "gitlab-ui-react/form-date";
export default function FormDateExample() {
return (
<GlFormField className="max-w-xs">
<GlFormFieldLabel htmlFor="due-date">
Due date
</GlFormFieldLabel>
<GlFormDate id="due-date" />
</GlFormField>
);
}
Date limits
Set min and max to constrain the accepted range. The component shows its matching feedback and associates it with the input when the current value is outside the range.
Date with limits
Choose a date on or after September 1, 2026.
import { GlFormField, GlFormFieldLabel } from "gitlab-ui-react/form-field";
import { GlFormDate } from "gitlab-ui-react/form-date";
export default function FormDateLimitsExample() {
return (
<GlFormField className="max-w-xs">
<GlFormFieldLabel htmlFor="release-date">
Release date
</GlFormFieldLabel>
<GlFormDate
defaultValue="2026-08-20"
id="release-date"
min="2026-09-01"
max="2026-09-30"
minInvalidFeedback="Choose a date on or after September 1, 2026." />
</GlFormField>
);
}
Accessibility
- Associate the date input with a visible
GlFormFieldLabelby using matchinghtmlForandidvalues. - Keep the expected
yyyy-mm-ddformat understandable even when the browser presents a localized picker. - Localize
minInvalidFeedbackandmaxInvalidFeedback, and include any extra instructions througharia-describedby. - Use
GlFormDatefor dates submitted with a form; use a date picker when choosing a date performs an immediate action.
API
GlFormDate forwards supported form input attributes to its native date input.
| Prop | Description | Default |
|---|---|---|
value |
Controls the date as a yyyy-mm-dd string. |
— |
defaultValue |
Sets the initial uncontrolled date. | "" |
onValueChange |
Reports the date string after user interaction. | — |
min |
Sets the earliest accepted date. | null |
max |
Sets the latest accepted date. | null |
minInvalidFeedback |
Sets feedback for values earlier than min. |
"Must be after minimum date." |
maxInvalidFeedback |
Sets feedback for values later than max. |
"Must be before maximum date." |
id |
Sets the input ID; a fallback is generated when omitted. | Generated ID |