CataUiInputDate

A customizable date and time picker component with support for date ranges, different modes (date, time, datetime), and integrated with v-calendar for a rich user experience.

Examples

Basic Date Picker

Select a date

Date Time Picker

Select date and time

Time Picker

Select time

Date Range Picker

Select date range

Custom Format

Custom format

With Tooltip and Multiple Columns

With tooltip and 2 columns

Disabled State

Disabled picker

The examples below demonstrate the various capabilities and configurations of the CataUiInputDate component.

Basic Usage

<!-- Basic date picker -->
<CataUiInputDate 
  v-model="dateValue" 
  label="Select a date" />

<!-- Date and time picker -->
<CataUiInputDate 
  v-model="dateTimeValue" 
  label="Select date and time" 
  mode="datetime" />

<!-- Time only picker -->
<CataUiInputDate 
  v-model="timeValue" 
  label="Select time" 
  mode="time" />

Advanced Features

<!-- Date range selection -->
<CataUiInputDate 
  v-model="dateRangeValue" 
  label="Select date range" 
  range />

<!-- Custom date format -->
<CataUiInputDate 
  v-model="dateValue" 
  label="Custom format" 
  format="YYYY-MM-DD" />

<!-- Multiple columns with tooltip -->
<CataUiInputDate 
  v-model="dateValue" 
  label="With tooltip and 2 columns" 
  tooltip="Select a date using the calendar"
  :columns="2" />

<!-- Disabled state -->
<CataUiInputDate 
  v-model="dateValue" 
  label="Disabled picker" 
  disabled 
/>

Props

Prop	Description	Type	Default	Required	Options
columns	Number of calendar columns to display	Number	1	false
disabled	Disables the date picker input	Boolean	false	false
format	Custom format for the date display	String	''	false
label	Label text displayed above the input	String	''	false
mode	Sets the mode of the date picker	String	'date'	false	'date', 'time', 'datetime'
modelValue	The selected date value (v-model)	String		true
range	Enables selection of a date range (start and end)	Boolean	false	false
tooltip	Tooltip text displayed on hover	String	''	false

Events

Event	Description	Parameters
update:modelValue	Emitted when the date value changes	String (new date value)

Slots

Name	Description
actions	Content for the input actions area (default includes clear button when a value is present)