New option for setting the 'required' attribute on the date picker input element.

.eslintrc.json

@@ -10,8 +10,7 @@
         "plugin:react/recommended",
         "plugin:@typescript-eslint/recommended",
         "plugin:prettier/recommended",
-        "plugin:react-hooks/recommended",
-        "next/core-web-vitals"
+        "plugin:react-hooks/recommended"
     ],
     "overrides": [],
     "parser": "@typescript-eslint/parser",
@@ -27,7 +26,7 @@
             "version": "detect"
         }
     },
-    "plugins": ["react", "@typescript-eslint", "import", "prettier", "@next/eslint-plugin-next"],
+    "plugins": ["react", "@typescript-eslint", "import", "prettier"],
     "rules": {
         "indent": "off",
         "linebreak-style": ["error", "unix"],

pages/index.js

@@ -31,6 +31,7 @@ export default function Playground() {
     const [newDisabledDates, setNewDisabledDates] = useState({ startDate: "", endDate: "" });
     const [startFrom, setStartFrom] = useState("2023-03-01");
     const [startWeekOn, setStartWeekOn] = useState("");
+    const [required, setRequired] = useState(false);
 
     const handleChange = (value, e) => {
         setValue(value);
@@ -113,6 +114,7 @@ export default function Playground() {
                         return isEmpty ? "Select Date" : "Clear";
                     }}
                     popoverDirection={"down"}
+                    required={required}
                     // classNames={{
                     //     input: ({ disabled, readOnly, className }) => {
                     //         if (disabled) {
@@ -215,6 +217,20 @@ export default function Playground() {
                             </label>
                         </div>
                     </div>
+                    <div className="mb-2 w-1/2 sm:w-full">
+                        <div className="inline-flex items-center">
+                            <input
+                                type="checkbox"
+                                className="mr-2 rounded"
+                                id="required"
+                                checked={required}
+                                onChange={e => setRequired(e.target.checked)}
+                            />
+                            <label className="block" htmlFor="required">
+                                Required
+                            </label>
+                        </div>
+                    </div>
                 </div>
                 <div className="w-full sm:w-1/3 pr-2 flex flex-col">
                     <div className="mb-2">

src/components/Calendar/Years.tsx

@@ -1,10 +1,9 @@
+import DatepickerContext from "contexts/DatepickerContext";
 import React, { useContext } from "react";
 
 import { generateArrayNumber } from "../../helpers";
 import { RoundedButton } from "../utils";
 
-import DatepickerContext from "contexts/DatepickerContext";
-
 interface Props {
     year: number;
     currentYear: number;

src/components/Calendar/index.tsx

@@ -1,5 +1,6 @@
 import dayjs from "dayjs";
 import React, { useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { DateType } from "types";
 
 import { CALENDAR_SIZE, DATE_FORMAT } from "../../constants";
 import DatepickerContext from "../../contexts/DatepickerContext";
@@ -27,8 +28,6 @@ import Months from "./Months";
 import Week from "./Week";
 import Years from "./Years";
 
-import { DateType } from "types";
-
 interface Props {
     date: dayjs.Dayjs;
     minDate?: DateType | null;

src/components/Datepicker.tsx

@@ -41,7 +41,8 @@ const Datepicker: React.FC<DatepickerType> = ({
     inputName,
     startWeekOn = "sun",
     classNames = undefined,
-    popoverDirection = undefined
+    popoverDirection = undefined,
+    required = false
 }) => {
     // Ref
     const containerRef = useRef<HTMLDivElement | null>(null);
@@ -282,7 +283,8 @@ const Datepicker: React.FC<DatepickerType> = ({
             classNames,
             onChange,
             input: inputRef,
-            popoverDirection
+            popoverDirection,
+            required
         };
     }, [
         asSingle,
@@ -315,7 +317,8 @@ const Datepicker: React.FC<DatepickerType> = ({
         classNames,
         inputRef,
         popoverDirection,
-        firstGotoDate
+        firstGotoDate,
+        required
     ]);
 
     const containerClassNameOverload = useMemo(() => {

src/components/Input.tsx

@@ -36,7 +36,8 @@ const Input: React.FC<Props> = (e: Props) => {
         inputId,
         inputName,
         classNames,
-        popoverDirection
+        popoverDirection,
+        required
     } = useContext(DatepickerContext);
 
     // UseRefs
@@ -273,6 +274,7 @@ const Input: React.FC<Props> = (e: Props) => {
                 className={getClassName()}
                 disabled={disabled}
                 readOnly={readOnly}
+                required={required}
                 placeholder={
                     placeholder
                         ? placeholder

src/contexts/DatepickerContext.ts

@@ -50,6 +50,7 @@ interface DatepickerStore {
     inputName?: string;
     classNames?: ClassNamesTypeProp;
     popoverDirection?: PopoverDirectionType;
+    required?: boolean;
 }
 
 const DatepickerContext = createContext<DatepickerStore>({
@@ -92,6 +93,7 @@ const DatepickerContext = createContext<DatepickerStore>({
     toggleIcon: undefined,
     classNames: undefined,
     popoverDirection: undefined,
+    required: false,
     separator: "~"
 });
 

src/types/index.ts

@@ -82,6 +82,7 @@ export interface DatepickerType {
     disabledDates?: DateRangeType[] | null;
     startWeekOn?: string | null;
     popoverDirection?: PopoverDirectionType;
+    required?: boolean;
 }
 
 export type ColorKeys = (typeof COLORS)[number]; // "blue" | "orange"