awesome, zero dependency, performant Vue datepicker component

Overview

Vue Awesome Datepicker

awesome, zero dependency, performant Vue datepicker component


Demo

Installation 🚀

npm i vue-awesome-datepicker
# or 
yarn add vue-awesome-datepicker

Component Registration and usage

import datepicker from "vue-awesome-datepicker";

import "vue-awesome-datepicker/dist/font-default.css"; //if you want default fonts

export default {
  components: {
    datepicker,
  },
  data() {
    return { date: {},dateGreg:{} };
  },
};

<template>
  <datepicker lang="Jalali" type="multiple" colorTheme="pink" v-model="date" />
  <datepicker lang="Greg" type="range" colorTheme="yellow" v-model="dateGreg" />
</template>

Contribution

TODO

  • decouple styles from tailwind CSS
  • refactor to composition api
  • add customizability
  • documentaition
You might also like...
Datepicker component for Vue 3

The most complete date picker solution for Vue 3

Datepicker component for vue.js built with Tailwind CSS, and the day.js date library.
Datepicker component for vue.js built with Tailwind CSS, and the day.js date library.

Datepicker component for vue.js build with Tailwind CSS & dayjs date library

Simple datepicker component for Vue 3

Simple datepicker component for Vue 3

Vue draggable datepicker component
Vue draggable datepicker component

DraggableCal A datepicker Vue component. Compatible with Vue 2.x Demo Install Usage Available Languages Dev & Build Licence Thanks Demo To view a demo

A lightweight and easy to use Vue.js datepicker component
A lightweight and easy to use Vue.js datepicker component

A lightweight and easy to use Vue.js datepicker component (created for Vue 2.x)

A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations

Datepicker 2 A datepicker Vue component. Compatible with Vue 2.x Demo Install Upgrade to 2.x+ Usage Date Formatting Props Events Disabled dates Highli

A Beautiful Datepicker Component For Vue2
A Beautiful Datepicker Component For Vue2

vue-datepicker-local A Beautiful Datepicker Component For Vue2 Lightweight (less than 5kb minified and gzipped) Only dependencies Vue Beautiful! Demo

A simple datepicker component for vue3.0
A simple datepicker component for vue3.0

A simple datepicker component for vue3.0

Jalaali calendar and datepicker for vue.js 2
Jalaali calendar and datepicker for vue.js 2

vue-jalaali-datepicker Jalaali calendar and datepicker for vue.js 2 Demo Requirements Vue.js ^2.0.0 moment-jalaali ^0.6.0 Installation npm $ npm insta

Comments
  • today button doesn't work

    today button doesn't work

    I installed this package and copied the same code to my project and everything works. but today button doesn't work unfortunately and there is no error.

    <template>
      <div>
        <datepicker lang="Jalali" type="range" v-model="date" />
        <datepicker lang="Greg" type="range" v-model="dateGreg" />
      </div>
    </template>
    
    <script>
    import datepicker from "vue-awesome-datepicker";
    import "vue-awesome-datepicker/dist/font-default.css";
    
    export default {
      name: "Home",
      components: {
        datepicker,
      },
      data() {
        return { date: {}, dateGreg: {} };
      },
    };
    </script>
    
    
    bug 
    opened by mortezasabihi 1
Owner
mohammad S.
mohammad S.
This datepicker is a fully customisable Vue(v2.1.6) version of the material-ui datepicker

vue-material-datepicker This datepicker is a fully customisable Vue(v2.1.6) version of the material-ui datepicker that fit all your projects. See belo

Bastien Granger 54 Dec 13, 2021
A VueJs datepicker with a similar look and functionality as the popular AirBnb datepicker.

vue-airbnb-style-datepicker This is a VueJs version of the popular AirBnb datepicker. Supports range selection, disabling of dates, custom configurati

Mikael Edebro 498 Dec 4, 2022
Vue3-daterange-picker - Date range picker component for vue made without jQuery dependency

vue3-daterange-picker A modified date range picker to run on Vue 3. The componen

ADEGBOYE JOSHUA 2 Aug 31, 2022
Vue Nuxt Scroll Datepicker - Fast, powerful and easy to use component datetime picker for Nuxt Vue

Vue Nuxt Scroll Datepicker - Cashbac In this article, we’ll look at how date and time picker and a virtual scroll. Fast, powerful and easy to use comp

mohammad ichlas 2 Apr 25, 2022
[Deprecated] calendar and datepicker component with material design for Vue.js

vue-datepicker calendar and datepicker component with material design for Vue.js Demo The demo page is HERE. Requirements Vue.js ^1.0.0 & ^2.0.0 momen

Awe 706 Nov 21, 2022
A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations

Datepicker A datepicker Vue component. Compatible with Vue 2.x Demo Install Usage Date Formatting Props Events Disabled dates Highlighted dates Transl

Charlie Kassel 2.6k Jan 3, 2023
A vue component that provides datepicker for persian developers

vue persian datepicker This is a Jalali date picker component for Vue. این برنامه یک کامپوننت انتخاب تاریخ جلالی می باشد. Demo You can see a demo and

Dyon Software Development Group 100 Oct 1, 2022
datepicker component for Vue 2.x

vue-date-picker datepicker component for Vue 2.x Screenshot Instllation $ npm install vue-date-picker --save Usage <template> <div class="demo">

8788 101 Nov 21, 2022
Litepie Datepicker is a date range picker component for Vue.js and Tailwind CSS, dependent to day.js.

Litepie Datepicker is a date range picker component for Vue.js and Tailwind CSS, dependent to day.js. Documentation For full documentation, visit lite

Ken 346 Jan 3, 2023
Vue Datepicker Component

Datepicker Component For Vue

Hatice Edis 405 Jan 5, 2023