Merge pull request #182 from scrappergus/master

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

Author: onesine

.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"