Usage
Use the v-model directive to control the selected date.
<script setup lang="ts">
import { Time } from '@internationalized/date'
const value = shallowRef(new Time(12, 30, 0))
</script>
<template>
<PInputTime v-model="value" />
</template>
Use the default-value prop to set the initial value when you do not need to control its state.
<script setup lang="ts">
import { Time } from '@internationalized/date'
const defaultValue = shallowRef(new Time(12, 30, 0))
</script>
<template>
<PInputTime :default-value="defaultValue" />
</template>
@internationalized/date package which provides objects and functions for representing and manipulating dates and times in a locale-aware manner.Hour Cycle
Use the hour-cycle prop to change the hour cycle of the InputTime. Defaults to 12.
<script setup lang="ts">
import { Time } from '@internationalized/date'
const defaultValue = shallowRef(new Time(16, 30, 0))
</script>
<template>
<PInputTime :hour-cycle="24" :default-value="defaultValue" />
</template>
Color
Use the color prop to change the color of the InputTime.
<template>
<PInputTime color="neutral" highlight />
</template>
highlight prop is used here to show the focus state. It's used internally when a validation error occurs.Variant
Use the variant prop to change the variant of the InputTime.
<template>
<PInputTime variant="subtle" />
</template>
Size
Use the size prop to change the size of the InputTime.
<template>
<PInputTime size="xl" />
</template>
Icon
Use the icon prop to show an Icon inside the InputTime.
<template>
<PInputTime icon="i-lucide-clock" />
</template>
leading and trailing props to set the icon position or the leading-icon and trailing-icon props to set a different icon for each position.Avatar
Use the avatar prop to show an Avatar inside the InputTime.
<template>
<PInputTime
:avatar="{
src: 'https://github.com/vuejs.png'
}"
size="md"
variant="outline"
/>
</template>
Disabled
Use the disabled prop to disable the InputTime.
<template>
<PInputTime disabled />
</template>
Examples
Within a FormField
You can use the InputTime within a FormField component to display a label, help text, required indicator, etc.
<script setup lang="ts">
import { Time } from '@internationalized/date';
import { shallowRef } from 'vue';
const time = shallowRef(new Time(12, 30, 0));
</script>
<template>
<PFormField
label="Time"
help="Specify the time"
required
>
<PInputTime v-model="time" />
</PFormField>
</template>
API
Props
| Prop | Default | Type |
|---|
Slots
| Slot | Type |
|---|
Emits
| Event | Type |
|---|
Theme
Below is the theme configuration skeleton for the PInputTime. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.
export default defineAppConfig({
pohon: {
inputTime: {
slots: {
root: '',
base: '',
leading: '',
leadingIcon: '',
leadingAvatar: '',
leadingAvatarSize: '',
trailing: '',
trailingIcon: '',
segment: ''
},
variants: {
fieldGroup: {
horizontal: '',
vertical: ''
},
size: {
xs: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
segment: ''
},
sm: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
segment: ''
},
md: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
segment: ''
},
lg: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
segment: ''
},
xl: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
segment: ''
}
},
variant: {
outline: '',
soft: '',
subtle: '',
ghost: '',
none: ''
},
color: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
},
leading: {
true: ''
},
trailing: {
true: ''
},
loading: {
true: ''
},
highlight: {
true: ''
},
type: {
file: ''
}
},
compoundVariants: [],
defaultVariants: {
size: 'md',
color: 'primary',
variant: 'outline'
}
}
}
};
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'
export default defineAppConfig({
pohon: {
inputTime: {
slots: {
root: '',
base: '',
leading: '',
leadingIcon: '',
leadingAvatar: '',
leadingAvatarSize: '',
trailing: '',
trailingIcon: '',
segment: ''
},
variants: {
fieldGroup: {
horizontal: '',
vertical: ''
},
size: {
xs: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
segment: ''
},
sm: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
segment: ''
},
md: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
segment: ''
},
lg: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
segment: ''
},
xl: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
segment: ''
}
},
variant: {
outline: '',
soft: '',
subtle: '',
ghost: '',
none: ''
},
color: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
},
leading: {
true: ''
},
trailing: {
true: ''
},
loading: {
true: ''
},
highlight: {
true: ''
},
type: {
file: ''
}
},
compoundVariants: [],
defaultVariants: {
size: 'md',
color: 'primary',
variant: 'outline'
}
}
}
};
Akar
With Pohon UI, you can achieve similar component functionality with less code and effort, as it comes with built-in styles mechanism and behaviors that are optimized for common use cases. Since it's using unocss-variants it adds a runtime cost, but it can be worth it if you prioritize development speed and ease of use over fine-grained control.
If this is a deal breaker for you, you can always stick to using Akar and build your own custom components on top of it.