onesine/react-tailwindcss-datepicker

Modern date range picker component for React using Tailwind 3 and dayjs. Alternative to Litepie Datepicker.

React Tailwindcss Datepicker

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

Contents

• Features
• Documentation
• Installation
• Simple Usage
• Theming Options
• 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

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": "^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 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

Dark Mode

Supported themes

Teal themes example

You can find the demo at here

Info

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

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/onesine/react-tailwindcss-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 Onesine 2022.

react-tailwindcss-datepicker's Issues

Ability to open the calendar via a special boolean isOpen

Hi,

I wonder why I don't find anything about the possibility to open the calendar with a specific function isOpen has state. So we can trigger the range date picker with this function in a custom button like this one :

setIsOpen(!isOpen);

Could you please guide me, how to do it ?

Thanks, regards,

Input value doesn't reset using React Hook Form

Hey there,

I'm using React Hook Form in my project, and I've noticed an issue with the Datepicker. After using the reset function from React Hook Form, the input value does not reset to its default value, while the field value in the form is indeed null.

Here is a sandbox that reproduces the issue : https://codesandbox.io/s/priceless-babbage-zqzm5v?file=/src/App.js

You can open the RHF DevTools to see exactly how the values change.

[Bug Report] Clear and date icons are mixed up

CloseIcon shows when input has no value. And vice versa.
This line seems to be the reason:
e.isEmpty ? <CloseIcon className="h-5 w-5" /> : <DateIcon className="h-5 w-5" />

Library missing "dist" folder in node modules

Hi,
this morning when installing the library I got the following error: Cannot find module 'react-tailwindcss-datepicker' or its corresponding type declarations.

When debugging, I found out in the node_modules that the library does not have a dist folder anymore. (only css)
It was working fine last week with the 1.3.2 and I see that you made an update 4 days ago.

Have you made any changes on how you deploy the library and could explain this bug ?

Thanks

Uncaught (in promise) ReferenceError: require is not defined

Getting issue in console on production(npm run build).

Set name label

I have searched in the official documentation, but I can't find how to change the name attribute of input

Feature Request: Popover Direction

Right now it appears that the popover picks to go above or below the input depending on how much space is left, however in some cases it seems to pick wrong and gets covered up by the UI.
I would love if there was a prop to lock the popover to either above or below, where it defaults to the current behavior when unset

[Feature Request] Disable or otherwise manipulate specific days

The idea is to have a new option to disable specific days in the calendar. An application example of this could be a reservation site, where the user shouldn't be able to pick already reserved dates.

This could be implemented by adding a new option called disabledDays or disabledDates. This option could take an array where the members would be date objects or strings in YYYY-MM-DD format.

Optinally, the array members could be objects to provide even more customization.
Here are some I thought of:

• Background color
• Hover (render) callback (could also add a global one)
• Full control over the css of that specific date

How do I disable dark mode?

How do I disable dark mode. The moment I set my Windows 11 to dark mode, the datepicker changed to darkmode. My site is fully white and I don't want this to change to dark mode. I want it to always stay in light mode. I was unable to find a prop to do that. Kindly suggest.

[Feature Request] - option max range

Hello there.

It would be useful to have the possibility to define the max span of a range, let say 3 months or 7 days. This would be relative to the first date picked and would disable the options out of this span.

What do you think?

Bests

Option to add time-picker in date range picker

I can see the input box is manually editable to add time but It would be very helpful to have a toggle option to add a time-picker in the date range picker panel.
It can be a simple slider input for selecting the hour and minute along with the date selector.

[Bug Report] Able to select dates past maxDate.

If the user clicks the next month's dates, they are able to select dates past the maxDate. I assume this will work similarly for disabledDates and minDate. Attaching a video of the same and the props passed to the datepicker.

Screen.Recording.2023-01-24.at.1.22.27.AM.mov

<Datepicker
      containerClassName={"w-1/5 bg-white font-normal self-end z-10"}
      inputClassName="rounded-md"
      primaryColor="blue"
      displayFormat="MMM, DD YYYY"
      separator="-"
      showShortcuts={true}
      placeholder="Select the date range"
      maxDate={new Date()}
      useRange={false}
      readOnly
      value={dateRange}
      onChange={onChange}
    />

[Feature Request] Should allow adding custom shortcurts in place of existing default shortcuts.

