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 |