Time

This page covers:

• TimeInput
• RangeTimeInput

Props

TimeInput

• min?: TheTime | SerializedTheTime
• max?: TheTime | SerializedTheTime

RangeTimeInput

• min?: TheTime | SerializedTheTime
• max?: TheTime | SerializedTheTime

Exposed CSS variables

TimeInput

• --DFV-time-input-width
• --DFV-time-input-background
• --DFV-time-input-foreground
• --DFV-time-input-border-color
• --DFV-time-input-hover-border-color
• --DFV-time-input-focus-border-color
• --DFV-time-input-focus

RangeTimeInput

• --DFV-range-time-input-gap
• --DFV-range-time-input-separator-color

Example

vue

<script setup lang="ts">
import {
	RangeTimeInput,
	TimeInput,
} from "@duplojs/form/vueDesignSystem";
import * as DD from "@duplojs/utils/date";
import { ref } from "vue";

const time = ref(DD.createTime(9, "hour"));
const range = ref({
	from: DD.createTime(9, "hour"),
	to: DD.createTime(17, "hour"),
});
</script>

<template>
	<div style="display: grid; gap: 12px;">
		<TimeInput v-model="time" />

		<RangeTimeInput v-model="range" />
	</div>
</template>