Is there any way to use just the year picker part ?

Why just year?
For filtering invoice data according to the financial year.

[Feature request] Option change week name

Hi!

Add, please, option for change format week name in header calendar - so that it would be possible, for example, to make not a three-character name, but a two-character one

react-tailwindcss-datepicker/src/components/Calendar/Week.tsx

Lines 47 to 51 in 460debb

	shortString(
	dayjs(`2022-11-${6 + (item + startDateModifier)}`)
	.locale(i18n)
	.format("ddd")
	)

[Feature request] Daterange minimum days

Your calendar looks really good! Would like to use it in a little project of mine.
Hope the Disable dates feature is coming soon ;)
Perhaps you can implement the following feature as well: Minimum days to select.

Thanks!

Error on Vite after building

I'm using vite and after bulding the app and preview (production build), I try to load the component and got the following error:

ReferenceError: require is not defined
    at xw (index-18e2662a.js:formatted:29683)
    at IE (index-18e2662a.js:formatted:30605)
    at z0 (index-18e2662a.js:formatted:4725)
    at XC (index-18e2662a.js:formatted:8465)
    at QC (index-18e2662a.js:formatted:8101)
    at dL (index-18e2662a.js:formatted:8094)
    at Ud (index-18e2662a.js:formatted:8077)
    at av (index-18e2662a.js:formatted:7761)
    at jS (index-18e2662a.js:formatted:7830)
    at $o (index-18e2662a.js:formatted:3648)

Looks like Vite doesn't support require statements, How could I solve this?

[Feature Request] Custom theme classes applying to calendar

Hi,

Great project, really nice and easy to use and has all the features I need and more! I am currently working on a project that requires specific colours for theming/branding etc.

I have used tailwind.config.js to define a custom colour palette as described in the tailwind docs and I would like to use that class in the calendar to give the correct colours, is this something that could be supported by this package? I plan to (at some point) have a go at writing this myself and submitting a PR if I manage to get it working. In the meantime any suggestions on how to achieve this would be welcomed.

TIA

Mobile responsiveness

I don't think it's working as intended

[Feature Request]: Allow setting times for each date

Thank you for creating a great, simple datepicker for React + Tailwind. If possible, it would be greatly appreciated if you could allow the ability to set a time for each date. Example layout screenshotted below

[BUG] When using asSingle and useRange='false' the incorrect month is initially shown

I'm trying to show Datepickers, one to select From, the other to To. I want the default value of To to be a month ahead of the current date (Also the default From date). When I click on the From Datepicker, the correct date is shown along with the correct month. But when I select the To Datepicker, the wrong month is shown (Jan instead of Feb)

Toggle Light And Dark Mode

First of all, wonderful product. So I was just wondering how to toggle the mode from dark to light. Thank you.

[Feature Request] Use custom colors instead of being limited to predefined ones

Using Tailwind CSS, I can customize my colors as described in the documentation.

I'd like to be able to create custom colors and apply them to the datepicker instead of being limited to the predefined ones. It seems to me that every color in the component is computed based on the primaryColor prop.

If I'm correct, this feature could be achieved by doing a few changes:

In /src/helpers/index.ts, getTextColorByPrimaryColor can be replaced with:

export function getTextColorByPrimaryColor(color: string) {
	return `text-${color}-500`;
}

In /src/components/utils.tsx, in the RoundedButton, instead of the switch on primaryColor, it can be:

return `${defaultClass} focus:ring-${primaryColor}-500/50 focus:bg-${primaryColor}-100/50`;

In /src/constants/index.ts, instead of the BG_COLOR, TEXT_COLOR, BORDER_COLOR and RING_COLOR constants, we can write helpers getBgColor, getTextColor, getBorderColor and getRingColor respectively:

export function getBgColor(color: string, shade: "100" | "200" | "500" | "hover") {
	return shade === "hover" ? `hover:bg-${color}-600` : `bg-${color}-${shade}`;
}

export function getTextColor(color: string, shade: "600" | "hover") {
	return shade === "hover" ? `hover:text-${color}-700` : `text-${color}-${shade} dark:text-${color}-400 dark:hover:text-${color}-400`;
}

export function getBorderColor(color: string, shade: "500" | "focus") {
	return shade === "focus" ? `focus:border-${color}-500` : `border-${color}-${shade}`;
}

