diff --git a/package.json b/package.json
index fe89c7650..64c77128c 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,6 @@
"@babel/polyfill": "^7.4.0",
"@babel/runtime": "^7.3.4",
"classnames": "^2.2.5",
- "cleave.js": "^1.5.3",
"color-convert": "^1.9.2",
"core-js": "^3.2.1",
"focus-trap-react": "^3.1.2",
diff --git a/source/components/conversation/DateInput.js b/source/components/conversation/DateInput.js
deleted file mode 100644
index 96111e76f..000000000
--- a/source/components/conversation/DateInput.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import FormattedInput from 'cleave.js/react'
-import withColours from 'Components/utils/withColours'
-import { compose } from 'ramda'
-import React, { useCallback } from 'react'
-import { useTranslation } from 'react-i18next'
-import { debounce } from '../../utils'
-import { FormDecorator } from './FormDecorator'
-import InputSuggestions from './InputSuggestions'
-import SendButton from './SendButton'
-
-// TODO: fusionner Input.js et CurrencyInput.js
-export default compose(
- FormDecorator('input'),
- withColours
-)(function Input({
- suggestions,
- setFormValue,
- submit,
- dottedName,
- value,
- colours,
- unit
-}) {
- const debouncedSetFormValue = useCallback(debounce(750, setFormValue), [])
- const { language } = useTranslation().i18n
-
- return (
- <>
-
- {
- setFormValue(value)
- }}
- onSecondClick={() => submit('suggestion')}
- />
-
-
-
- {
- debouncedSetFormValue(value)
- }}
- value={value}
- autoComplete="off"
- />
-
-
-
-
- )
-})
diff --git a/source/components/conversation/DateInput.tsx b/source/components/conversation/DateInput.tsx
new file mode 100644
index 000000000..12f81c0fa
--- /dev/null
+++ b/source/components/conversation/DateInput.tsx
@@ -0,0 +1,129 @@
+import { FormDecorator } from 'Components/conversation/FormDecorator'
+import { normalizeDate, normalizeDateString } from 'Engine/date'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import styled, { css } from 'styled-components'
+import InputSuggestions from './InputSuggestions'
+import SendButton from './SendButton'
+
+const DateField = styled.input`
+ border: none;
+ text-align: center;
+ color: inherit;
+ font-size: inherit;
+ margin: 0 0.1rem;
+ padding: 0;
+ font-style: inherit;
+ ${({ placeholder = '' }) => css`
+ width: ${placeholder.length * 0.78}rem;
+ `}
+`
+
+export default FormDecorator('input')(function DateInput({
+ suggestions,
+ setFormValue,
+ submit,
+ value
+}) {
+ const { language } = useTranslation().i18n
+
+ // Refs for focus handling
+ let monthInput = React.createRef()
+ let yearInput = React.createRef()
+
+ const [date, setDate] = useState({ day: '', month: '', year: '' })
+
+ const handleDateChange = useCallback(
+ newDate => setDate(oldDate => ({ ...oldDate, ...newDate })),
+ [setDate]
+ )
+
+ const normalizedDate = useMemo(() => {
+ if (!date.year || +date.year < 1700) {
+ return false
+ }
+ try {
+ return normalizeDate(+date.year, +date.month || 1, +date.day || 1)
+ } catch (e) {
+ return false
+ }
+ }, [date])
+
+ // If date change, and is valid, set form value
+ useEffect(() => {
+ if (!normalizedDate) {
+ return
+ }
+ setFormValue(normalizedDate)
+ }, [normalizedDate])
+
+ // If value change, replace state
+ useEffect(() => {
+ if (!value) {
+ return
+ }
+ const [day, month, year] = value?.split('/')
+ setDate({ day, month, year })
+ }, [value, setDate])
+
+ return (
+ <>
+
+ {
+ setFormValue(normalizeDateString(value as string))
+ }}
+ onSecondClick={() => submit('suggestion')}
+ />
+
+
+
+
+ {
+ if (+value > 31) {
+ return
+ }
+ if (value.length == 2) {
+ monthInput.current.select()
+ }
+ handleDateChange({ day: value })
+ }}
+ value={date.day}
+ />
+ /
+ {
+ if (+value > 12) {
+ return
+ }
+ if (value.length == 2) {
+ yearInput.current.select()
+ }
+ handleDateChange({ month: value })
+ }}
+ value={date.month}
+ />
+ /
+ {
+ handleDateChange({ year: value })
+ }}
+ value={date.year}
+ />
+
+
+