wt-datepicker.vue

Specs

Props

Name	Required	Types	Default	Description	Example	Deprecated
showTime		boolean	-
minDate		Date	-
maxDate		Date	-
label		string	-
labelProps		Record	() => ({})
placholder		string	-
disabled		boolean	-
required		boolean	-
clearable		boolean	-
timezone		string	-
v		VuelidateFieldLike	-
customValidators		Array	() => []
regleValidation		SuperCompatibleRegleFieldStatus	-

Slots

Name	Scope	Description
label		Custom input label

Primevue docs

PrimevueDatepicker

Example Datepicker

Datepicker

Code

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

const value = ref(Date.now());
</script>

<template>
  <wt-datepicker
    v-model="value"
    label="Datepicker"
  />
</template>

<style scoped lang="scss"></style>

Example Invalid Datepicker

Invalid datepicker*

Field is required

Code

<template>
  <wt-datepicker
    v-model="value"
    :v="v$.value"
    required
    label="Invalid datepicker"
    name="invalid-datepicker"
  />
</template>

<script setup>
import { useVuelidate } from '@vuelidate/core';
import { required } from '@vuelidate/validators';
import { computed, ref } from 'vue';

const value = ref(null);

const v$ = useVuelidate(
  computed(() => ({
    value: {
      required,
    },
  })),
  { value },
);

v$.value.$touch();
</script>

Example Datepicker Datetime Mode

Date Time picker

Code

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

const value = ref(Date.now());
</script>

<template>
  <wt-datepicker
    v-model="value"
    label="Date Time picker"
    show-time
  />
</template>

<style scoped lang="scss"></style>