YouCan DeveloperDate Input
A date picker input component for single and range dates.
Date Range
Usage
vue
<script setup lang="ts">
import { ref } from 'vue';
import { DateInput } from '@youcan/ui-vue3';
import type { DateInputValue } from '@youcan/ui-vue3/src/components/DateInput/types';
const defaultStartDate = new Date();
const defaultEndDate = new Date();
const dateRange = ref<DateInputValue>({ start: defaultStartDate, end: defaultEndDate });
</script>
<template>
<DateInput v-model="dateRange" />
</template>API Reference
Single Date
Usage
vue
<script setup lang="ts">
import { ref } from 'vue';
import { SingleDateInput } from '@youcan/ui-vue3';
const singleDate = ref<Date>(new Date());
</script>
<template>
<SingleDateInput v-model="singleDate" />
</template>API Reference
Date Picker
The base date picker component.
Usage
vue
<script setup lang="ts">
import { ref } from 'vue';
import { DatePicker } from '@youcan/ui-vue3';
import type { DateInputValue } from '@youcan/ui-vue3/src/components/DateInput/types';
const defaultStartDate = new Date();
const defaultEndDate = new Date();
const dateRange = ref<DateInputValue>({ start: defaultStartDate, end: defaultEndDate });
</script>
<template>
<DatePicker v-model="dateRange" />
</template>