add props to pass an input ID and input name to the input field

Author: sct

CONTRIBUTING.md

@@ -1,18 +1,22 @@
 # Contributing
 
-Thanks for your interest in contributing to `react-tailwindcss-datepicker`! Please take a moment to review this document **before submitting a pull request**.
+Thanks for your interest in contributing to `react-tailwindcss-datepicker`! Please take a moment to
+review this document **before submitting a pull request**.
 
-- [Pull requests](#pull-requests)
-- [Installation](#installation)
-- [Coding standards](#coding-standards)
-- [Running playground](#running-playgrounds)
-- [Before you make a Pull Request](#before-you-make-a-pull-request)
+-   [Pull requests](#pull-requests)
+-   [Installation](#installation)
+-   [Coding standards](#coding-standards)
+-   [Running playground](#running-playgrounds)
+-   [Before you make a Pull Request](#before-you-make-a-pull-request)
 
 ## Pull requests
 
 **Please ask first before starting work on any significant new features.**
 
-It's never a fun experience to have your pull request declined after investing a lot of time and effort into a new feature. To avoid this from happening, we request that contributors create [an issue](https://github.com/onesine/react-tailwindcss-datepicker/issues) to first discuss any significant new features.
+It's never a fun experience to have your pull request declined after investing a lot of time and
+effort into a new feature. To avoid this from happening, we request that contributors create
+[an issue](https://github.com/onesine/react-tailwindcss-datepicker/issues) to first discuss any
+significant new features.
 
 ## Installation
 
@@ -24,8 +28,8 @@ yarn install
 
 ## Coding standards
 
-We use `prettier` for making sure that the codebase is formatted consistently.
-To automatically fix any style violations in your code, you can run:
+We use `prettier` for making sure that the codebase is formatted consistently. To automatically fix
+any style violations in your code, you can run:
 
 **Using yarn**
 
@@ -61,16 +65,18 @@ npm dev
 
 ## Before you make a Pull Request
 
-We recommend to run these scripts in sequence before you make your commit message amd open a Pull Request
+We recommend to run these scripts in sequence before you make your commit message amd open a Pull
+Request
 
 **Let's clean the code first**
+
 ```sh
 yarn pret:fix
 ```
 
 **Test a build of your changes**
+
 ```sh
 yarn build
 
 ```
-

package.json

@@ -65,5 +65,8 @@
         "tailwindcss": "^3.2.4",
         "tslib": "^2.4.0",
         "typescript": "^4.8.4"
+    },
+    "publishConfig": {
+        "registry": "https://registry.npmjs.com"
     }
 }

src/components/Datepicker.tsx

@@ -40,6 +40,8 @@ interface Props {
     i18n?: string;
     disabled?: boolean;
     inputClassName?: string | null;
+    inputId?: string;
+    inputName?: string;
     containerClassName?: string | null;
     displayFormat?: string;
     readOnly?: boolean;
@@ -68,7 +70,9 @@ const Datepicker: React.FC<Props> = ({
     readOnly = false,
     minDate = null,
     maxDate = null,
-    disabledDates = null
+    disabledDates = null,
+    inputId,
+    inputName
 }) => {
     // Ref
     const containerRef = useRef<HTMLDivElement>(null);
@@ -281,7 +285,9 @@ const Datepicker: React.FC<Props> = ({
             displayFormat,
             minDate,
             maxDate,
-            disabledDates
+            disabledDates,
+            inputId,
+            inputName
         };
     }, [
         asSingle,
@@ -305,7 +311,9 @@ const Datepicker: React.FC<Props> = ({
         firstGotoDate,
         minDate,
         maxDate,
-        disabledDates
+        disabledDates,
+        inputId,
+        inputName
     ]);
 
     return (

src/components/Input.tsx

@@ -26,7 +26,9 @@ const Input: React.FC = () => {
         disabled,
         inputClassName,
         readOnly,
-        displayFormat
+        displayFormat,
+        inputId,
+        inputName
     } = useContext(DatepickerContext);
 
     // UseRefs
@@ -177,14 +179,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 top-0 right-0 h-full px-3 text-gray-400 focus:outline-none disabled:opacity-40 disabled:cursor-not-allowed"
             >
                 {inputText ? <CloseIcon className="h-5 w-5" /> : <DateIcon className="h-5 w-5" />}
             </button>

src/contexts/DatepickerContext.ts

@@ -31,6 +31,8 @@ interface DatepickerStore {
     minDate?: DateType | null;
     maxDate?: DateType | null;
     disabledDates?: DateRangeType[] | null;
+    inputId?: string;
+    inputName?: string;
 }
 
 const DatepickerContext = createContext<DatepickerStore>({
@@ -62,7 +64,9 @@ const DatepickerContext = createContext<DatepickerStore>({
     displayFormat: "YYYY-MM-DD",
     minDate: null,
     maxDate: null,
-    disabledDates: null
+    disabledDates: null,
+    inputId: undefined,
+    inputName: undefined
 });
 
 export default DatepickerContext;