Skip to content
Snippets Groups Projects
Verified Commit bf1baa09 authored by Andreas Ellewsen's avatar Andreas Ellewsen
Browse files

Update dateinput component

- Language is no longer a prop
- Dateformat chagned to ISO 8601
- set minDate and maxDate range to between today and 1 year from now
parent 643c05f2
No related branches found
No related tags found
1 merge request!58Add dateinput component
Pipeline #93456 passed
import React, { useState } from "react" import React, { useState } from "react"
import DatePicker, { registerLocale } from "react-datepicker" import DatePicker, { registerLocale } from "react-datepicker"
import nb from 'date-fns/locale/nb' import nb from 'date-fns/locale/nb'
import { addDays } from "date-fns";
import { useTranslation } from 'react-i18next'
import "react-datepicker/dist/react-datepicker.css" import "react-datepicker/dist/react-datepicker.css"
registerLocale("nb", nb) registerLocale("nb", nb)
// CSS Modules, react-datepicker-cssmodules.css // CSS Modules, react-datepicker-cssmodules.css
// import 'react-datepicker/dist/react-datepicker-cssmodules.css'; // import 'react-datepicker/dist/react-datepicker-cssmodules.css';
interface DateInputProps { interface DateInputProps {
lang: string
} }
const DateInput = (props: DateInputProps) => { const DateInput = (props: DateInputProps) => {
const [startDate, setStartDate] = useState(new Date()) const [startDate, setStartDate] = useState(new Date())
const { i18n } = useTranslation()
return ( return (
<DatePicker <DatePicker
dateFormat={props.lang === 'en' ? 'MM/dd/yyyy' : 'dd.MM.yyyy'} dateFormat='yyyy-MM-dd'
locale={props.lang} locale={i18n.language}
selected={startDate} selected={startDate}
minDate={startDate}
maxDate={addDays(new Date(), 365)}
onChange={(date: any) => setStartDate(date)} onChange={(date: any) => setStartDate(date)}
/> />
) )
......
...@@ -28,7 +28,7 @@ export default function FrontPage() { ...@@ -28,7 +28,7 @@ export default function FrontPage() {
} }
return ( return (
<Page header="Greg main page"> <Page header="Greg main page">
<DateInput lang={i18n.language} /> <DateInput />
<br /> <br />
<button onClick={() => i18n.language === 'en' ? i18n.changeLanguage('nb') : i18n.changeLanguage('en')}> <button onClick={() => i18n.language === 'en' ? i18n.changeLanguage('nb') : i18n.changeLanguage('en')}>
{i18n.language === 'en' ? 'Norwegian' : 'English'} {i18n.language === 'en' ? 'Norwegian' : 'English'}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment