Merge pull request #41 from sct/master

Add props to pass id and name attributes to the <input>

Author: JefteCaro

pages/index.js

@@ -21,6 +21,7 @@ export default function Playground() {
     const [disabled, setDisabled] = useState(false);
     const [inputClassName, setInputClassName] = useState("");
     const [containerClassName, setContainerClassName] = useState("");
+    const [toggleClassName, setToggleClassName] = useState("");
     const [displayFormat, setDisplayFormat] = useState("YYYY-MM-DD");
     const [readOnly, setReadOnly] = useState(false);
     const [minDate, setMinDate] = useState("");
@@ -61,6 +62,7 @@ export default function Playground() {
                     disabled={disabled}
                     inputClassName={inputClassName}
                     containerClassName={containerClassName}
+                    toggleClassName={toggleClassName}
                     displayFormat={displayFormat}
                     readOnly={readOnly}
                     minDate={minDate}
@@ -230,15 +232,15 @@ export default function Playground() {
                         />
                     </div>
                     <div className="mb-2">
-                        <label className="block" htmlFor="startWeekOnClassName">
-                            Start Week On
+                        <label className="block" htmlFor="maxDate">
+                            Maximum Date
                         </label>
                         <input
                             className="rounded border px-4 py-2 w-full border-gray-200"
-                            id="startWeekOnClassName"
-                            value={startWeekOn}
+                            id="maxDate"
+                            value={maxDate}
                             onChange={e => {
-                                setStartWeekOn(e.target.value);
+                                setMaxDate(e.target.value);
                             }}
                         />
                     </div>
@@ -297,15 +299,28 @@ export default function Playground() {
                         />
                     </div>
                     <div className="mb-2">
-                        <label className="block" htmlFor="maxDate">
-                            Maximum Date
+                        <label className="block" htmlFor="containerClassName">
+                            Toggle Class
                         </label>
                         <input
                             className="rounded border px-4 py-2 w-full border-gray-200"
-                            id="maxDate"
-                            value={maxDate}
+                            id="toggleClassName"
+                            value={toggleClassName}
                             onChange={e => {
-                                setMaxDate(e.target.value);
+                                setToggleClassName(e.target.value);
+                            }}
+                        />
+                    </div>
+                    <div className="mb-2">
+                        <label className="block" htmlFor="startWeekOnClassName">
+                            Start Week On
+                        </label>
+                        <input
+                            className="rounded border px-4 py-2 w-full border-gray-200"
+                            id="startWeekOnClassName"
+                            value={startWeekOn}
+                            onChange={e => {
+                                setStartWeekOn(e.target.value);
                             }}
                         />
                     </div>

src/components/Datepicker.tsx

@@ -40,6 +40,9 @@ interface Props {
     i18n?: string;
     disabled?: boolean;
     inputClassName?: string | null;
+    toggleClassName?: string | null;
+    inputId?: string;
+    inputName?: string;
     containerClassName?: string | null;
     displayFormat?: string;
     readOnly?: boolean;
@@ -65,11 +68,14 @@ const Datepicker: React.FC<Props> = ({
     disabled = false,
     inputClassName = null,
     containerClassName = null,
+    toggleClassName = null,
     displayFormat = "YYYY-MM-DD",
     readOnly = false,
     minDate = null,
     maxDate = null,
     disabledDates = null,
+    inputId,
+    inputName,
     startWeekOn = "sun"
 }) => {
     // Ref
@@ -279,11 +285,14 @@ const Datepicker: React.FC<Props> = ({
             disabled,
             inputClassName,
             containerClassName,
+            toggleClassName,
             readOnly,
             displayFormat,
             minDate,
             maxDate,
             disabledDates,
+            inputId,
+            inputName,
             startWeekOn
         };
     }, [
@@ -303,12 +312,15 @@ const Datepicker: React.FC<Props> = ({
         disabled,
         inputClassName,
         containerClassName,
+        toggleClassName,
         readOnly,
         displayFormat,
         firstGotoDate,
         minDate,
         maxDate,
         disabledDates,
+        inputId,
+        inputName,
         startWeekOn
     ]);
 

src/components/Input.tsx

@@ -25,8 +25,11 @@ const Input: React.FC = () => {
         separator,
         disabled,
         inputClassName,
+        toggleClassName,
         readOnly,
-        displayFormat
+        displayFormat,
+        inputId,
+        inputName
     } = useContext(DatepickerContext);
 
     // UseRefs
@@ -177,14 +180,18 @@ const Input: React.FC = () => {
                         : `${displayFormat}${asSingle ? "" : ` ${separator} ${displayFormat}`}`
                 }
                 value={inputText}
+                id={inputId}
+                name={inputName}
+                autoComplete="off"
+                role="presentation"
                 onChange={handleInputChange}
             />
 
             <button
                 type="button"
                 ref={buttonRef}
                 disabled={disabled}
-                className="absolute right-0 h-full px-3 text-gray-400 focus:outline-none disabled:opacity-40 disabled:cursor-not-allowed"
+                className={`absolute right-0 h-full px-3 text-gray-400 focus:outline-none disabled:opacity-40 disabled:cursor-not-allowed ${toggleClassName}`}
             >
                 {inputText ? <CloseIcon className="h-5 w-5" /> : <DateIcon className="h-5 w-5" />}
             </button>

src/contexts/DatepickerContext.ts

@@ -26,12 +26,15 @@ interface DatepickerStore {
     disabled?: boolean;
     inputClassName?: string | null;
     containerClassName?: string | null;
+    toggleClassName?: string | null;
     readOnly?: boolean;
     startWeekOn?: string | null;
     displayFormat?: string;
     minDate?: DateType | null;
     maxDate?: DateType | null;
     disabledDates?: DateRangeType[] | null;
+    inputId?: string;
+    inputName?: string;
 }
 
 const DatepickerContext = createContext<DatepickerStore>({
@@ -59,11 +62,14 @@ const DatepickerContext = createContext<DatepickerStore>({
     disabled: false,
     inputClassName: "",
     containerClassName: "",
+    toggleClassName: "",
     readOnly: false,
     displayFormat: "YYYY-MM-DD",
     minDate: null,
     maxDate: null,
     disabledDates: null,
+    inputId: undefined,
+    inputName: undefined,
     startWeekOn: "sun"
 });