Add inputMode to DateInput

Author: Tomdango

src/components/date-input/__tests__/__snapshots__/DateInput.test.tsx.snap

@@ -19,6 +19,7 @@ exports[`DateInput matches snapshot 1`] = `
       >
         <Component>
           <IndividualDateInput
+            inputMode="numeric"
             inputType="day"
             pattern="[0-9]*"
             type="number"
@@ -52,6 +53,7 @@ exports[`DateInput matches snapshot 1`] = `
                   aria-labelledby="testInput-day--label"
                   className="nhsuk-input nhsuk-date-input__input nhsuk-input--width-2"
                   id="testInput-day"
+                  inputMode="numeric"
                   name="testInput-day"
                   onChange={[Function]}
                   pattern="[0-9]*"
@@ -63,6 +65,7 @@ exports[`DateInput matches snapshot 1`] = `
         </Component>
         <Component>
           <IndividualDateInput
+            inputMode="numeric"
             inputType="month"
             pattern="[0-9]*"
             type="number"
@@ -96,6 +99,7 @@ exports[`DateInput matches snapshot 1`] = `
                   aria-labelledby="testInput-month--label"
                   className="nhsuk-input nhsuk-date-input__input nhsuk-input--width-2"
                   id="testInput-month"
+                  inputMode="numeric"
                   name="testInput-month"
                   onChange={[Function]}
                   pattern="[0-9]*"
@@ -107,6 +111,7 @@ exports[`DateInput matches snapshot 1`] = `
         </Component>
         <Component>
           <IndividualDateInput
+            inputMode="numeric"
             inputType="year"
             pattern="[0-9]*"
             type="number"
@@ -140,6 +145,7 @@ exports[`DateInput matches snapshot 1`] = `
                   aria-labelledby="testInput-year--label"
                   className="nhsuk-input nhsuk-date-input__input nhsuk-input--width-4"
                   id="testInput-year"
+                  inputMode="numeric"
                   name="testInput-year"
                   onChange={[Function]}
                   pattern="[0-9]*"

src/components/date-input/components/IndividualDateInputs.tsx

@@ -45,7 +45,8 @@ const IndividualDateInput: React.FC<IndividualDateInputProps> = ({
   const inputID = id || `${ctxId}-${inputType}`;
   const inputName = name || `${ctxName}-${inputType}`;
   const inputValue = value !== undefined ? value : ctxValue?.[inputType];
-  const inputDefaultValue = defaultValue !== undefined ? defaultValue : ctxDefaultValue?.[inputType];
+  const inputDefaultValue =
+    defaultValue !== undefined ? defaultValue : ctxDefaultValue?.[inputType];
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     e.persist();
@@ -95,6 +96,7 @@ const IndividualDateInput: React.FC<IndividualDateInputProps> = ({
 
 IndividualDateInput.defaultProps = {
   pattern: '[0-9]*',
+  inputMode: 'numeric',
   type: 'number',
 };