Fix datePicker's issues

[VachetVirginie]

Description

Playground

<template>
	<PageContainer>
		<v-row>
			<v-col cols="12" md="6">
				<PeriodField/>
				Date:	{{ date }}
				Date pre definie: {{ dateDefinie }}
				<h3>Basique Outlined</h3>
				<date-picker v-model="date1" label="Date" :hint="defaultHint" outlined clearable />
				<h3>Basique with change event</h3>
				<date-picker v-model="date" label="Date" :hint="defaultHint"  @change="handleDateChange"/>
				<h3>Basique</h3>
				<date-picker v-model="date" label="Date" :hint="defaultHint" clearable />
				<h3>Clearable</h3>
				<date-picker v-model="date" label="Date" :hint="defaultHint" clearable outlined append-icon/>
				<date-picker v-model="date" label="Date" :hint="defaultHint" clearable />

				<h3>Required</h3>
				<date-picker v-model="date" label="Date" :hint="defaultHint" :rules="validRules"/>

				<h3>Not After Today</h3>
				<date-picker v-model="date" label="Date" :hint="defaultHint" :warning-rules="notAfterTodayRules"/>

				<h3>Not Before Today</h3>
				<date-picker v-model="date" label="Date" :hint="defaultHint" :warning-rules="notBeforeTodayRules"/>

				<h3>Warning Rules</h3>
				<date-picker v-model="date" label="Date" :hint="defaultHint" :warning-rules="warningRules" outlined />

				<h3 class="mt-4">No-prepend-icon</h3>
				<date-picker v-model="date" label="Date" :hint="defaultHint" no-prepend-icon/>
			</v-col>
			<v-col cols="12" md="6">
				<h3 class="mt-4">Append-icon</h3>
				<date-picker v-model="date" label="Date" :hint="defaultHint" append-icon/>

				<h3>No Calendar</h3>
				<date-picker v-model="date" label="Date" :hint="defaultHint" no-calendar/>

				<h3>TextField Activator</h3>
				<date-picker v-model="date" label="Date" :hint="defaultHint" text-field-activator/>

				<h3 class="mt-4">Show weekends</h3>
				<date-picker v-model="date" label="Date" :hint="defaultHint" show-weekends/>

				<h3 class="mt-4">Disabled</h3>
				<date-picker v-model="date" label="Date" :hint="defaultHint" disabled/>

				<h3 class="mt-4">Outlined</h3>
				<date-picker v-model="date" label="Date" :hint="defaultHint" outlined/>

				<h3 class="mt-4">Birthdate</h3>
				<date-picker v-model="date" birthdate label="Date d'anniversaire" :hint="defaultHint" />

				<h3 class="mt-4">Range</h3>
				<div>
					{{ dateRange }}
					<date-picker
						v-model="dateRange"
						range
						clearable
						outlined
					/>
				</div>

				<h3 class="mt-4">DateFormat</h3>
				{{ dateToFormat }}
				<date-picker v-model="dateToFormat" label="Date" hint="JJ-MM-YYYY" dateFormat="DD-MM-YYYY" />
				<h3 class="mt-4">DateFormatReturn</h3>
				{{ dateFormatReturn }}
				<date-picker v-model="dateFormatReturn" :warning-rules="notBeforeTodayRules" :rules="notAfterTodayRules" date-format-return="DD-MM-YY" label="Date" :hint="defaultHint"/>
			</v-col>
		</v-row>
	</PageContainer>
</template>

<script lang="ts">
import PeriodField from "@/patterns/PeriodField/PeriodField.vue";
import DatePicker from "@/patterns/DatePicker/DatePicker.vue"
import { required } from "@/rules/required/index.ts";
import { notAfterToday } from "@/rules/notAfterToday/index.ts";
import { notBeforeToday } from "@/rules/notBeforeToday/index.ts";
import PageContainer from "@/elements/PageContainer/PageContainer.vue";
import dayjs from 'dayjs';
export default {
	emits:['change'],
	components: {
		DatePicker,
		PageContainer,
		PeriodField
	},
	data() {
		return {
			date: '',
			date1: dayjs().add(2, 'day').format('DD/MM/YYYY'),
			dateRange:[dayjs().format('DD/MM/YYYY'), dayjs().add(12, 'day').format('DD/MM/YYYY')],
			startDate: null,
			endDate: null,
			dateDefinie: dayjs().format('DD/MM/YYYY'),
			dateToFormat: dayjs().format('DD/MM/YYYY'),
			dateFormatReturn: '',
			validRules: [required],
			notAfterTodayRules: [notAfterToday],
			notBeforeTodayRules: [notBeforeToday],
			defaultHint: "Format JJ/MM/YYYY",
			warningRules: [notAfterToday, notBeforeToday],
		}
	},
	mounted() {
		const date = '';
		const date1 = dayjs().add(10, 'day').format('DD/MM/YYYY');
		const startDate = dayjs().add(18, 'day').format('DD/MM/YYYY');
		const endDate = dayjs().add(21, 'day').format('DD/MM/YYYY');

		this.dateRange = [date, date1]

		setTimeout(() => {
			this.date1 = date1;
		}, 4000);
		setTimeout(() => {
			this.dateRange = [startDate, endDate]
		}, 5000);
	},
	methods: {
		notAfterToday,
		handleDateChange(value: any) {
			console.log('Date changed to ' + value);
		}
	}
};
</script>