Skip to main content
The InputDate.vue component is a reusable Vue.js component for selecting and displaying date inputs. It supports features such as read-only and disabled states, as well as seamless integration with v-model for two-way data binding.

​
Features

Date Input

Provides a native HTML date input element for selecting dates.

Custom Labels

Displays a label alongside the input for improved user experience.

Read-Only and Disabled States

Supports states to control user interaction.

​
Usage

​
Basic Example

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

<InputDate label="Date"></InputDate>

​
Disabled Input

<InputDate disabled="disabled" label="Date disabled"></InputDate>

​
Read-Only Input

<InputDate readonly="readonly" label="Date readonly"></InputDate>

​
Props

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

​
Example Use Cases

​
Reactive Date Input

Bind the date value reactively with v-model: 
<template>
  <InputDate v-model="selectedDate" label="Select a Date" />
</template>

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

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

​
Notes

  • The model prop supports various formats for date values, including strings and numbers, for flexible integration with different data models.
  • The error prop can be used to highlight validation issues by applying a corresponding error state to the input field.
  • The label prop allows you to provide descriptive text for the date input, enhancing usability and accessibility.
For further customization, refer to the component’s source code.