https://github.com/vuepic/vue-datepicker

Datepicker component for Vue 3
https://github.com/vuepic/vue-datepicker

datepicker daterangepicker datetime datetimepicker timepicker vue vue-datepicker vue-datetimepicker vue3

Last synced: 15 days ago
JSON representation

Datepicker component for Vue 3

• Host: GitHub
• URL: https://github.com/vuepic/vue-datepicker
• Owner: Vuepic
• License: mit
• Created: 2022-03-13T13:04:01.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-05-12T14:19:58.000Z (6 months ago)
• Last Synced: 2024-05-19T12:37:49.947Z (6 months ago)
• Topics: datepicker, daterangepicker, datetime, datetimepicker, timepicker, vue, vue-datepicker, vue-datetimepicker, vue3
• Language: TypeScript
• Homepage: https://vue3datepicker.com
• Size: 22.9 MB
• Stars: 1,322
• Watchers: 9
• Forks: 127
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
## @vuepic/vue-datepicker

### The most complete datepicker solution for Vue 3

[![License](https://img.shields.io/npm/l/@vuepic/vue-datepicker)](https://github.com/Vuepic/vue-datepicker/blob/main/LICENSE) [![npm](https://img.shields.io/npm/v/@vuepic/vue-datepicker)](https://www.npmjs.com/package/@vuepic/vue-datepicker) ![Downloads](https://img.shields.io/npm/dm/@vuepic/vue-datepicker) [![Open issues](https://img.shields.io/github/issues-raw/Vuepic/vue-datepicker)](https://github.com/Vuepic/vue-datepicker/issues) ![CI](https://img.shields.io/github/actions/workflow/status/Vuepic/vue-datepicker/node.js.yml?branch=main&label=CI)

[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=Vuepic_vue-datepicker&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=Vuepic_vue-datepicker)

[DOCUMENTATION](https://vue3datepicker.com/)

[StackBlitz Playground](https://stackblitz.com/edit/vuepic-vue-datepicker?file=src%2Fcomponents%2FPlayground.vue)

## 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

```shell

# 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**

```js

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**

```vue

  

  import { ref } from 'vue';

  import VueDatePicker from '@vuepic/vue-datepicker';

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

  const date = ref(null);

```

## 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](https://github.com/sponsors/Vuepic)

Special thanks to our sponsors 🙏



    





    



## Contributors

Thanks to all people who contributed to the project 🙏



  



## Versioning

This project follows [SemVer](https://semver.org) specification

## License

Copyright © 2021-present [Vuepic](https://github.com/Vuepic)

[MIT](https://github.com/Vuepic/vue-datepicker/blob/master/LICENSE)