Blog Detail

11

Apr
The Most Complete & Amazing Datepicker Solution for Vue 3 cover image

The Most Complete & Amazing Datepicker Solution for Vue 3

Vuepic comes up with an amazing vue 3 date picker component that is called Vue-datepicker. It has many options and features like theme customization, multi-calendar, month picker, time picker, auto range, etc.

Installation

You can install the component using the preferred package manager like npm or yarn:

yarn add @vuepic/vue-datepicker

# or

npm install @vuepic/vue-datepicker

Then import and register component

Note: Css file is imported separately

Usage

Globally

In the main file

import { createApp } from "vue";
import App from './App.vue';

import Datepicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css'

const app = createApp(App);

app.component('Datepicker', Datepicker);

app.mount('#app');

Locally

In the .vue files

With Options API

<template>
    <Datepicker v-model="date"></Datepicker>
</template>

<script>
    import Datepicker from '@vuepic/vue-datepicker';
    import '@vuepic/vue-datepicker/dist/main.css'

    export default {
        components: { Datepicker },
        data() {
            return {
                date: null,
            };
        }
    }
</script>

Alternatively, you can import the scss file if you want full control of the component styles

@import '@vuepic/vue-datepicker/src/VueDatePicker/style/main.scss';

Browser

Register and use components in the .html file

Keep in mind that when you use unpkg to import the component, global component name will be VueDatePicker

Add JavaScript files

<script src="https://unpkg.com/vue@latest"></script>
<script src="https://unpkg.com/@vuepic/vue-datepicker@latest"></script>

Add CSS file

<link rel="stylesheet" href="https://unpkg.com/@vuepic/vue-datepicker@latest/dist/main.css">

Register and use the component

<script>
    const app = Vue.createApp({
        components: { Datepicker: VueDatePicker },
    }).mount("#app");
</script>

That's it, you are ready to go.

Props

  • Range
  • AutoRange
  • MultiCalendars
  • MonthPicker
  • TimePicker
  • TextInput
  • Inline
  • MultiDates
  • Flow
  • Utc
  • WeekPicker
  • Vertical
  • Modes configuration
  • Formatting
  • Localization
  • General configuration
  • Calendar configuration

This package has a lot of features and options with code examples, If you want to learn more you can visit its complete documentation on Github.

Published at : 11-04-2022

Author : Rizwan Aslam
AUTHOR
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

Launch project