OMikkel/tailwind-datepicker-react

The types of 'inputDateFormatProp.year' are incompatible between these types.

Opened this issue · 0 comments

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;