wt-timepicker.vue

Specs

Props

Name	Required	Types	Default	Description	Example	Deprecated
modelValue		union	0	Time value in seconds (not milliseconds!)
dateMode		boolean	false	If dateMode is true, timepicker asserts value is timestamp and displays/changes timestamp value
label		string	''	if passed, replaces "day", "hour", "min", "sec" with a single label + format prop value
format		string	'hh:mm:ss'	Time format, can be "hh:mm:ss", "mm:ss", "ss"
disabled		boolean	false	Native input disabled attribute
labelProps		Record	() => ({})	Object with props, passed down to wt-label as props
noLabel		boolean	false	Hide label
required		boolean	false	Native input required attribute
v		VuelidateFieldLike	null	Vuelidate validation object
regleValidation		SuperCompatibleRegleFieldStatus	-	Regle validation object
customValidators		Array	() => []	Custom validators for vuelidate

Events

Name	Params	Description
update:modelValue

Slots

Name	Scope	Description
label		Custom input label

Example Timepicker

Timepicker (hh:mm:ss)

value: 332

Code

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

const value = ref(332);
</script>

<template>
  <wt-timepicker v-model:model-value="value" format="hh:mm:ss" label="Timepicker" />
  <span>value: {{ value }}</span>
</template>

Timepicker Date Mode

(hh:mm:ss)

Hour:

Min:

Sec:

value: 1787910015713

Code

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

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

<template>
  <wt-timepicker
    v-model:model-value="value"
    date-mode
  />
  value: {{ value }}
</template>

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

Disabled Timepicker

Disabled timepicker (hh:mm:ss)

Code

<script setup></script>

<template>
  <wt-timepicker
    :model-value="332"
    label="Disabled timepicker"
    format="hh:mm:ss"
    disabled
  />
</template>

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

Invalid Timepicker

Invalid timepicker (hh:mm:ss)

Code

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

const value = ref(322);

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

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

<template>
  <wt-timepicker
    :model-value="value"
    label="Invalid timepicker"
    format="hh:mm:ss"
    :v="v$"
  />
</template>

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