---
url: "https://vueda.dev/v3/reference/theming/keys/WidgetDateRangeField.md"
title: "WidgetDateRangeField"
---

# WidgetDateRangeField

Source: `client/lib/theme/vueda-tailwind/widgets/index.js`

> Pass-through hook for the segment shell. The shell recipe lives on [DateRangeField.root](/v3/reference/theming/keys/DateRangeField.md#theme-key-DateRangeField-root).

Vue component: [WidgetDateRangeField](/v3/reference/api/vue/WidgetDateRangeField.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [field](/v3/reference/theming/keys/WidgetDateRangeField.md#theme-key-WidgetDateRangeField-field) |  | Pass-through hook for the segment shell. The shell recipe lives on [DateRangeField.root](/v3/reference/theming/keys/DateRangeField.md#theme-key-DateRangeField-root). |
| [literal](/v3/reference/theming/keys/WidgetDateRangeField.md#theme-key-WidgetDateRangeField-literal) |  | Pass-through hook for the literal separators between date segments ("/"). Segment type comes from [DateRangeFieldInput.root](/v3/reference/theming/keys/DateRangeFieldInput.md#theme-key-DateRangeFieldInput-root). |
| [trigger](/v3/reference/theming/keys/WidgetDateRangeField.md#theme-key-WidgetDateRangeField-trigger) | 4 classes | Calendar popover trigger, pinned to the field's end edge so it lands where the [WidgetCombobox.trigger](/v3/reference/theming/keys/WidgetCombobox.md#theme-key-WidgetCombobox-trigger) chevron does. Muted at rest and inked on hover, because the segments, not this button, are the field's primary target. |
| [triggerIcon](/v3/reference/theming/keys/WidgetDateRangeField.md#theme-key-WidgetDateRangeField-triggerIcon) | `size-4 shrink-0 text-center leading-4 select-none` | The trigger's glyph. Applied to a registered `calendar` icon and to the built-in fallback character alike, so a registry with no `calendar` entry still gets a sized glyph that inherits the trigger's color. An icon component that carries its own sizing keeps it: Font Awesome sizes by `em`, which matches the [WidgetCombobox.trigger](/v3/reference/theming/keys/WidgetCombobox.md#theme-key-WidgetCombobox-trigger) chevron. |
| [separator](/v3/reference/theming/keys/WidgetDateRangeField.md#theme-key-WidgetDateRangeField-separator) | `px-1 text-muted-foreground` | The en dash between the start and end segment groups. Muted and padded so it reads as a range connector rather than another segment. |
| [popoverContent](/v3/reference/theming/keys/WidgetDateRangeField.md#theme-key-WidgetDateRangeField-popoverContent) |  | Pass-through hook for the calendar popover panel. The floating surface recipe lives on [PopoverContent.root](/v3/reference/theming/keys/PopoverContent.md#theme-key-PopoverContent-root). |

<a id="theme-key-WidgetDateRangeField-field"></a>

## field

> Pass-through hook for the segment shell. The shell recipe lives on [DateRangeField.root](/v3/reference/theming/keys/DateRangeField.md#theme-key-DateRangeField-root).

Source: `client/lib/theme/vueda-tailwind/widgets/WidgetDateRangeField.theme.js:17`

<a id="theme-key-WidgetDateRangeField-literal"></a>

## literal

> Pass-through hook for the literal separators between date segments ("/"). Segment type comes from [DateRangeFieldInput.root](/v3/reference/theming/keys/DateRangeFieldInput.md#theme-key-DateRangeFieldInput-root).

Source: `client/lib/theme/vueda-tailwind/widgets/WidgetDateRangeField.theme.js:21`

<a id="theme-key-WidgetDateRangeField-trigger"></a>

## trigger

> Calendar popover trigger, pinned to the field's end edge so it lands where the [WidgetCombobox.trigger](/v3/reference/theming/keys/WidgetCombobox.md#theme-key-WidgetCombobox-trigger) chevron does. Muted at rest and inked on hover, because the segments, not this button, are the field's primary target.

Default classes:

```text
ml-auto flex shrink-0 items-center justify-center cursor-pointer
text-muted-foreground hover:text-foreground transition-colors
disabled:pointer-events-none disabled:text-disabled-foreground
[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4
```

Source: `client/lib/theme/vueda-tailwind/widgets/WidgetDateRangeField.theme.js:25`

<a id="theme-key-WidgetDateRangeField-triggerIcon"></a>

## triggerIcon

> The trigger's glyph. Applied to a registered `calendar` icon and to the built-in fallback character alike, so a registry with no `calendar` entry still gets a sized glyph that inherits the trigger's color. An icon component that carries its own sizing keeps it: Font Awesome sizes by `em`, which matches the [WidgetCombobox.trigger](/v3/reference/theming/keys/WidgetCombobox.md#theme-key-WidgetCombobox-trigger) chevron.

Default classes:

`size-4 shrink-0 text-center leading-4 select-none`

Source: `client/lib/theme/vueda-tailwind/widgets/WidgetDateRangeField.theme.js:40`

<a id="theme-key-WidgetDateRangeField-separator"></a>

## separator

> The en dash between the start and end segment groups. Muted and padded so it reads as a range connector rather than another segment.

Default classes:

`px-1 text-muted-foreground`

Source: `client/lib/theme/vueda-tailwind/widgets/WidgetDateRangeField.theme.js:44`

<a id="theme-key-WidgetDateRangeField-popoverContent"></a>

## popoverContent

> Pass-through hook for the calendar popover panel. The floating surface recipe lives on [PopoverContent.root](/v3/reference/theming/keys/PopoverContent.md#theme-key-PopoverContent-root).

Source: `client/lib/theme/vueda-tailwind/widgets/WidgetDateRangeField.theme.js:48`