A simple but beautiful datepicker for Vue.js Version 2 and 3

Category: Vue.js VueJS Date & Time | August 12, 2021
Author: edisdev
Official Page: Go to website
Last Update: August 12, 2021
License: MIT

vue date picker

Description:

A simple but beautiful datepicker component for Vue.js. Which is lightweight and easy to install with various features such as, datepicker, date range picker.

How to use it?

1. Install the component with yarn.

#for vue version 2+
yarn add vue-datepicker-ui

#for vue version 3+
yarn add [email protected]

2. Import the required components.

import VueDatepickerUi from 'vue-datepicker-ui'
import 'vue-datepicker-ui/lib/vuedatepickerui.css';

3. Register the component and usage.

export default {
    components: {
      Datepicker: VueDatepickerUi
    }
  }

4. Add component in your template like following:

<template>
   <Datepicker v-model="new Date()"/>
</template>

#or with props like this
<Datepicker 
    v-model="" 
    :range="" 
    :lang="" 
    :firstDayOfWeek="" 
    :input-class="" 
    :position="" 
    :disabled-start-date="" 
    :disabled-end-date=""
    :text-format="" 
    :date-format=""
    :disabled=""
    :placeholder=""
    :circle=""
    :show-clear-button=""
    :show-picker-inital=""/>

Thanks for reading. 🙂