Skip to main content
The InputTime.vue component is a reusable Vue.js component for selecting and displaying time inputs. It supports features like read-only and disabled states, integrates with v-model for two-way data binding, and provides a customizable label for improved usability.

​
Features

Time Input

Uses a native HTML time input element for selecting times.

Custom Labels

Displays a label next to the time input for better user experience.

Read-Only and Disabled States

Provides flexibility for controlling user interaction.

​
Usage

​
Basic Example

import { InputTime } from '@robojuice/velure-ui';

<InputTime label="Time"></InputTime>

​
Disabled Input

<InputTime disabled="disabled" label="Time disabled"></InputTime>

​
Read-Only Input

<InputTime readonly="readonly" label="Time readonly"></InputTime>

​
Props

​
v-model
string
default:"undefined"
The value bound to the time input field.
​
width
number | string
default:"100"
The width of the component as a percentage.
​
label
string
default:"''"
The label displayed alongside the time input field.
​
error
string
default:"null"
Error message to display for validation errors (if any).

​
Example Use Cases

​
Reactive Time Input

Bind the time value reactively using v-model: 
<template>
  <InputTime v-model="selectedTime" label="Select a Time" />
</template>

<script setup>
import { ref } from 'vue';

const selectedTime = ref('');
</script>

​
Notes

  • The modelValue prop supports various formats for time values, allowing integration with different data models.
  • The label prop provides descriptive text for the time input, enhancing clarity and accessibility.
  • The error prop can be used to highlight validation issues by applying a corresponding error state to the input field.
For further customization, refer to the component’s source code.