Add date and time support client-side

README.md

@@ -89,7 +89,7 @@ You can check a more complete example in the [example](https://github.com/franci
 - Right now there is no observability on errors when submitting a form. See this [comment on the code](https://github.com/francisconeves97/react-google-forms-hooks/blob/ca5018e578cfb0e230f9be58dfeee4117db28160/src/hooks/useGoogleForm.ts#L61-L65).
 - You can use the `submitToGoogleForm` export to create a server to handle form submissions. This way you can mitigate the CORS problem.
 - No support for multi page, sections, images and other Google Forms functionalities. However you can build your React form with multiple pages, by saving the `data` from `handleSubmit` and only `submitToGoogleForms` on the last page.
-- The list of supported inputs doesn't feature every input from Google Forms. Supported inputs: Short Answer, Long Answer, Checkbox, Radio, Dropdown, Linear, Radio Grid, Checkbox Grid
+- The list of supported inputs doesn't feature every input from Google Forms. Supported inputs: Short Answer, Long Answer, Date, Time, Checkbox, Radio, Dropdown, Linear, Radio Grid, Checkbox Grid
 - Because of CORS you have to run the `googleFormsToJson` script in build time.
 
 ## Contributing
@@ -126,4 +126,4 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
-This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

example/src/App.js

@@ -9,6 +9,8 @@ import CheckboxInput from './components/CheckboxInput'
 import RadioInput from './components/RadioInput'
 import ShortAnswerInput from './components/ShortAnswerInput'
 import LongAnswerInput from './components/LongAnswerInput'
+import DateInput from './components/DateInput'
+import TimeInput from "./components/TimeInput"
 import RadioGridInput from './components/RadioGridInput'
 import CheckboxGridInput from './components/CheckboxGridInput'
 import DropdownInput from './components/DropdownInput'
@@ -54,6 +56,12 @@ const Questions = () => {
           case 'LONG_ANSWER':
             questionInput = <LongAnswerInput id={id} />
             break
+          case 'DATE':
+            questionInput = <DateInput id={id} />
+            break
+          case 'TIMe':
+            questionInput = <TimeInput id={id} />
+            break
           case 'RADIO_GRID':
             questionInput = <RadioGridInput id={id} />
             break

example/src/components/DateInput.js

@@ -0,0 +1,13 @@
+import React from 'react'
+
+import { useDateInput } from 'react-google-forms-hooks'
+
+export default function DateInput({ id }) {
+  const { register } = useDateInput(id)
+
+  return (
+    <div>
+      <input type='date' {...register()} />
+    </div>
+  )
+}

example/src/components/TimeInput.js

@@ -0,0 +1,13 @@
+import React from 'react'
+
+import { useTimeInput } from 'react-google-forms-hooks'
+
+export default function TimeInput({ id }) {
+  const { register } = useTimeInput(id)
+
+  return (
+    <div>
+      <input type='time' {...register()} />
+    </div>
+  )
+}

src/hooks/index.ts

@@ -8,3 +8,5 @@ export * from './useCheckboxGridInput'
 export * from './useRadioGridInput'
 export * from './useDropdownInput'
 export * from './useLinearInput'
+export * from './useDateInput'
+export * from './useTimeInput'

src/hooks/useDateInput.ts

@@ -0,0 +1,6 @@
+import { UseTextFieldReturn } from '../types'
+import useTextInput from './utils/useTextInput'
+
+export const useDateInput = (id: string): UseTextFieldReturn => {
+  return useTextInput(id, 'DATE')
+}

src/hooks/useTimeInput.ts

@@ -0,0 +1,6 @@
+import { UseTextFieldReturn } from '../types'
+import useTextInput from './utils/useTextInput'
+
+export const useTimeInput = (id: string): UseTextFieldReturn => {
+  return useTextInput(id, 'TIME')
+}

src/hooks/utils/useTextInput.ts

@@ -6,7 +6,7 @@ import getFieldFromContext from './getFieldFromContext'
 
 export default (
   id: string,
-  fieldType: 'LONG_ANSWER' | 'SHORT_ANSWER'
+  fieldType: 'LONG_ANSWER' | 'SHORT_ANSWER' | 'DATE' | 'TIME',
 ): UseTextFieldReturn => {
   const context = useGoogleFormContext()
 

src/scripts/googleFormsToJson.ts

@@ -100,6 +100,9 @@ const parseFieldType = (rawField: Array<object>, fieldId: number) => {
   if (fieldId === 9) {
     return 'DATE'
   }
+  if (fieldId === 10) {
+    return 'TIME'
+  }
 
   return fieldTypes[fieldId]
 }
@@ -141,7 +144,9 @@ const parseField = (rawField: Array<any>): Field => {
 
   switch (field.type) {
     case 'SHORT_ANSWER':
-    case 'LONG_ANSWER': {
+    case 'LONG_ANSWER':
+    case 'DATE':
+    case 'TIME': {
       const fieldInfo = rawField[4][0]
       field.id = toString(fieldInfo[0])
       field.required = toBool(fieldInfo[2])
@@ -179,12 +184,6 @@ const parseField = (rawField: Array<any>): Field => {
       field.required = toBool(rawField[4][0][2])
       break
     }
-    case 'DATE': {
-      const fieldInfo = rawField[4][0]
-      field.id = toString(fieldInfo[0])
-      field.required = toBool(rawField[4][0][2])
-      break
-    }
   }
 
   return field

src/types/form.ts

@@ -14,11 +14,7 @@ export interface BaseField {
 }
 
 export interface TextField extends BaseField {
-  type: 'SHORT_ANSWER' | 'LONG_ANSWER'
-}
-
-export interface DateField extends BaseField {
-  type: 'DATE'
+  type: 'SHORT_ANSWER' | 'LONG_ANSWER' | 'DATE' | 'TIME'
 }
 
 export interface CustomOptionField extends BaseField {
@@ -59,7 +55,6 @@ export interface GridField extends BaseField {
 
 export type Field =
   | TextField
-  | DateField
   | CustomOptionField
   | DropdownField
   | GridField