Update index.js

Author: JefteCaro

pages/index.js

@@ -23,6 +23,10 @@ export default function Playground() {
     const [containerClassName, setContainerClassName] = useState("");
     const [displayFormat, setDisplayFormat] = useState("YYYY-MM-DD");
     const [readOnly, setReadOnly] = useState(false);
+    const [minDate, setMinDate] = useState("");
+    const [maxDate, setMaxDate] = useState("");
+    const [disabledDates, setDisabledDates] = useState([]);
+    const [newDisabledDates, setNewDisabledDates] = useState({ startDate: "", endDate: "" });
     const [startFrom, setStartFrom] = useState("2023-03-01");
     const [startWeekOn, setStartWeekOn] = useState(null);
 
@@ -59,6 +63,9 @@ export default function Playground() {
                     containerClassName={containerClassName}
                     displayFormat={displayFormat}
                     readOnly={readOnly}
+                    minDate={minDate}
+                    maxDate={maxDate}
+                    disabledDates={disabledDates}
                     startWeekOn={startWeekOn}
                 />
             </div>
@@ -209,6 +216,19 @@ export default function Playground() {
                             }}
                         />
                     </div>
+                    <div className="mb-2">
+                        <label className="block" htmlFor="minDate">
+                            Minimum Date
+                        </label>
+                        <input
+                            className="rounded border px-4 py-2 w-full border-gray-200"
+                            id="minDate"
+                            value={minDate}
+                            onChange={e => {
+                                setMinDate(e.target.value);
+                            }}
+                        />
+                    </div>
                 </div>
                 <div className="w-full sm:w-1/3 pr-2 flex flex-col">
                     <div className="mb-2">
@@ -263,6 +283,19 @@ export default function Playground() {
                             }}
                         />
                     </div>
+                    <div className="mb-2">
+                        <label className="block" htmlFor="maxDate">
+                            Maximum Date
+                        </label>
+                        <input
+                            className="rounded border px-4 py-2 w-full border-gray-200"
+                            id="maxDate"
+                            value={maxDate}
+                            onChange={e => {
+                                setMaxDate(e.target.value);
+                            }}
+                        />
+                    </div>
                     <div className="mb-2">
                         <label className="block" htmlFor="startWeekOnClassName">
                             Start Week On
@@ -272,11 +305,89 @@ export default function Playground() {
                             id="startWeekOnClassName"
                             value={startWeekOn}
                             onChange={e => {
-                                setStartWeekOn(e.target.value)
+                                setStartWeekOn(e.target.value);
                             }}
                         />
                     </div>
                 </div>
+                <div className="w-full grid sm:grid-cols-3">
+                    <div className="sm:col-start-2 sm:col-span-2 p-2 border-t grid grid-cols-2">
+                        <h1 className="mb-2 text-lg font-semibold text-center col-span-3">
+                            Disable Dates
+                        </h1>
+                        <div className="mb-2 sm:col-span-2 mr-2">
+                            <label className="block" htmlFor="startDate">
+                                Start Date
+                            </label>
+                            <input
+                                className="rounded border px-4 py-2 border-gray-200 sm:w-full w-3/4"
+                                id="startDate"
+                                value={newDisabledDates.startDate}
+                                onChange={e => {
+                                    setNewDisabledDates(prev => {
+                                        return {
+                                            ...prev,
+                                            startDate: e.target.value
+                                        };
+                                    });
+                                }}
+                            />
+                        </div>
+                        <div className="mb-2">
+                            <label className="block" htmlFor="endDate">
+                                End Date
+                            </label>
+                            <input
+                                className="rounded border px-4 py-2 border-gray-200 sm:w-full w-3/4"
+                                id="endDate"
+                                value={newDisabledDates.endDate}
+                                onChange={e => {
+                                    setNewDisabledDates(prev => {
+                                        return {
+                                            ...prev,
+                                            endDate: e.target.value
+                                        };
+                                    });
+                                }}
+                            />
+                        </div>
+                        <div className="mb-2 col-span-3">
+                            <button
+                                onClick={() => {
+                                    if (
+                                        newDisabledDates.startDate !== "" &&
+                                        newDisabledDates.endDate !== ""
+                                    ) {
+                                        setDisabledDates(prev => [...prev, newDisabledDates]);
+                                        setNewDisabledDates({ startDate: "", endDate: "" });
+                                    }
+                                }}
+                                className="w-full bg-black text-white text-lg text-center p-2 rounded-lg"
+                            >
+                                Add
+                            </button>
+                        </div>
+                        <div className="mb-2 grid col-span-3 grid-col-2">
+                            {disabledDates.map((range, index) => (
+                                <div className="mb-2 p-2" key={index}>
+                                    <button
+                                        className="bg-red-500 text-white text-center rounded-xl p-2"
+                                        onClick={() => {
+                                            setDisabledDates(
+                                                disabledDates.filter(r => r !== range)
+                                            );
+                                        }}
+                                    >
+                                        Delete
+                                    </button>
+                                    <span className="pl-2">
+                                        {range.startDate} - {range.endDate}
+                                    </span>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                </div>
             </div>
             <div className="flex flex-row flex-wrap items-center justify-center w-full">
                 <a