Date Picker

Date selection. Angular provides a rich picker; HTML and React use the native <input type="date">.

Preview · Date Picker

Code

HTML · @primus/ui-core

<div class="vstack" style="max-width:280px">
  <label>Start Date <input type="date" /></label>
  <label>Contract Date <input type="date" min="2026-01-01" max="2026-12-31" /></label>
  <div data-field="error">
    <label>Expiry <input type="date" aria-invalid="true" /></label>
    <span class="error">Please select a valid date.</span>
  </div>
</div>

React

<label>Start Date
  <input type="date" value={date} onChange={e => setDate(e.target.value)} />
</label>

Angular

<primus-date-picker label="Start Date" placeholder="Select a date"
  (valueChange)="onDate($event)">
</primus-date-picker>
<primus-date-picker label="Contract Date" min="2026-01-01" max="2026-12-31"
  error="Please select a date." [required]="true">
</primus-date-picker>

Props

Prop	Type	Default	Description
label	string	''	Label text
value	`string	null`	null
min	string	—	Min date
max	string	—	Max date
error	string	''	Error message

Accessibility

• Uses <input type="date"> — natively accessible and keyboard operable
• Screen readers announce the full date when selected
• Add aria-label when the visual label is not adjacent to the input
• Min/max attributes prevent out-of-range dates from being submitted

Version history

See the Changelog for version history and breaking changes.