Input Calendar

Base component for all text input fields, which extends the InputText component from PrimeVue. Each SkInput component receives a unique id to assign the correct label to it.

For alle props and events, see the PrimeVue Calendar Documentation

Example Usage

Example

Date + Time

Birthday

Sun Jun 22 2025 22:18:49 GMT+0000 (Coordinated Universal Time)

<template>
  <sk-input-calendar v-model="value" label="Date + Time" show-time class="mr-m mb-m" />
  <sk-input-calendar
    v-model="value2"
    placeholder="Max Mustermann"
    class="mr-m mb-m"
    label="Birthday"
    :max-date="new Date()"
  />
  <br />
  {{ value }}
  {{ value2 }}
</template>

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

const value = ref(new Date());
const value2 = ref();
</script>

Reference

Properties

Name	Type	Default	Description
v-model	ref	null	The value to edit, will be a Date Object

Events

Name	Parameters	Description
@input	event	the payload of the input

Slots

Name	Parameters	Description