Skip to content

Date

The date filter provides a calendar-based date picker.
It supports both single date and range mode, making it ideal for filtering by creation time, update date, etc.


Component API

PropTypeDescription
type'date'Must be set to 'date'
rangebooleanEnables range mode with "from" and "to" fields
layout'inline' | 'vertical' | 'popover'Layout mode
labelstringField label
defaultstring[]Optional default value

Examples

Inline Date Range Filter

vue
<FilterField
  name="createdAt"
  type="date"
  label="Created At"
  layout="inline"
/>

Vertical Single Date Filter

vue
<FilterField
  name="createdAt"
  type="date"
  label="Created At"
  layout="vertical"
/>
Created At

Popover Date Range Filter

vue
<FilterField
  name="createdAt"
  type="date"
  label="Created At"
  layout="popover"
/>