nearpay-datepicker-react

Nearpay Datepicker

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

Contents

• Features
• Installation
• Simple Usage
• Playground
• Contributing

Features

• ✅ Theming options
• ✅ Dark mode
• ✅ Single Date
• ✅ Single date use Range
• ✅ Shortcuts
• ✅ TypeScript support
• ✅ Localization(i18n)
• ✅ Date formatting
• ✅ Disable specific dates
• ✅ Minimum Date and Maximum Date
• ✅ Custom shortcuts

Installation

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

Install via npm

npm install nearpay-datepicker

Install via yarn

yarn add nearpay-datepicker

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

"dayjs": "^1.11.12",
"react": "^17.0.2 || ^18.2.0" || "^19.0.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/nearpay-datepicker/dist/index.esm.js"]
    // ...
};

Then use nearpay-datepicker-select in your app:

import { useState } from "react";
import Datepicker from "nearpay-datepicker";

const App = () => {
    const [value, setValue] = useState({
        startDate: null,
        endDate: null
    });

    return (
        <>
            <Datepicker value={value} onChange={newValue => setValue(newValue)} />
        </>
    );
};

export default App;

PlayGround

Clone the master branch and run commands:

# Using npm
npm install && npm dev

# Using yarn
yarn install && yarn dev

Open a browser and navigate to http://localhost:8888

Contributing

See CONTRIBUTING.md

Official Documentation repo

https://github.com/nearpayio/nearpay-datepicker-doc

Thanks to

• Vue Tailwind Datepicker
• React
• Tailwind CSS
• dayjs

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

License

MIT Licensed. Copyright (c) Lewhe nearpayio 2022.