Date

This page covers:

• DateInput
• RangeDateInput

Props

DateInput

• min?: TheDate | SerializedTheDate
• max?: TheDate | SerializedTheDate

RangeDateInput

• min?: TheDate | SerializedTheDate
• max?: TheDate | SerializedTheDate

Exposed CSS variables

DateInput

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

RangeDateInput

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

Example

vue

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

const date = ref(DD.now());
const range = ref({
	from: DD.now(),
	to: DD.addDays(DD.now(), 3),
});
</script>

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

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