Date range
Filter records by a period such as “This month”, which stays current, or choose two dates in either order.
<script setup lang="ts">import { ref } from 'vue'import type { DateRangeValue, RangePreset } from 'grani'import { UiCard, UiTableToolbar, UiDateRange } from 'grani' // A named preset is enough: its days are counted from today when the page runs.const named = (preset: RangePreset) => ref<DateRangeValue>({ from: null, to: null, preset }) const period = named('prev_month') const search = ref('')</script> <template> <UiCard :padded="false" class="w-full max-w-xl"> <UiTableToolbar v-model:search="search" search-placeholder="Search invoices"> <template #start="{ size }"> <UiDateRange v-model="period" ariaLabel="Issued" :size="size" /> </template> </UiTableToolbar> </UiCard></template>
Also called date range picker, period picker, period filter.
Usage
<UiDateRange /> With GraniResolver in the Vite config, a template needs no import: set it up once.
API
| Name · type | Default | Description |
|---|---|---|
| Value | ||
| modelValueDateRangeValue | null= null | null | The period (v-model): from and to as YYYY-MM-DD, null for no bound, and preset, the named period or custom for days picked on the calendar. A named one wins over the days: they are counted again from today. A null preset makes days custom and none All time. |
| Behavior | ||
| minstring | The first day a period can reach, inclusive: a preset partly before it is cut there, one wholly before it is disabled. | |
| maxstring | The last day a period can reach, inclusive: a preset partly after it is cut there, one wholly after it is disabled. | |
| stepperboolean= false | false | Two arrows before the button that move the period back or forward by its own length: a month by a month, a week by seven days. |
| Look | ||
| alignstart | center | end= "start" | "start" | Which edge of the button the panel lines up with. |
| sizexs | sm | md | Step of the control ladder, as the rest of the toolbar row. Unset, the app's size (createGrani({ size })), sm by default. | |
| Form and access | ||
| idstring | Own id of the button, for a label elsewhere. Inside UiField, the field's id takes precedence. | |
| ariaLabelstring | What the button filters by, read before the days: "Period" by default, "Paid" for a column of payment days. | |
| disabledboolean= false | false | The period cannot be changed: the button and the arrows are off, and an open panel closes. |
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 |
|---|---|
| One date in a form | Date picker |
| A day alone on a page | Calendar |
| Filters by other dimensions | Filter |
| A date in a column | UiDateCell |