Date picker
Type a date as your language writes it, or pick it from a calendar or a preset, while the field keeps a steady width.
INV-0042
Acme Corp · €1 240.00
The day the money reached the account.
<script setup lang="ts">import { ref } from 'vue'import { UiCard, UiField, UiDatePicker } from 'grani' const paid = ref<string | null>('2026-09-24')</script> <template> <UiCard title="INV-0042" description="Acme Corp · €1 240.00" class="w-full max-w-sm"> <UiField label="Paid on" description="The day the money reached the account."> <UiDatePicker v-model="paid" clearable class="w-full" /> </UiField> </UiCard></template>
Also called date input, date field, calendar input.
Usage
<UiDatePicker /> With GraniResolver in the Vite config, a template needs no import: set it up once.
API
| Name · type | Default | Description |
|---|---|---|
| Value | ||
| modelValuestring | null= null | null | The day, YYYY-MM-DD (v-model); null for none. |
| Behavior | ||
| minstring= "" | "" | The first day that can be picked, inclusive. |
| maxstring= "" | "" | The last day that can be picked, inclusive. |
| presetsboolean | (DatePresetId | DatePreset)[]= false | false | Days from today under the field, as one-click picks: true for the default seven, or a list of ids and { label, days }. |
| clearableboolean= false | false | A cross that empties the field, as UiSelect's; never shown on a required field. |
| Look | ||
| placeholderstring= "" | "" | Shown while empty; defaults to "Choose a date". |
| sizexs | sm | md | Step of the control ladder. Unset, the app's size (createGrani({ size })), sm by default. | |
| Form and access | ||
| requiredboolean= false | false | Standalone only: empty is an error, said to a reader, and no cross. Inside UiField the field's required says so. |
| disabledboolean= false | false | The field cannot be changed: a disabled plate, no calendar, nothing sent with a form. |
| invalidboolean= false | false | Standalone only: the value is wrong. Inside UiField the field's error says so. |
| ariaLabelstring | Standalone only: the accessible name. Inside UiField the label names it. | |
| namestring | Sends the day with a form, under this name. | |
| idstring | Id of the button, standalone; inside UiField the field's id wins. | |
Attributes: class and style stay on the outer element; the rest (native attributes, aria-*, data-testid) reach the control inside it.
When to use another component
| When you need | Take |
|---|---|
| A period in a toolbar | Date range |
| A month on a page with no field | Calendar alone |
| A time of day | Time picker beside it |