Merge branch 'GREG-47-dates' into 'master'

Add dateinput component

See merge request !58

frontend/package.json

@@ -12,10 +12,12 @@
     "@types/react": "^17.0.20",
     "@types/react-dom": "^17.0.9",
     "@types/styled-components": "^5.1.14",
+    "date-fns": "^2.24.0",
     "http-proxy-middleware": "^2.0.1",
     "i18next": "^20.6.0",
     "i18next-http-backend": "^1.3.1",
     "react": "^17.0.2",
+    "react-datepicker": "^4.2.1",
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
     "react-hook-form": "^7.15.3",
@@ -58,6 +60,7 @@
     ]
   },
   "devDependencies": {
+    "@types/react-datepicker": "^4.1.7",
     "@types/react-helmet": "^6.1.2",
     "@types/react-router-dom": "^5.1.8",
     "@typescript-eslint/eslint-plugin": "^4.31.1",

frontend/src/components/dateinput/index.tsx

+import React, { useState } from 'react'
+import DatePicker, { registerLocale } from 'react-datepicker'
+import nb from 'date-fns/locale/nb'
+import nn from 'date-fns/locale/nn'
+import { addDays } from 'date-fns'
+import { useTranslation } from 'react-i18next'
+import 'react-datepicker/dist/react-datepicker.css'
+
+registerLocale('nb', nb)
+registerLocale('nn', nn)
+// CSS Modules, react-datepicker-cssmodules.css
+// import 'react-datepicker/dist/react-datepicker-cssmodules.css';
+
+const DateInput = () => {
+  const [startDate, setStartDate] = useState(new Date())
+  const { i18n } = useTranslation()
+
+  return (
+    <DatePicker
+      dateFormat="yyyy-MM-dd"
+      locale={i18n.language}
+      selected={startDate}
+      minDate={startDate}
+      maxDate={addDays(new Date(), 365)}
+      onChange={(date: any) => setStartDate(date)}
+    />
+  )
+}
+
+export default DateInput

frontend/src/routes/frontpage/index.tsx

 import React, { useState } from 'react'
 
+import DateInput from 'components/dateinput'
 import Page from 'components/page'
 import { appTimezone, appVersion, appTheme } from 'appConfig'
 import { Fnr, Form, Select, Input } from 'components/form'
@@ -29,6 +30,7 @@ export default function FrontPage() {
 
   return (
     <Page header="Greg main page">
+      <DateInput />
       <Form onSubmit={() => {}}>
         <Input name="firstName" />
         <Input name="lastName" />