So it works as intented but the width is off. I found out that on file:
src/Components/Views/Months.tsx

on line 9, if I change the w-64 to w-full its perfect. Same applies to Day.tsx and Year.tsx

The workaround is to set the datepickerClassNames to any smaller width and it adjusts.

Thought if you want a wider calendar then you can't do anything about it.

There's this property called disabledText which gets some classNames for each day.
The problem is that whenever I put minDate to new Date(), meaning that I want days before now to be disabled, and then give disabledTest some specific styles, the days for the next month get the same style as well. They appear disabled, even though user can click on them without changing the month.

To fix this, there should be a new property in the Themes called nextMonthText or oherMonthText or something similar that developers can use to specify the custom style of days in other months.

I'm using [email protected]

The props disabledDates is not working and I got that the disabledDates works for specific dates, is that correct?

When using the advanced option, it seems that the picker does not hold state.

Does your example work? As there is no demo for that implementation.

Thanks,
Rob

I use your component as a filter, and I have a reset button to clean every. When I try to set value in the component as empty string, zero, null or undefined, it still showing previous selected date. Can you please add me advise how to empty component display value and show a placeholder? Thank you

handleClickOutside relies on refs to the input element and the picker modal, which are not available when using an individual input element.

Cannot be used with typescript:

Could not find a declaration file for module 'tailwind-datepicker-react'

i notice that this datepicker does not work when there is a tailwind prefix like "tw-" . Do we have a workaround for this? will it be supported in future?

I'm not able to click outside the popup window to minimize. I have a click away listener, but it doesn't look like the ref for the popup window is forward so It can't be referenced as is. If this is something you'd like to support i'd be happy to submit a PR.

Thanks for great product - one question I'm trying to use placeholder prop but if no date selected then today's date is showing rather than placeholder - is there a way to support showing placeholder if no date selected?

Thanks

I have a modal with only one input element (the date picker). As soon as the modal opens, the date picker is shown, because it is the only input element and gets focused.

Apparently the IOptions type is missing weekDays in the 1.4.2 release.

I tried to use inputIcon on theme but not working

When I select any date before 1970, date picker calendar does not show selected date.

How can I listen when clearing date using clear button?
or its not implement yet?

Currently, you have this input field provided by the library:

It'd be amazing if you could style this input field too. I tried using classNames on the DatePicker and change the background color (in this example bg-green-300) but unfortunately it doesn't work as expected (check the edges):

I need to find a way to only show the Months Popup.

Hey, awesome component!
I can't figure out how to change the height. i don't see anything in the props that allows for this and trying to constrain within a parent div also doesn't work.

Is there any way for me to do this?

thanks!

The npm package version is 1.4.2 but it's not synced with the latest changes, for instance, the new props in the options are still missing. can you please update it?

How do I customize NextBtn, PrevBtn and Middle button of the date picker with tailwind classes in my NextJs project?

When I click next or previous month, would it be possible to not select by default? This will also help with min and max selectable dates.

For eg. if I have Jul 20 as the selected date and I have Aug 15 set as the max date, I am unable to move to Aug month unless I choose 14 or less in the current active month window and then move to next.

By default when component is mounted the current date is selected. Is there a way to keep the field empty similar to what clear button does.

First, thanks for the awesome open source project!

Is there a way to style the selected day?

The options.theme.selected seems to apply only to the current hovered over day. It'd be great if we could style the selected day in the calendar. That's specially useful when we're editing something, e.g., a task with a due date, and we want to change the due date in a latter time, so we open the calendar again to change it. In such a case being able to see in the calendar the current selected day with a custom style would be very useful for users. We'd have to send the selected date to the Datepicker component, but that's a non issue.

Why am I getting this error:
Type '{ title: string; autoHide: boolean; todayBtn: boolean; clearBtn: boolean; clearBtnText: string; maxDate: Date; minDate: Date; theme: { background: string; todayBtn: string; clearBtn: string; ... 6 more ...; previousBtn: string; }; ... 9 more ...; inputDateFormatProp: { ...; }; }' is not assignable to type 'IOptions'.
The types of 'inputDateFormatProp.year' are incompatible between these types.
Type 'string' is not assignable to type '"numeric" | "2-digit" | undefined'.ts(2322)
DatePicker.d.ts(6, 5): The expected type comes from property 'options' which is declared here on type 'IntrinsicAttributes & IDatePickerProps'

Here is my code:

'use client'

import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons";
import { useState } from "react";
import Datepicker from "tailwind-datepicker-react"
import { FormField } from "./form";

const options = {
title: "Date Picker",
autoHide: true,
todayBtn: false,
clearBtn: false,
clearBtnText: "Clear",
maxDate: new Date("2030-01-01"),
minDate: new Date("1950-01-01"),
theme: {
background: "bg-white dark:bg-gray-800",
todayBtn: "",
clearBtn: "",
icons: "",
text: "",
disabledText: "bg-grey-500",
input: "",
inputIcon: "",
selected: "",
previousBtn: "p-0"
},
icons: {
// () => ReactElement | JSX.Element
prev: () => ,
next: () => ,
},
datepickerClassNames: "top-12",
defaultDate: new Date("2022-01-01"),
language: "en",
disabledDates: [],
weekDays: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
inputNameProp: "date",
inputIdProp: "date",
inputPlaceholderProp: "Select Date",
inputDateFormatProp: {
year: "numeric",
month: "numeric",
day: "numeric",
}
}

const DatePicker = () => {
const [show, setShow] = useState(false);
const [selectedDate, setSelectedDate] = useState<Date | null>(null);
const handleChange = (selectedDate: Date) => {
setSelectedDate(selectedDate)
console.log(selectedDate)
}
const handleClose = (state: boolean) => {
setShow(state)
}

return (
	<div>
		<Datepicker options={options} onChange={handleChange} show={show} setShow={handleClose}>
			<div className="...">
				<FormField name='' type="text" className="..." placeholder="Select Date" value={selectedDate?.toString()} onFocus={() => setShow(true)} readOnly />
			</div>
		</Datepicker>
	</div>
)

}

export default DatePicker;

For regular inputs you can turn it into a controlled input by adding a value prop so that you can change the input's value to whatever you'd like. Is that supported?

I don't really want to customize the input, just tell it what value I need when browsing through multiple different date items.

Is that possible?

Thanks!

I really liked the simplicity of this lib, but I want to add a time picker inside the popup dialog to avoid opening another dialog after selecting the date.
Since adding a time picker to this library will be too complicated, add support to render custom react components before/after calendar view. Just like we can render different icons for previous and next month.

For eg. maxDate is set to 2nd Jan 2024. clicking on next() button, doesn't update the UI, i.e. the UI still shows Jan, 2024 calender but behind the hood, it navigates to furture months. so when i close and open it again it shows future disabled month, say something like May, 2024.

I want to know selectedDate changes when i click clear button