rmingon/vue3-datepicker

Just a simple vue3 datepicker

Just a classic datepicker library for vue3

Demo

See online : Demo

Install

    npm i vue3-simple-datepicker --save

Usage

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>

Add style in main.ts or main.js

    import "node_modules/vue3-simple-datepicker/dist/style.css";

v-model must be a Date object

const date = ref(new Date());

<Datepicker v-model="date"/>

event

<Datepicker @on-cancel="onCancel" @on-done="onDone"/>

Props

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

Events	Output	Description
onCancel	Event	The user clicked on Cancel button
onDone	Date	The user clicked on Done button