Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-tailwindcss-datepicker

Package Overview
Dependencies
Maintainers
1
Versions
40
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-tailwindcss-datepicker

A modern React Datepicker using Tailwind CSS 3

  • 1.0.9
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
38K
decreased by-12.41%
Maintainers
1
Weekly downloads
 
Created
Source

React Tailwindcss Datepicker

React Tailwindcss Datepicker

A modern date range picker component for React using Tailwind 3 and dayjs. Alternative to Litepie Datepicker which uses Vuejs.

Features

  • ✅ Theming options
  • ✅ Dark mode
  • ✅ Single Date
  • ✅ Single date use Range
  • ✅ Shortcuts
  • ✅ TypeScript support
  • ✅ Localization(i18n)
  • ⬜ Disable date
  • ⬜ Custom shortcuts

Documentation

Go to full documentation

Installation

⚠️ React Tailwindcss Datepicker uses Tailwind CSS 3 (with the @tailwindcss/forms plugin) & Dayjs under the hood to work.

Install via npm

$ npm install react-tailwindcss-datepicker 

Install via yarn

$ yarn add react-tailwindcss-datepicker 

Make sure you have installed the peer dependencies as well with the below versions.

"dayjs": "^1.11.6",
"react": "^18.2.0"

Simple Usage

Tailwindcss Configuration

Add the datepicker to your tailwind configuration using this code

// in your tailwind.config.js
module.exports = {
    // ...
    content: ["./src/**/*.{js,jsx,ts,tsx}", "./node_modules/react-tailwindcss-datepicker/dist/index.esm.js"],
    // ...
}

Then use react-tailwindcss-select in your app:

import React, {useState} from "react";
import Datepicker from "react-tailwindcss-datepicker";

const App = () => {
    const [value, setValue] = useState({
        startDate: new Date(),
        endDate: new Date().setMonth(11)
    });
    
    const handleValueChange = (newValue) => {
        console.log("newValue:", newValue);
        setValue(newValue);
    }
    
    return (
        <div>
            <Datepicker
                value={value}
                onChange={handleValueChange}
            />
        </div>
    );
};

export default App;

Theming options

Light Mode

Light Mode

Dark Mode

Dark Mode

Supported themes Theme supported

Teal themes example Theme supported

You can find the demo at here

Info

👉 To discover the other possibilities offered by this library, you can consult the full documentation.

Contributing

Got ideas on how to make this better? Open an issue!

Thanks to

I thank you in advance for your contribution to this project.

License

MIT Licensed. Copyright (c) Lewhe Onesine 2022.

FAQs

Package last updated on 18 Nov 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc