https://github.com/swapnilsoni1999/tw-daterange

A minimal React Tailwind Date Range Picker
https://github.com/swapnilsoni1999/tw-daterange

date-range-picker datepicker react tailwindcss

Last synced: about 2 months ago
JSON representation

A minimal React Tailwind Date Range Picker

• Host: GitHub
• URL: https://github.com/swapnilsoni1999/tw-daterange
• Owner: SwapnilSoni1999
• Created: 2023-03-04T07:20:47.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-07-14T13:33:28.000Z (over 1 year ago)
• Last Synced: 2024-11-12T18:45:00.011Z (about 2 months ago)
• Topics: date-range-picker, datepicker, react, tailwindcss
• Language: TypeScript
• Homepage:
• Size: 111 KB
• Stars: 40
• Watchers: 1
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# tw-daterange

A DateRange picker made with tailwind and date-fns

![tw-daterange](https://raw.githubusercontent.com/SwapnilSoni1999/tw-daterange/main/screenshot.png)



## How to install

1. Make sure you have [tailwind](https://tailwindcss.com) installed and setup

2. using npm

```sh

npm install tw-daterange

```

using yarn

```sh

yarn add tw-daterange

```

3. Add the configuration to your _tailwind.config.js_

```js

module.exports = {

  // ...

  content: [

    "./src/**/*.{js,jsx,ts,tsx}",

    "./node_modules/tw-daterange/dist/index.esm.js",

  ],

  // ...

}

```



## How to use

```tsx

import { useState } from "react"

import DateRangePicker from "tw-daterange"

const App = () => {

  const [range, setRange] = useState({

    startDate: new Date(),

    endDate: new Date(),

  })

  return (

     {

        setRange(dateRange)

      }}

    />

  )

}

export default App

```



### License

MIT © Swapnil Soni