Added anchor option to date picker to prevent overflow

README.md

@@ -185,6 +185,7 @@ const DemoComponent = () => {
 
 ### IOptions
 
+- anchor?: "auto"|"left"|"right" - Default: `auto`
 - title?: string - Default: `disabled`
 - autoHide?: boolean - Default: `true`
 - todayBtn?: boolean - Default: `true`

src/Components/DatePicker.tsx

@@ -17,7 +17,7 @@ export interface IDatePickerProps {
 }
 
 const DatePicker = ({ value, children, options, onChange, classNames, show, setShow, selectedDateState }: IDatePickerProps) => (
-	<div className={twMerge("w-full", classNames)}>
+	<div className={twMerge("w-full relative", classNames)}>
 		<DatePickerProvider options={options} onChange={onChange} show={show} setShow={setShow} selectedDateState={selectedDateState}>
 			<DatePickerMain value={value} options={options}>
 				{children}

src/Components/DatePickerPopup.tsx

@@ -1,4 +1,4 @@
-import React, { ForwardedRef, forwardRef, useContext } from "react"
+import React, {ForwardedRef, forwardRef, useContext, useEffect, useState} from "react"
 import { twMerge } from "tailwind-merge"
 import { dayOfTheWeekOf, firstDateOfMonth } from "../Utils/date"
 import { ButtonClear, ButtonNextMonth, ButtonPrevMonth, ButtonSelectMonth, ButtonToday } from "./Buttons"
@@ -18,9 +18,36 @@ const DatePickerPopup = forwardRef<HTMLDivElement>((_props, ref: ForwardedRef<HT
 	const weekStart = (locale?.weekInfo?.firstDay || 1);
 	const firstOfMonth = firstDateOfMonth(selectedYear, selectedMonth, 1)
 	const start = dayOfTheWeekOf(firstOfMonth, weekStart, weekStart);
+
+
+	const [leftAnchor,setLeftAnchor] = useState(options.anchor !== "right")
+
+	useEffect(()  => {
+		setLeftAnchor(options.anchor !== "right")
+		if (options.anchor !== "auto"){
+			return;
+		}
+		// @ts-ignore
+		const  _ref: HTMLDivElement = ref.current;
+		if (!_ref){
+			return;
+		}
+
+		const resize = () => {
+			const rect = _ref.getBoundingClientRect();
+			const screenWidth = window.innerWidth;
+
+			setLeftAnchor(rect.right <= screenWidth)
+		}
+		resize();
+		window.addEventListener("resize",resize);
+		return  () => {
+			window.removeEventListener("resize",resize)
+		}
+	},[ref,options.anchor])
 
 	return (
-		<div ref={ref} className={twMerge("absolute z-50 block pt-2 top-10", options?.datepickerClassNames)}>
+		<div ref={ref} className={twMerge("absolute z-50 block pt-2 top-10"+(leftAnchor ? "" : "  right-0"), options?.datepickerClassNames)}>
 			<div className={twMerge("inline-block p-4 bg-white rounded-lg shadow-lg dark:bg-gray-700", options?.theme?.background)}>
 				<div>
 					{options?.title && <div className={twMerge("px-2 py-3 font-semibold text-center text-gray-900 dark:text-white", options?.theme?.text)}>{options?.title}</div>}

src/Options.ts

@@ -18,6 +18,7 @@ interface IIcons {
 }
 
 export interface IOptions {
+	anchor?: "left"|"right"|"auto",
 	title?: string
 	autoHide?: boolean
 	todayBtn?: boolean
@@ -40,6 +41,7 @@ export interface IOptions {
 }
 
 const options: IOptions = {
+	anchor: "auto",
 	autoHide: true,
 	todayBtn: true,
 	clearBtn: true,