npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ztp-datepicker

v1.0.2

Published

A Tailwind CSS powered datepicker built with vanilla JavaScript and Flowbite

Downloads

73

Readme

Tailwind CSS Datepicker

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

Getting started

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

npm i flowbite-datepicker --save

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

import Datepicker from 'flowbite-datepicker/Datepicker';

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

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:

import DateRangePicker from 'flowbite-datepicker/DateRangePicker';

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

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

Documentation

Check out the official Tailwind CSS Datepicker Documentation 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

License

The Tailwind CSS Datepicker is open-source under the MIT License. Find out more by clicking here.

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.