# flowbite-datepicker

> A Tailwind CSS powered datepicker built with vanilla JavaScript and Flowbite

Latest version **2.0.0** (published 2025-11-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install flowbite-datepicker
pnpm add flowbite-datepicker
yarn add flowbite-datepicker
bun add flowbite-datepicker
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2025-11-17 |
| First published | 2022-05-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 2.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 147 |
| Author | Flowbite & Hidenao Miyamoto |
| Maintainers | zoliszogyenyi |
| Keywords | datepicker, tailwind, vanilla, javascript |

## Links

- npm: https://www.npmjs.com/package/flowbite-datepicker
- Repository: https://github.com/themesberg/tailwind-datepicker
- Homepage: https://flowbite.com/docs/plugins/datepicker/
- Issues: https://github.com/themesberg/tailwind-datepicker/issues
- npm.io page: https://npm.io/package/flowbite-datepicker

## Dependencies (2)

- [@tailwindcss/postcss](https://npm.io/package/@tailwindcss/postcss.md) ^4.1.17
- [@rollup/plugin-node-resolve](https://npm.io/package/@rollup/plugin-node-resolve.md) ^15.2.3

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 2.0.0 (latest) — 2025-11-17
- 1.3.2 — 2025-01-07
- 1.3.1 — 2024-12-18
- 1.3.0 — 2024-06-27
- 1.2.7 — 2024-06-11
- 1.2.6 — 2023-12-15
- 1.2.5 — 2023-12-07
- 1.2.4 — 2023-11-07
- 1.2.3 — 2023-11-07
- 1.2.2 — 2022-07-19
- 1.2.1 — 2022-05-20
- 1.2.0 — 2022-05-20

## README

# Flowbite Datepicker - Built with Tailwind CSS

This project is a free and open source datepicker library which uses the utility-first classes from Tailwind and the JavaScript from another open source library called Vanilla JS Datepicker.

This [Tailwind CSS Datepicker](https://flowbite.com/docs/plugins/datepicker/) is part of a larger library of components and interactive elements called Flowbite. Although it can also be used independently from the main library, we encourage you to check out the whole [Tailwind components library from Flowbite](https://flowbite.com/docs/getting-started/introduction/).

<a href="https://flowbite.com/docs/plugins/datepicker/">
  <img src="https://flowbite.s3.amazonaws.com/tailwind-css-datepicker.png" alt="Tailwind CSS Datepicker">
</a> 

## Getting started

If you want to use the **Tailwind Datepicker** plugin using JavaScript you will need to include it into your project via NPM:

```bash
npm i flowbite-datepicker --save
```

After you've installed the NPM library, you will need to import the `Datepicker` module:

```javascript
import Datepicker from 'flowbite-datepicker/Datepicker';
```

Initialize a new element using the `Datepicker` constructor and optionally add custom options based on your needs:

```javascript
const datepickerEl = document.getElementById('datepickerId');
new Datepicker(datepickerEl, {
    // options
}); 
```

If you want to use the **Tailwind Date Range Picker** you have to import the `DateRangePicker` module:

```javascript
import DateRangePicker from 'flowbite-datepicker/DateRangePicker';
```

Then in the same fashion you can initalize a date range picker component by using the `DateRangePicker` constructor:

```javascript
const dateRangePickerEl = document.getElementById('dateRangePickerId');
new DateRangePicker(datepickerEl, {
    // options
}); 
```

## Documentation

Check out the official [Tailwind CSS Datepicker Documentation](https://flowbite.com/docs/plugins/datepicker/) page to learn how to get started by installing and then using this library in your project.

## Upgrade to pro

There is also a pro version of FlowBite available featuring more components, an application UI layout, marketing UI pages, e-commerce pages and also Figma design files.

Check it out here: [flowbite.com](https://flowbite.com)

## License

The Tailwind CSS Datepicker is open-source under the MIT License. Find out more by [clicking here](https://flowbite.com/docs/getting-started/license/).


### Donations

If you want to help support this project you can send us Bitcoin or Ethereum to the following addresses:

- Bitcoin address: **bc1qmxvck7jnvwmv0z9xv4lcjsf05dja973v2pn7f5**
- Ethereum address: **0xcb97e23EBc2262B2ba93bfC5d1e423e08420cAF6**

The money will be used to pay for the hosting plan and other costs that are included to maintain this project.

---
_Source: https://npm.io/package/flowbite-datepicker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._