export function getRingColor(color: string, shade: "focus" | "second-focus") {
	return shade === "focus" ? `focus:ring-${color}-500` : `focus:ring-${color}-500/20`;
}

This should do the trick without breaking compatibility with existing predefined colors. One must create custom colors for every shade though (it seems at least 100, 200, 400, 500, 600 and 700 are mandatory for the moment).

Default inputClassName not applying, and overrding inputClassName is not working

I'm using the latest version of the tool, with react 18.2, I'm not sure what would cause this.

My config file looks correct to me.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    "./node_modules/react-tailwindcss-datepicker/dist/index.esm.js",
  ],
  theme: {
    extend: {
      backgroundColor: '#f1f5f9'
    },
  },
  plugins: [
    'tailwindcss',
    '@tailwindcss/forms'
  ],
}

Happy to provide more info, just not sure what else to give right now.

Type mismatch for Datepicker props with TS: onChange vs value

Awesome tool, just what I was looking for.

There seems to be a type mismatch. The value prop has the following type:

 value: {
        startDate: Date | string,
        endDate: Date | string,
    } | null

But the value passed in the onChange is the following:

value: {
        startDate: string | null,
        endDate: string | null
     }

So when trying to change the value you get the following error:

I'll create a PR for this

[Bug] Dates highlighted are incorrect once dates are selected

This bug occurs when I select dates

Expected Behavior:

The dates selected are highlighted, as well as any dates in between

Actual Behavior:

The endDate is correctly highlighted, but every date before the endDate is also highlighted, it isn't stopping at the startDate

Thoughts:

