Inputtijd

TijdveldTijdbereikveldGitHub
Een ingang voor het selecteren van een tijd.

Gebruik

Gebruik de v-model-richtlijn om de geselecteerde tijd te regelen.

12
30
PM
<script setup lang="ts">
import { Time } from '@internationalized/date'

const value = shallowRef(new Time(12, 30, 0))
</script>

<template>
  <UInputTime v-model="value" />
</template>
<script setup lang="ts">
import { shallowRef } from 'vue'
import { Time } from '@internationalized/date'

const value = shallowRef(new Time(12, 30, 0))
</script>

<template>
  <UInputTime v-model="value" />
</template>

Gebruik de default-value prop om de beginwaarde in te stellen wanneer u de status niet hoeft te controleren.

9
45
AM
<script setup lang="ts">
import { Time } from '@internationalized/date'

const defaultValue = shallowRef(new Time(9, 45, 0))
</script>

<template>
  <UInputTime :default-value="defaultValue" />
</template>
<script setup lang="ts">
import { shallowRef } from 'vue'
import { Time } from '@internationalized/date'

const defaultValue = shallowRef(new Time(9, 45, 0))
</script>

<template>
  <UInputTime :default-value="defaultValue" />
</template>
Dit onderdeel gebruikt het @internationalized/date-pakket voor locale-bewuste opmaak. Het tijdformaat wordt bepaald door de locale-prop van de App-component.
Dit onderdeel gebruikt het @internationalized/date-pakket voor locale-bewuste opmaak. Het tijdformaat wordt bepaald door de locale-prop van de App-component.

Bereik

Gebruik de range prop om de selectie van het tijdbereik met begin- en eindtijden mogelijk te maken.

9
00
AM
5
30
PM
<script setup lang="ts">
import { Time } from '@internationalized/date'

const value = shallowRef({ start: new Time(9, 0, 0), end: new Time(17, 30, 0) })
</script>

<template>
  <UInputTime range v-model="value" />
</template>
<script setup lang="ts">
import { shallowRef } from 'vue'
import { Time } from '@internationalized/date'

const value = shallowRef({ start: new Time(9, 0, 0), end: new Time(17, 30, 0) })
</script>

<template>
  <UInputTime range v-model="value" />
</template>

Hour Cyclus

Gebruik de hour-cycle prop om de uurcyclus van de InputTime te wijzigen. Standaard is 12.

16
30
<script setup lang="ts">
import { Time } from '@internationalized/date'

const defaultValue = shallowRef(new Time(16, 30, 0))
</script>

<template>
  <UInputTime :hour-cycle="24" :default-value="defaultValue" />
</template>
<script setup lang="ts">
import { shallowRef } from 'vue'
import { Time } from '@internationalized/date'

const defaultValue = shallowRef(new Time(16, 30, 0))
</script>

<template>
  <UInputTime :hour-cycle="24" :default-value="defaultValue" />
</template>

Kleur

Gebruik de color prop om de kleur van de InputTime te wijzigen.

––
––
AM
<template>
  <UInputTime color="neutral" highlight />
</template>
De highlight prop wordt hier gebruikt om de focusstatus weer te geven. Het wordt intern gebruikt wanneer er een validatiefout optreedt.

Variant

Gebruik de variant prop om de variant van de InputTime te wijzigen.

––
––
AM
<template>
  <UInputTime variant="subtle" />
</template>

Grootte

Gebruik de size prop om de grootte van de InputTime te wijzigen.

––
––
AM
<template>
  <UInputTime size="xl" />
</template>

Icoon

Gebruik de icon prop om een Icon in de InputTime weer te geven.

––
––
AM
<template>
  <UInputTime icon="i-lucide-clock" />
</template>
Gebruik de leading en trailing rekwisieten om de pictogrampositie in te stellen of de leading-icon en trailing-icon rekwisieten om voor elke positie een ander pictogram in te stellen.

Afscheider pictogram

Gebruik de separator-icon prop om de Icon van de range separator te wijzigen. Standaard i-lucide-minus.

––
––
AM
––
––
AM
<template>
  <UInputTime range separator-icon="i-lucide-arrow-right" />
</template>
U kunt dit pictogram globaal aanpassen in uw app.config.ts onder ui.icons.minus-sleutel.
U kunt dit pictogram globaal aanpassen in uw vite.config.ts onder ui.icons.minus-toets.

Avatar bewerken

Gebruik de avatar prop om een Avatar in de InputTime weer te geven.

