📅 DatePicker-2201

A lightweight and customizable React datepicker component with support for locale, styling, and control props.

📦 Installation

npm install datepicker-2201 Note: This package requires a React project.

🎨 Styling

To apply the default styles, import the stylesheet in your main.ts (or equivalent entry file): import "datepicker-2201/output.css";

⚙️ Required Props

value – The selected date value. setValue – A setter function for updating the selected date (e.g., from useState). const [calendarValue, setCalendarValue] = useState<Date | null>(null);

🧩 Optional Props

landCode (string) Locale used by the datepicker. Example: "sv-SE". Default: "en-US"

startOnMonday (boolean) Determines if the calendar week starts on Monday. Default: false

open (boolean) Controls whether the datepicker is initially open. Default: false

The datepicker remains interactive and closable even if initially open.

backColor (string) Background color of the calendar. Accepts a Tailwind CSS class string. Example: "bg-white"

✅ Example Usage

import DatePicker from "datepicker-2201";
const [calendarValue, setCalendarValue] = useState<Date | null>(null);

<DatePicker
  value={calendarValue}
  setValue={setCalendarValue}
  landCode="sv-SE"
  startOnMonday
  open
  backColor="bg-white"
/>