@vuepic/vue-datepicker

What is @vuepic/vue-datepicker?

@vuepic/vue-datepicker is a Vue.js component for creating date pickers. It provides a range of functionalities for selecting dates, including single date selection, date range selection, and customization options for the date picker interface.

What are @vuepic/vue-datepicker's main functionalities?

Single Date Selection

This feature allows users to select a single date. The selected date is bound to a Vue ref variable.

<template>
  <DatePicker v-model="selectedDate" />
</template>

<script>
import { ref } from 'vue';
import DatePicker from '@vuepic/vue-datepicker';

export default {
  components: { DatePicker },
  setup() {
    const selectedDate = ref(null);
    return { selectedDate };
  }
};
</script>

Date Range Selection

This feature allows users to select a range of dates. The selected date range is bound to a Vue ref object with start and end properties.

<template>
  <DatePicker v-model="dateRange" range />
</template>

<script>
import { ref } from 'vue';
import DatePicker from '@vuepic/vue-datepicker';

export default {
  components: { DatePicker },
  setup() {
    const dateRange = ref({ start: null, end: null });
    return { dateRange };
  }
};
</script>

Customizable Date Picker

This feature allows customization of the date picker, including date format and disabling specific dates.

<template>
  <DatePicker v-model="selectedDate" :format="customFormat" :disabled-dates="disabledDates" />
</template>

<script>
import { ref } from 'vue';
import DatePicker from '@vuepic/vue-datepicker';

export default {
  components: { DatePicker },
  setup() {
    const selectedDate = ref(null);
    const customFormat = 'DD-MM-YYYY';
    const disabledDates = [new Date(2023, 0, 1), new Date(2023, 11, 25)];
    return { selectedDate, customFormat, disabledDates };
  }
};
</script>

Other packages similar to @vuepic/vue-datepicker

vuejs-datepicker

vuejs-datepicker is a simple and lightweight datepicker component for Vue.js. It offers basic date selection functionalities and is easy to integrate into Vue applications. Compared to @vuepic/vue-datepicker, it has fewer customization options but is suitable for simpler use cases.

vue2-datepicker

vue2-datepicker is a highly customizable datepicker component for Vue.js 2.x. It supports a wide range of features including date range selection, multiple languages, and custom date formats. It is similar to @vuepic/vue-datepicker in terms of functionality but is designed for Vue 2.x instead of Vue 3.x.

vue-cal

vue-cal is a flexible calendar component for Vue.js that supports date picking, event management, and more. It offers a broader range of functionalities compared to @vuepic/vue-datepicker, making it suitable for applications that require more than just date selection.

README

@vuepic/vue-datepicker

The most complete datepicker solution for Vue 3

DOCUMENTATION

StackBlitz Playground

Features

• Single date picker
• Range date picker
• Time picker
• Month picker
• Year picker
• Quarter picker
• Week picker
• Multiple dates select
• Multiple calendars
• Text input
• UTC support
• Timezones
• Locale support
• Week numbers
• Custom v-model
• Dark and light theme
• SSR support
• Highly configurable
• Accessible
• Included type definitions

Install

# npm
npm install @vuepic/vue-datepicker


# yarn
yarn add @vuepic/vue-datepicker


# pnpm
pnpm add @vuepic/vue-datepicker


# bun
bun add @vuepic/vue-datepicker

Import and register component

Global

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

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

const app = createApp(App);
app.component('VueDatePicker', VueDatePicker);

Local

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

<script setup>
  import { ref } from 'vue';
  import VueDatePicker from '@vuepic/vue-datepicker';
  import '@vuepic/vue-datepicker/dist/main.css';

  const date = ref(null);
</script>

Supporting the project

As you may know, maintaining an open-source project is a very time-consuming job. Your support is very appreciated ❤️

Please ⭐️ this repository if you like the component!

You can also make a financial contribution via sponsoring this project or one time donation. Become a sponsor

Special thanks to our sponsors 🙏

Contributors

Thanks to all people who contributed to the project 🙏

Versioning

This project follows SemVer specification

License

Copyright © 2021-present Vuepic

MIT