https://github.com/elreco/vue-tailwind-datepicker

A Vue 3 Datepicker using Tailwind CSS
https://github.com/elreco/vue-tailwind-datepicker

component datepicker tailwind vue

Last synced: 6 days ago
JSON representation

A Vue 3 Datepicker using Tailwind CSS

• Host: GitHub
• URL: https://github.com/elreco/vue-tailwind-datepicker
• Owner: elreco
• License: mit
• Created: 2022-09-03T20:30:04.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-09-16T17:13:36.000Z (4 months ago)
• Last Synced: 2025-01-10T16:08:18.171Z (13 days ago)
• Topics: component, datepicker, tailwind, vue
• Language: Vue
• Homepage: https://vue-tailwind-datepicker.com
• Size: 4.22 MB
• Stars: 243
• Watchers: 3
• Forks: 43
• Open Issues: 36
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: .github/CODE_OF_CONDUCT.md

Awesome Lists containing this project

• awesome-vue-3 - vue-tailwind-datepicker - A modern datepicker made with Tailwind for Vue 3 (Packages)

README

        
# Vue Tailwind Datepicker



    

      

    



    A Datepicker component for Vue 3 using Tailwind and dayjs.



[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)

## Documentation

Go to [full documentation](https://vue-tailwind-datepicker.com)

## Installation

⚠️ Vue Tailwind Datepicker uses Tailwind CSS (with the @tailwindcss/forms plugin) & Day.js under the hood, **you must install those packages** before.

You can follow [this tutorial](https://dev.to/elreco/add-a-tailwind-datepicker-to-your-vue-3-application-57j2).

### Install via npm

```

npm install vue-tailwind-datepicker

```

### Install via yarn

```

yarn add vue-tailwind-datepicker

```

## Simple Usage

How it works,

```vue

import { ref } from "vue";

import VueTailwindDatepicker from "vue-tailwind-datepicker";

const dateValue = ref([]);

const formatter = ref({

  date: "DD MMM YYYY",

  month: "MMM",

});

  


    

  


```

## Theming options

**Light Mode**

![Light Mode](https://github.com/elreco/vue-tailwind-datepicker/blob/main/docs/light.png?raw=true)

**Dark Mode**

![Dark Mode](https://github.com/elreco/vue-tailwind-datepicker/blob/main/docs/dark.png?raw=true)

## Changelog

All notable changes to this project will be documented in the [Releases Page](https://github.com/elreco/vue-tailwind-datepicker/releases).

## Sponsor

- [tailwindai.dev](https://www.tailwindai.dev)

## License

The [MIT](LICENSE) License. Please [see](http://opensource.org/licenses/MIT) for more information.

## Thanks to

- [kenhyuwa](https://github.com/kenhyuwa)

- [Vue](https://v3.vuejs.org/)

- [Tailwind CSS](https://tailwindcss.com/)

- [day.js](https://day.js.org/)

- and other support...