JSPM

jibba-tw-datepicker

1.7.5
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1
  • Score
    100M100P100Q29902F
  • License MIT

Fork of react-tailwindcss-datepicker to improve styles and fix bugs

Package Exports

    This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (jibba-tw-datepicker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    Readme

    jibba-tw-datepicker (fork of React Tailwindcss Datepicker)

    React Tailwindcss Datepicker

    Fixes react tailwindcss datepicker for tailwind v4 and adds more style

    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": "^17.0.2 || ^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 { useState } from "react";
    import Datepicker from "react-tailwindcss-datepicker";
    
    const App = () => {
        const [value, setValue] = useState({
            startDate: null,
            endDate: null
        });
    
        return (
            <>
                <Datepicker value={value} onChange={newValue => setValue(newValue)} />
            </>
        );
    };
    
    export default App;

    Contributing

    See CONTRIBUTING.md

    Official Documentation repo

    https://github.com/onesine/react-tailwindcss-datepicker-doc

    Thanks to

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

    Original License

    MIT Licensed. Copyright (c) Lewhe Onesine 2022.