---
url: "https://vueda.dev/v3/reference/api/vue/WidgetDuration.md"
title: "WidgetDuration"
---

# WidgetDuration

## Overview

A duration input widget that renders separate numeric spinners for days, hours, minutes, and
seconds. Each time unit can be shown or hidden independently via props. The value is DRF's
duration string (`[D ]HH:MM:SS`), as a Django `DurationField` sends and reads it, or with
`seconds` a number of seconds, as `DurationSecondsField` sends and reads it. The shown units
split the value between them, so a duration of two days reads as 48 hours when days are hidden.
Clearing a unit while the rest of the value is zero sets the value to `null`. Entering `0` keeps a
zero duration. A negative value, such as Django's `-1 23:00:00` for minus one hour, shows a
"Negative" segment with a minus sign before the spinners. The spinners show the duration's size,
and editing them keeps the value negative.

Theme entry: [WidgetDuration](/v3/reference/theming/keys/WidgetDuration.md)

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| <span id="prop-name">name</span> | `String` |  | `undefined` | The widget name; falls back to the field context value when omitted. |
| <span id="prop-label">label</span> | `String` |  | `undefined` | The label displayed next to the widget; falls back to the field context value when omitted. |
| <span id="prop-help">help</span> | `String` |  | `undefined` | Help text displayed alongside the widget; falls back to the field context value when omitted. |
| <span id="prop-readOnly">readOnly</span> | `Boolean` |  | `false` | Whether the widget is read-only; falls back to the field context value when omitted. |
| <span id="prop-required">required</span> | `Boolean` |  | `undefined, // let the default from field context take over` | Whether the widget is required; falls back to the field context value when undefined. |
| <span id="prop-modelValue">modelValue</span> | `String\|Number\|Boolean\|Array\|Object` |  | `undefined` | The widget's bound value (v-model); used only in contextless mode. |
| <span id="prop-fieldToWidget">fieldToWidget</span> | `Object\|Function` |  | `null` | Adapter that converts the form model value into a value suitable for the widget UI. |
| <span id="prop-widgetToField">widgetToField</span> | `Object\|Function` |  | `null` | Adapter that converts the widget UI value back into a form model value for validation and submission. |
| <span id="prop-invalid">invalid</span> | `Boolean` |  | `undefined` | Manually set the invalid state when not in a field context. |
| <span id="prop-warning">warning</span> | `Boolean` |  | `undefined` | Manually set the warning state when not in a field context. |
| <span id="prop-disabled">disabled</span> | `Boolean` |  | `false` | Whether the widget is disabled. |
| <span id="prop-disabledFn">disabledFn</span> | `Function` |  | `null` | A function that returns whether the widget should be disabled; takes precedence over the disabled prop. |
| <span id="prop-contextless">contextless</span> | `Boolean` |  | `false` | When true, the widget ignores any surrounding field or form context and manages its own state. |
| <span id="prop-displayDependencies">displayDependencies</span> | `Array` |  | `() => []` | Field paths whose values the widget needs for display logic; registered with the field context. |
| <span id="prop-themeOverride">themeOverride</span> | `Object` |  | `null` | A partial ThemeObject keyed by component name, merged over this component's theme and provided to descendants. |
| <span id="prop-showDays">showDays</span> | `boolean` |  | `false` | When true, renders the days spinner. |
| <span id="prop-showHours">showHours</span> | `boolean` |  | `false` | When true, renders the hours spinner. |
| <span id="prop-showMinutes">showMinutes</span> | `boolean` |  | `true` | When true, renders the minutes spinner. |
| <span id="prop-showSeconds">showSeconds</span> | `boolean` |  | `false` | When true, renders the seconds spinner. |
| <span id="prop-seconds">seconds</span> | `boolean` |  | `false` | When true, the value is a number of seconds instead of a duration string. |

## Events

| Name | Description |
| --- | --- |
| `update:modelValue` | Emitted when the widget value changes. |

[Full event reference](/v3/reference/api/vue/WidgetDuration/events.md)

## Source

`client/lib/widgets/WidgetDuration.vue`