This bug could have been caused by the disabledDates/minDate/maxDate functionality being added PR: (#30).

I'll try to take a look a this but I'm pretty swamped with work right now and it's only an asthetic bug. If somebody else has time to take a look at this, feel free. It should be an easy enough fix, since the endDate hover works as intended, you probably just need to look at the difference between the startDate hover and endDate hover

How to configure endDate to optional?

Currently, initial endDate can be set to null, but not later on.

Tailwind prefix support

I tried your awesome datepicker, but i have a tailwind prefix in tailwind config file (prefix: "tw-")
therefor all the styles are not working because the elements in the package are without any prefix. Like in the picture -

Should allow highlighting the shortcut if it matches the date or date range selected

onChange does not fire when using the shortcuts

I've noticed that when using the shortcuts will not trigger the onChange function. The input does get updated with the range from the shortcuts, but the function does not fire.

It works fine if I select a range from the calendar manually.

I'm not sure if I missed something from the docs (I can replicate it with code from the demo page), or if this is a bug.

range picker of months, range picker of years, year picker, format value like reactdatepicker.com & add className props for customize tailwindcss class

• range picker of months => https://reactdatepicker.com/#example-range-month-picker

Add a new prop to change the format date

Hello, Thank you for creating a great component
I'm using this component, I faced the issue can not change the format date (example I want to change to "DD-MM-YYYY")
I checked your code on the Datepicker.tsx file will call formatDate function, but you don't pass the format param to this function

the return value fron onChange are no pad zero

when I select the date it return this pattern endDate: 2023-4-28, startDate: 2023-4-5 it has no pad zero at 4 it should be 2023-04-23 but not the same when it click at last 30 day it return with pad zero like this endDate: 2023-03-03 startDate: 2023-02-01, so I can't parse this for math to another date type

[Bug] month label wrong display when set i18n to vi

My code

syntaxError: unexpected token '.' , (In production).

I am using "next": "12.3.0","react": "18.2.0", "dayjs": "^1.11.7","tailwindcss": "^3.1.8".
In development mode, It works fine but in case of production it passes all the test and show, error message, syntax error at index.cjs.js, line 1074, as like in attached image.

Input value does not reset on context value reset

I am not 100% sure it's an issue, but it looks like one to me. I am using your component with ReactHookForm via Controller:

<Controller
    control={control}
    name="created"
    render={({ field: { onChange, value } }) => {
      return (
        // Input text is not cleared on form reset, value is emptied properly
        <Datepicker
          value={value}
          onChange={onChange}
          useRange={false}
          primaryColor="indigo"
          placeholder={t('filters.date.placeholder.created')}
        />
      )
    }}
  />

and when I attempt to reset the form values, the value inside the state gets cleared, but the value of the input does not.
Is it on purpose and I am not getting smth or it's a legit bug?

Here the recording when I clear the state values:
https://user-images.githubusercontent.com/10107362/208317554-2db7671f-cfb3-4bd4-a01d-8c44d1b4e299.mov

[Feature Request] allow user to set `secondDate` for the range datepicker

Thank you for your nice work. It is truly a wonderful library. It would be nice if one can set the secondDate prop to set the second datepicker component's default date in the range type datepicker. Something like

    const [firstDate, setFirstDate] = useState<dayjs.Dayjs>(
        startFrom && dayjs(startFrom).isValid() ? dayjs(startFrom) : dayjs()
    );
    const [period, setPeriod] = useState<Period>({
        start: null,
        end: null
    });
-   const [secondDate, setSecondDate] = useState<dayjs.Dayjs>(nextMonth(firstDate));
+   const [secondDate, setSecondDate] = useState<dayjs.Dayjs>(
+     endIn && dayjs(endIn).isValid()
+       ? dayjs(endIn)
+       : nextMonth(firstDate)
+   );

Feature request: ability to customize button icons

Love the datepicker, but my designer wants to use a specific icon for the calendar button. I can almost work around it using CSS (see code) but then I lose the close button as they both have the same selector and so they both look the same, breaking the component visually.

.custom-datepicker button.absolute.right-0 { svg { opacity: 0; } &:after { content: ' '; background-size: contain; display: block; width: 32px; height: 32px; background-image: url("data:image/svg+xml..."); ... } }

Ideally, it could work something like this:

<Datepicker value={dateFilter} onChange={setDateFilter} calendarIcon={<MySVGIcon className="w-5 h-5" />} />

Cheers!

[Feature request] Add time with date

Some form fields need time with date.This datetime feature will complete this package. Waiting for it.

How to swap the icon and input position?

I want the icon button to be on the left and the input on the right.

Calendar without input

Is there a possibility to use this datapicker as calendar without input. My case is that I have to popup calendar in the portal and i don't have access to the calendar itself.

Format issue

Hi, I love the lib but I'm surprised by the date format.
In the documentation, it is written that it should be YYYY-MM-DD, but today is the 4th and I'm getting 2023-1-4.
I was expecting to have leading zeros (2023-01-04) as the norm ISO expect ? ISO 8601 or ISO 8601 norm
(I can open a PR if necessary to look at the necessary changes)

Customize / remove certain shortcuts

It would be great to be able to remove certain shortcuts (i.e. remove Today / Yesterday but leave the rest).

Months always starts on sundays

I'm facing this issue where all months stars on the same weekday, Sunday. Here are some screenshots.

Package versions:

react: 17.0.8
react-tailwindcss-datepicker: 1.4.2
dayjs: 1.11.7

Any clue on what can be causing it?

Disable years outside your minDate and MaxDate

If a year is clearly outside the min and max set in the component it would be a nice UX change to disable those buttons in the year picker

Thanks for this project!

Datepicker triggers the form to submit

Thank you for this great project. Loved it!

Just ran into some minor issues when the Datepicker is used inside a form.

Any click within the calendar submits the form.

PR here #9

Add ability to specify more granular timestamp

Hey - neat library! Just wondering if there are any plans to add the ability for users to specify a timestamp in addition to the date.

For example, I want to be able to specify a range like:

startTimestamp=2022-12-08 15:32:21
startTimestamp=2022-12-08 16:48:00

typing into the input does not appear to trigger onChange

When I type into the input no matter what date format I use, I do not see the onChange being triggered

Allow user to enter dates via the text input

Thanks for the library, really enjoying it so far 🎉

As an improvement, it would be great if when the user inputs a valid date via the text input that the Datepicker updates it's value to that date.

Or, failing that, it would be a useful fallback for Datepicker to have some sort of onInputChange prop which gets called when the user types into the input. That way whoever is rendering the Datepicker can decide themselves what to do with the text input value.

The root of the problem is that the library makes it hard to know what the user is doing in that text input, and anything to be able to access that value would be hugely helpful.

[Feature Request] onBlur prop

Seems that Datepicker does not propagate addiitional props such onBlur, and using it with Formik for example, does not take into account whether Datepicker was touched or not...

Any idea how to overcome the issue?

Thank you