––
––
AM
<template>
  <UInputTime
    :avatar="{
      src: 'https://github.com/vuejs.png',
      loading: 'lazy'
    }"
    size="md"
    variant="outline"
  />
</template>

Uitgeschakeld

Gebruik de disabled prop om de InputTime uit te schakelen.

––
––
AM
<template>
  <UInputTime disabled />
</template>

Voorbeelden

Binnen een FormField

U kunt de InputTime binnen een FormField onderdeel gebruiken om een label, helptekst, vereiste indicator, enz. Weer te geven.

12
30
PM
Specify the time
<script setup lang="ts">
import { Time } from '@internationalized/date'

const time = shallowRef(new Time(12, 30, 0))
</script>

<template>
  <UFormField label="Time" help="Specify the time" required>
    <UInputTime v-model="time" />
  </UFormField>
</template>

<script setup lang="ts">
import { shallowRef } from 'vue'
import { Time } from '@internationalized/date'

const time = shallowRef(new Time(12, 30, 0))
</script>

<template>
  <UFormField label="Time" help="Specify the time" required>
    <UInputTime v-model="time" />
  </UFormField>
</template>

API

Props

Prop Default Type
as
'div'
any

The element or component this component should render as.

color
'primary'
"primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral"
variant
'outline'
"outline" | "soft" | "subtle" | "ghost" | "none"
size
'md'
"xs" | "sm" | "md" | "lg" | "xl"
highlight
boolean

Highlight the ring color like a focus state.

fixed
boolean

Keep the mobile text size on all breakpoints.

autofocus
boolean
autofocusDelay
0
number
separatorIcon
appConfig.ui.icons.minus
any

The icon to use as a range separator.

range
false
R

Enable time range selection.

defaultValue
Time | CalendarDateTime | ZonedDateTime
modelValue
null | Time | CalendarDateTime | ZonedDateTime
icon
any

Display an icon based on the leading and trailing props.

avatar
AvatarProps

Display an avatar on the left side.

leading
boolean

When true, the icon will be displayed on the left side.

leadingIcon
any

Display an icon on the left side.

trailing
boolean

When true, the icon will be displayed on the right side.

trailingIcon
any

Display an icon on the right side.

loading
boolean

When true, the loading icon will be displayed.

loadingIcon
appConfig.ui.icons.loading
any

The icon when the loading prop is true.

defaultPlaceholder
Time | CalendarDateTime | ZonedDateTime
placeholder
Time | CalendarDateTime | ZonedDateTime
hourCycle
12 | 24

The hour cycle used for formatting times. Defaults to the local preference

step
DateStep

The stepping interval for the time fields. Defaults to 1.

stepSnapping
boolean

Whether to enforce snapping the value to the nearest step increment after input. Defaults to false.

granularity
"hour" | "minute" | "second"

The granularity to use for formatting times. Defaults to minute if a Time is provided, otherwise defaults to minute. The field will render segments for each part of the date up to and including the specified granularity

hideTimeZone
boolean

Whether or not to hide the time zone segment of the field

maxValue
Time | CalendarDateTime | ZonedDateTime
minValue
Time | CalendarDateTime | ZonedDateTime
locale
string

The locale to use for formatting dates

disabled
boolean

Whether or not the time field is disabled

readonly
boolean

Whether or not the time field is readonly

id
string

Id of the element

name
string

The name of the field. Submitted with its owning form as part of a name/value pair.

required
boolean

When true, indicates that the user must set the value before the owning form can be submitted.

isTimeUnavailable
(date: DateValue): boolean

A function that returns whether or not a time is unavailable

ui
{ base?: SlotClass; leading?: SlotClass; leadingIcon?: SlotClass; leadingAvatar?: SlotClass; leadingAvatarSize?: SlotClass; trailing?: SlotClass; trailingIcon?: SlotClass; segment?: SlotClass; separatorIcon?: SlotClass; }

Slots

Slot Type
leading
{ ui: object; }
default
{ ui: object; }
trailing
{ ui: object; }
separator
{ ui: object; }

Uitzendt

Event Type
update:modelValue
[value: InputTimeModelValue<R>]
update:placeholder
[date: TimeValue] & [date: TimeValue]
change
[event: Event]
blur
[event: FocusEvent]
focus
[event: FocusEvent]

Thema

