See online : Demo
npm i vue3-simple-datepicker --save
Warning Your Datepicker components must implement v-model
<template>
<Datepicker v-if="datepicker_opened" v-model="date"/>
</template>
<script setup>
import { Datepicker } from 'vue3-simple-datepicker';
const datepicker_opened = ref(true);
const date = ref(new Date());
</script>
import "node_modules/vue3-simple-datepicker/dist/style.css";
const date = ref(new Date());
<Datepicker v-model="date"/>
<Datepicker @on-cancel="onCancel" @on-done="onDone"/>
Props | Type | Default | Description |
---|---|---|---|
v-model | Date | Now | Date selected in datepicker |
month_name | string[] | Months name used in datepicker | |
days_names | string[] | ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'] | Days name used in lib (only first two characters) |
now_button | boolean | false | Add a button between close and done for set to now the datepicker |
Events | Output | Description |
---|---|---|
onCancel | Event | The user clicked on Cancel button |
onDone | Date | The user clicked on Done button |