app.config.ts
export default defineAppConfig({
  ui: {
    inputTime: {
      slots: {
        base: [
          'group relative inline-flex items-center rounded-md select-none',
          'transition-colors'
        ],
        leading: 'absolute inset-y-0 start-0 flex items-center',
        leadingIcon: 'shrink-0 text-dimmed',
        leadingAvatar: 'shrink-0',
        leadingAvatarSize: '',
        trailing: 'absolute inset-y-0 end-0 flex items-center',
        trailingIcon: 'shrink-0 text-dimmed',
        segment: [
          'rounded-sm text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75',
          'transition-colors'
        ],
        separatorIcon: 'shrink-0 size-4 text-muted'
      },
      variants: {
        fieldGroup: {
          horizontal: 'not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1]',
          vertical: 'not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none focus-visible:z-[1]'
        },
        size: {
          xs: {
            base: [
              'px-2 py-1 text-sm/4 gap-1',
              'gap-0.25'
            ],
            leading: 'ps-2',
            trailing: 'pe-2',
            leadingIcon: 'size-4',
            leadingAvatarSize: '3xs',
            trailingIcon: 'size-4',
            segment: 'not-data-[segment=literal]:w-8'
          },
          sm: {
            base: [
              'px-2.5 py-1.5 text-sm/4 gap-1.5',
              'gap-0.5'
            ],
            leading: 'ps-2.5',
            trailing: 'pe-2.5',
            leadingIcon: 'size-4',
            leadingAvatarSize: '3xs',
            trailingIcon: 'size-4',
            segment: 'not-data-[segment=literal]:w-8'
          },
          md: {
            base: [
              'px-2.5 py-1.5 text-base/5 gap-1.5',
              'gap-0.5'
            ],
            leading: 'ps-2.5',
            trailing: 'pe-2.5',
            leadingIcon: 'size-5',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-5',
            segment: 'not-data-[segment=literal]:w-9'
          },
          lg: {
            base: [
              'px-3 py-2 text-base/5 gap-2',
              'gap-0.75'
            ],
            leading: 'ps-3',
            trailing: 'pe-3',
            leadingIcon: 'size-5',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-5',
            segment: 'not-data-[segment=literal]:w-9'
          },
          xl: {
            base: [
              'px-3 py-2 text-base gap-2',
              'gap-0.75'
            ],
            leading: 'ps-3',
            trailing: 'pe-3',
            leadingIcon: 'size-6',
            leadingAvatarSize: 'xs',
            trailingIcon: 'size-6',
            segment: 'not-data-[segment=literal]:w-10'
          }
        },
        variant: {
          outline: 'text-highlighted bg-default ring ring-inset ring-accented',
          soft: 'text-highlighted bg-elevated/50 hover:bg-elevated has-focus:bg-elevated disabled:bg-elevated/50',
          subtle: 'text-highlighted bg-elevated ring ring-inset ring-accented',
          ghost: 'text-highlighted bg-transparent hover:bg-elevated has-focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent',
          none: 'text-highlighted bg-transparent has-focus:outline-none'
        },
        color: {
          primary: '',
          secondary: '',
          success: '',
          info: '',
          warning: '',
          error: '',
          neutral: ''
        },
        leading: {
          true: ''
        },
        trailing: {
          true: ''
        },
        loading: {
          true: ''
        },
        highlight: {
          true: ''
        },
        fixed: {
          false: ''
        },
        type: {
          file: 'file:me-1.5 file:font-medium file:text-muted file:outline-none'
        }
      },
      compoundVariants: [
        {
          color: 'primary',
          variant: [
            'outline',
            'subtle'
          ],
          class: 'outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary'
        },
        {
          color: 'primary',
          variant: [
            'soft',
            'ghost'
          ],
          class: 'outline-primary/25 has-focus-visible:outline-3'
        },
        {
          color: 'primary',
          highlight: true,
          class: 'ring ring-inset ring-primary'
        },
        {
          color: 'neutral',
          variant: [
            'outline',
            'subtle'
          ],
          class: 'outline-inverted/25 has-focus-visible:outline-3 has-focus-visible:ring-inverted'
        },
        {
          color: 'neutral',
          variant: [
            'soft',
            'ghost'
          ],
          class: 'outline-inverted/25 has-focus-visible:outline-3'
        },
        {
          color: 'neutral',
          highlight: true,
          class: 'ring ring-inset ring-inverted'
        },
        {
          leading: true,
          size: 'xs',
          class: 'ps-7'
        },
        {
          leading: true,
          size: 'sm',
          class: 'ps-8'
        },
        {
          leading: true,
          size: 'md',
          class: 'ps-9'
        },
        {
          leading: true,
          size: 'lg',
          class: 'ps-10'
        },
        {
          leading: true,
          size: 'xl',
          class: 'ps-11'
        },
        {
          trailing: true,
          size: 'xs',
          class: 'pe-7'
        },
        {
          trailing: true,
          size: 'sm',
          class: 'pe-8'
        },
        {
          trailing: true,
          size: 'md',
          class: 'pe-9'
        },
        {
          trailing: true,
          size: 'lg',
          class: 'pe-10'
        },
        {
          trailing: true,
          size: 'xl',
          class: 'pe-11'
        },
        {
          loading: true,
          leading: true,
          class: {
            leadingIcon: 'animate-spin'
          }
        },
        {
          loading: true,
          leading: false,
          trailing: true,
          class: {
            trailingIcon: 'animate-spin'
          }
        },
        {
          fixed: false,
          size: 'xs',
          class: 'md:text-xs'
        },
        {
          fixed: false,
          size: 'sm',
          class: 'md:text-xs'
        },
        {
          fixed: false,
          size: 'md',
          class: 'md:text-sm'
        },
        {
          fixed: false,
          size: 'lg',
          class: 'md:text-sm'
        },
        {
          variant: 'outline',
          class: {
            segment: 'focus:bg-elevated'
          }
        },
        {
          variant: 'soft',
          class: {
            segment: 'focus:bg-accented/50 group-hover:focus:bg-accented'
          }
        },
        {
          variant: 'subtle',
          class: {
            segment: 'focus:bg-accented'
          }
        },
        {
          variant: 'ghost',
          class: {
            segment: 'focus:bg-elevated group-hover:focus:bg-accented'
          }
        },
        {
          variant: 'none',
          class: {
            segment: 'focus:bg-elevated'
          }
        }
      ],
      defaultVariants: {
        size: 'md',
        color: 'primary',
        variant: 'outline'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        inputTime: {
          slots: {
            base: [
              'group relative inline-flex items-center rounded-md select-none',
              'transition-colors'
            ],
            leading: 'absolute inset-y-0 start-0 flex items-center',
            leadingIcon: 'shrink-0 text-dimmed',
            leadingAvatar: 'shrink-0',
            leadingAvatarSize: '',
            trailing: 'absolute inset-y-0 end-0 flex items-center',
            trailingIcon: 'shrink-0 text-dimmed',
            segment: [
              'rounded-sm text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75',
              'transition-colors'
            ],
            separatorIcon: 'shrink-0 size-4 text-muted'
          },
          variants: {
            fieldGroup: {
              horizontal: 'not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1]',
              vertical: 'not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none focus-visible:z-[1]'
            },
            size: {
              xs: {
                base: [
                  'px-2 py-1 text-sm/4 gap-1',
                  'gap-0.25'
                ],
                leading: 'ps-2',
                trailing: 'pe-2',
                leadingIcon: 'size-4',
                leadingAvatarSize: '3xs',
                trailingIcon: 'size-4',
                segment: 'not-data-[segment=literal]:w-8'
              },
              sm: {
                base: [
                  'px-2.5 py-1.5 text-sm/4 gap-1.5',
                  'gap-0.5'
                ],
                leading: 'ps-2.5',
                trailing: 'pe-2.5',
                leadingIcon: 'size-4',
                leadingAvatarSize: '3xs',
                trailingIcon: 'size-4',
                segment: 'not-data-[segment=literal]:w-8'
              },
              md: {
                base: [
                  'px-2.5 py-1.5 text-base/5 gap-1.5',
                  'gap-0.5'
                ],
                leading: 'ps-2.5',
                trailing: 'pe-2.5',
                leadingIcon: 'size-5',
                leadingAvatarSize: '2xs',
                trailingIcon: 'size-5',
                segment: 'not-data-[segment=literal]:w-9'
              },
              lg: {
                base: [
                  'px-3 py-2 text-base/5 gap-2',
                  'gap-0.75'
                ],
                leading: 'ps-3',
                trailing: 'pe-3',
                leadingIcon: 'size-5',
                leadingAvatarSize: '2xs',
                trailingIcon: 'size-5',
                segment: 'not-data-[segment=literal]:w-9'
              },
              xl: {
                base: [
                  'px-3 py-2 text-base gap-2',
                  'gap-0.75'
                ],
                leading: 'ps-3',
                trailing: 'pe-3',
                leadingIcon: 'size-6',
                leadingAvatarSize: 'xs',
                trailingIcon: 'size-6',
                segment: 'not-data-[segment=literal]:w-10'
              }
            },
            variant: {
              outline: 'text-highlighted bg-default ring ring-inset ring-accented',
              soft: 'text-highlighted bg-elevated/50 hover:bg-elevated has-focus:bg-elevated disabled:bg-elevated/50',
              subtle: 'text-highlighted bg-elevated ring ring-inset ring-accented',
              ghost: 'text-highlighted bg-transparent hover:bg-elevated has-focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent',
              none: 'text-highlighted bg-transparent has-focus:outline-none'
            },
            color: {
              primary: '',
              secondary: '',
              success: '',
              info: '',
              warning: '',
              error: '',
              neutral: ''
            },
            leading: {
              true: ''
            },
            trailing: {
              true: ''
            },
            loading: {
              true: ''
            },
            highlight: {
              true: ''
            },
            fixed: {
              false: ''
            },
            type: {
              file: 'file:me-1.5 file:font-medium file:text-muted file:outline-none'
            }
          },
          compoundVariants: [
            {
              color: 'primary',
              variant: [
                'outline',
                'subtle'
              ],
              class: 'outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary'
            },
            {
              color: 'primary',
              variant: [
                'soft',
                'ghost'
              ],
              class: 'outline-primary/25 has-focus-visible:outline-3'
            },
            {
              color: 'primary',
              highlight: true,
              class: 'ring ring-inset ring-primary'
            },
            {
              color: 'neutral',
              variant: [
                'outline',
                'subtle'
              ],
              class: 'outline-inverted/25 has-focus-visible:outline-3 has-focus-visible:ring-inverted'
            },
            {
              color: 'neutral',
              variant: [
                'soft',
                'ghost'
              ],
              class: 'outline-inverted/25 has-focus-visible:outline-3'
            },
            {
              color: 'neutral',
              highlight: true,
              class: 'ring ring-inset ring-inverted'
            },
            {
              leading: true,
              size: 'xs',
              class: 'ps-7'
            },
            {
              leading: true,
              size: 'sm',
              class: 'ps-8'
            },
            {
              leading: true,
              size: 'md',
              class: 'ps-9'
            },
            {
              leading: true,
              size: 'lg',
              class: 'ps-10'
            },
            {
              leading: true,
              size: 'xl',
              class: 'ps-11'
            },
            {
              trailing: true,
              size: 'xs',
              class: 'pe-7'
            },
            {
              trailing: true,
              size: 'sm',
              class: 'pe-8'
            },
            {
              trailing: true,
              size: 'md',
              class: 'pe-9'
            },
            {
              trailing: true,
              size: 'lg',
              class: 'pe-10'
            },
            {
              trailing: true,
              size: 'xl',
              class: 'pe-11'
            },
            {
              loading: true,
              leading: true,
              class: {
                leadingIcon: 'animate-spin'
              }
            },
            {
              loading: true,
              leading: false,
              trailing: true,
              class: {
                trailingIcon: 'animate-spin'
              }
            },
            {
              fixed: false,
              size: 'xs',
              class: 'md:text-xs'
            },
            {
              fixed: false,
              size: 'sm',
              class: 'md:text-xs'
            },
            {
              fixed: false,
              size: 'md',
              class: 'md:text-sm'
            },
            {
              fixed: false,
              size: 'lg',
              class: 'md:text-sm'
            },
            {
              variant: 'outline',
              class: {
                segment: 'focus:bg-elevated'
              }
            },
            {
              variant: 'soft',
              class: {
                segment: 'focus:bg-accented/50 group-hover:focus:bg-accented'
              }
            },
            {
              variant: 'subtle',
              class: {
                segment: 'focus:bg-accented'
              }
            },
            {
              variant: 'ghost',
              class: {
                segment: 'focus:bg-elevated group-hover:focus:bg-accented'
              }
            },
            {
              variant: 'none',
              class: {
                segment: 'focus:bg-elevated'
              }
            }
          ],
          defaultVariants: {
            size: 'md',
            color: 'primary',
            variant: 'outline'
          }
        }
      }
    })
  ]
})
Some colors in compoundVariants are omitted for readability. Check out the source code on GitHub.

Changelog

No recent changes

InputTags

An input element that displays interactive tags.

Listbox

A selectable list of items with search, virtualization and rich item rendering.