jamespot-react-components 1.0.0

package/src/components/Form/Input/JRCFormDateTime/JRCFormDateTime.tsx

@@ -0,0 +1,1079 @@
+import * as React from 'react';
+import { Field, FieldArray } from 'redux-form';
+import { StyledDescription, JRCWritableFormInputProps } from '../JRCFormFieldRender';
+import FormLabel from '../../Common/FormLabel';
+import { ControlsProps, useControls } from '../ReduxFormControls';
+import { useIntl } from 'react-intl';
+import styled from 'styled-components';
+import moment from 'moment';
+import { ClickAwayListener } from '../../Common/ClickAwayListener';
+
+export type JRCFormDateTimeInputCustomProps = React.ComponentPropsWithoutRef<'input'>;
+
+export interface JRCFormDateTimeCustomMulti {
+    isMulti?: boolean;
+}
+
+export type JRCFormDateTimeCustomFieldProps = JRCFormDateTimeInputCustomProps &
+    ControlsProps &
+    JRCFormDateTimeCustomMulti;
+
+export interface JRCFormDateTimeCustomProps {
+    input?: any;
+    label?: string | JSX.Element;
+    htmlFor?: string;
+    description?: string;
+    range?: boolean;
+    isMulti?: boolean;
+    start?: string;
+    end?: string;
+    name?: string;
+    id?: string;
+}
+
+const Container = styled.div`
+    position: absolute;
+    max-width: 300px;
+    top: 32px;
+    padding: 0px 10px;
+    border: 1px solid #657786;
+    border-radius: 5px;
+    background-color: white;
+    z-index: 99;
+`;
+
+const DaysStyled = styled.div`
+    display: flex;
+    flex: 1;
+    flex-wrap: wrap;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+`;
+
+const DayStyled = styled.div`
+    width: calc(100% / 7);
+    display: flex;
+    font-size: 16;
+    color: black;
+    align-items: center;
+    justify-content: center;
+    padding: 8px 0px;
+    cursor: pointer;
+    &:hover {
+        background-color: #f5f8fa;
+    }
+`;
+
+const HeadingStyled = styled.div`
+    display: flex;
+    flex: 1;
+    width: 100%;
+    flex-direction: row;
+    justify-content: space-between;
+    alignitems: center;
+    padding: 15px;
+    border-top-right-radius: 12px;
+    border-top-left-radius: 12px;
+`;
+
+const HeadingDate = styled.span`
+    display: flex;
+    flexdirection: row;
+    flex: 1;
+`;
+
+const HeadingFormat = styled.span`
+    fontsize: 16;
+    color: #657786;
+    margin-right: 10px;
+    text-transform: capitalize;
+`;
+
+const Labels = styled.div`
+    width: calc(100% / 7);
+    display: flex;
+    font-size: 16;
+    color: black;
+    align-items: center;
+    justify-content: center;
+    padding: 8px 0px;
+`;
+
+const Label = styled.span`
+    font-size: 16px;
+`;
+
+const Arrow = styled.span`
+    font-size: 28px;
+    color: #aab8c2;
+    cursor: pointer;
+    &:hover {
+        color: #657786;
+    }
+`;
+
+const Bullet = styled.span`
+    font-size: 22px;
+    transform: translateY(2px);
+    color: #aab8c2;
+    padding-right: 8px;
+    padding-left: 8px;
+    cursor: pointer;
+    &:hover {
+        color: #657786;
+    }
+`;
+
+const EditDisplay = styled.div`
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+`;
+
+const ContainerSelect = styled.div`
+    position: relative;
+    display: flex;
+    flex: 1;
+    width: 100%;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+`;
+
+const HideSelect = styled.select`
+    width: 50%;
+    font-size: 0px;
+    margin: 15px 0px;
+    text-align: center;
+    text-align-last: center;
+    -moz-text-align-last: center;
+    border: 0px;
+    outline: 0px;
+    height: 30px;
+    border: 1px solid #e3e3e3;
+    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
+    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
+    -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
+    -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
+    -o-transition: border linear 0.2s, box-shadow linear 0.2s;
+    transition: border linear 0.2s, box-shadow linear 0.2s;
+    @-moz-document url-prefix() {
+        -moz-appearance: none;
+        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")
+            no-repeat center right;
+    }
+`;
+
+const SelectedMonth = styled.div`
+    padding: 5px 15px;
+    margin-right: 5px;
+    margin-bottom: 5px;
+    border-radius: 15px;
+    cursor: pointer;
+    &:hover {
+        background-color: #aab8c2 !important;
+    }
+`;
+
+const ContainerMonth = styled.div`
+    display: flex;
+    flex: 1;
+    flex-directyion: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    margin: 5px 0px;
+`;
+
+const DoubleDot = styled.span`
+    padding: 0px 1px;
+`;
+
+const ContainerHours = styled.div`
+    position: absolute;
+    transform: translate(0%, 0px);
+    -webkit-transform: translate(0%, 0px);
+    -ms-transform: translate(0%, 0px);
+`;
+
+const InputSchedule = styled.input`
+    width: 35px;
+    margin: 0px !important;
+    padding: 0px !important;
+    text-align: center;
+    border: none !important;
+    box-shadow: none !important;
+    -moz-appearance: textfield;
+    &::-webkit-inner-spin-button {
+        -webkit-appearance: none !important;
+        margin: 0 !important;
+    }
+`;
+
+const InputDate = styled.div`
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 6px 10px;
+    max-width: 300px;
+    width: 100%;
+    background-color: #fff;
+    border-radius: 4px;
+    border: 1px solid #e3e3e3;
+    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
+    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
+    -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
+    -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
+    -o-transition: border linear 0.2s, box-shadow linear 0.2s;
+    transition: border linear 0.2s, box-shadow linear 0.2s;
+`;
+
+const SpanDate = styled.span`
+    color: #657786;
+`;
+
+const IconDate = styled.div`
+    height: 18px;
+    cursor: pointer;
+    margin-left: 8px;
+`;
+
+const InputMultiDateTime = styled.div`
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-start;
+    padding: 6px 10px;
+    background-color: #fff;
+    border-radius: 4px;
+    border: 1px solid #e3e3e3;
+    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
+    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
+    -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
+    -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
+    -o-transition: border linear 0.2s, box-shadow linear 0.2s;
+    transition: border linear 0.2s, box-shadow linear 0.2s;
+`;
+
+const MultiDateTime = styled.div`
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: baseline;
+`;
+
+const IconPlus = styled.div`
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: 7px 11px;
+    background-color: #e3e3e3;
+    border-radius: 4px;
+    cursor: pointer;
+    &:hover {
+        background-color: #aab8c2;
+    }
+`;
+
+const IconCross = styled.div`
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    height: 25px;
+    width: 25px;
+    padding-top: 2px;
+    padding-right: 1px;
+    margin: 3px 2px;
+    background-color: #e3e3e3;
+    border-radius: 50%;
+    cursor: pointer;
+    &:hover {
+        background-color: #aab8c2;
+    }
+`;
+
+const ContainerMulti = styled.div`
+    display: flex;
+    flex-direction: row;
+`;
+
+const Minute = ({ input, selectedMinute, setSelectedMinute, selectedHour, startDate, endDate, ranged }: any) => {
+    const handleChangeMinute = (event: any) => {
+        if (event.target.value >= 0 && event.target.value <= 59) {
+            let m = '';
+            let value = event.target.value;
+
+            if (event.target.value.length > 2) {
+                value = event.target.value.slice(-2);
+            }
+
+            if (value === '0') {
+                m = '00';
+            } else if (value === '1') {
+                m = '01';
+            } else if (value === '2') {
+                m = '02';
+            } else if (value === '3') {
+                m = '03';
+            } else if (value === '4') {
+                m = '04';
+            } else if (value === '5') {
+                m = '05';
+            } else if (value === '6') {
+                m = '06';
+            } else if (value === '7') {
+                m = '07';
+            } else if (value === '8') {
+                m = '08';
+            } else if (value === '9') {
+                m = '09';
+            }
+
+            setSelectedMinute(value);
+            if (input !== undefined) {
+                !ranged
+                    ? input.onChange(`${startDate.format('YYYY-MM-DD')}T${selectedHour}:${value}`)
+                    : input.onChange([
+                          `${startDate.format('YYYY-MM-DD')}T${selectedHour}:${value}`,
+                          `${endDate.format('YYYY-MM-DD')}T${selectedHour}:${value}`,
+                      ]);
+            }
+
+            if (m !== '') {
+                setSelectedMinute(m);
+                if (input !== undefined) {
+                    !ranged
+                        ? input.onChange(`${startDate.format('YYYY-MM-DD')}T${selectedHour}:${m}`)
+                        : input.onChange([
+                              `${startDate.format('YYYY-MM-DD')}T${selectedHour}:${m}`,
+                              `${endDate.format('YYYY-MM-DD')}T${selectedHour}:${m}`,
+                          ]);
+                }
+            }
+        } else if (event.target.value > 59) {
+            setSelectedMinute('59');
+            if (input !== undefined) {
+                !ranged
+                    ? input.onChange(`${startDate.format('YYYY-MM-DD')}T${selectedHour}:59`)
+                    : input.onChange([
+                          `${startDate.format('YYYY-MM-DD')}T${selectedHour}:59`,
+                          `${endDate.format('YYYY-MM-DD')}T${selectedHour}:59`,
+                      ]);
+            }
+        } else {
+            setSelectedMinute('00');
+            if (input !== undefined) {
+                !ranged
+                    ? input.onChange(`${startDate.format('YYYY-MM-DD')}T${selectedHour}:00`)
+                    : input.onChange([
+                          `${startDate.format('YYYY-MM-DD')}T${selectedHour}:00`,
+                          `${endDate.format('YYYY-MM-DD')}T${selectedHour}:00`,
+                      ]);
+            }
+        }
+    };
+
+    return (
+        <InputSchedule
+            key="minute"
+            name="minute"
+            type="number"
+            value={selectedMinute}
+            onChange={handleChangeMinute}
+            min="0"
+            max="59"
+        />
+    );
+};
+
+const Hour = ({
+    input,
+    setSelectedHours,
+    setSelectedHour,
+    selectedMinute,
+    selectedHour,
+    startDate,
+    endDate,
+    ranged,
+}: any) => {
+    const handleChangeHour = (event: any) => {
+        if (event.target.value >= 0 && event.target.value <= 23) {
+            let h = '';
+            let value = event.target.value;
+
+            if (event.target.value.length > 2) {
+                value = event.target.value.slice(-2);
+            }
+
+            if (value === '0') {
+                h = '00';
+            } else if (value === '1') {
+                h = '01';
+            } else if (value === '2') {
+                h = '02';
+            } else if (value === '3') {
+                h = '03';
+            } else if (value === '4') {
+                h = '04';
+            } else if (value === '5') {
+                h = '05';
+            } else if (value === '6') {
+                h = '06';
+            } else if (value === '7') {
+                h = '07';
+            } else if (value === '8') {
+                h = '08';
+            } else if (value === '9') {
+                h = '09';
+            }
+
+            setSelectedHours(`${value}:00`);
+            setSelectedHour(value);
+            if (input !== undefined) {
+                !ranged
+                    ? input.onChange(`${startDate.format('YYYY-MM-DD')}T${value}:${selectedMinute}`)
+                    : input.onChange([
+                          `${startDate.format('YYYY-MM-DD')}T${value}:${selectedMinute}`,
+                          `${endDate.format('YYYY-MM-DD')}T${value}:${selectedMinute}`,
+                      ]);
+            }
+
+            if (h !== '') {
+                setSelectedHours(`${h}:00`);
+                setSelectedHour(h);
+                if (input !== undefined) {
+                    !ranged
+                        ? input.onChange(`${startDate.format('YYYY-MM-DD')}T${selectedHour}:${h}`)
+                        : input.onChange([
+                              `${startDate.format('YYYY-MM-DD')}T${selectedHour}:${h}`,
+                              `${endDate.format('YYYY-MM-DD')}T${selectedHour}:${h}`,
+                          ]);
+                }
+            }
+        } else if (event.target.value > 23) {
+            setSelectedHours(`23:${selectedMinute}`);
+            setSelectedHour(`23`);
+            if (input !== undefined) {
+                !ranged
+                    ? input.onChange(`${startDate.format('YYYY-MM-DD')}T23:${selectedMinute}`)
+                    : input.onChange([
+                          `${startDate.format('YYYY-MM-DD')}T23:${selectedMinute}`,
+                          `${endDate.format('YYYY-MM-DD')}T23:${selectedMinute}`,
+                      ]);
+            }
+        } else {
+            setSelectedHours(`00:${selectedMinute}`);
+            setSelectedHour(`00`);
+            if (input !== undefined) {
+                !ranged
+                    ? input.onChange(`${startDate.format('YYYY-MM-DD')}T23:${selectedMinute}`)
+                    : input.onChange([
+                          `${startDate.format('YYYY-MM-DD')}T23:${selectedMinute}`,
+                          `${endDate.format('YYYY-MM-DD')}T00:${selectedMinute}`,
+                      ]);
+            }
+        }
+    };
+
+    return (
+        <InputSchedule
+            key="hour"
+            name="hour"
+            type="number"
+            value={selectedHour}
+            onChange={handleChangeHour}
+            min="0"
+            max="23"
+        />
+    );
+};
+
+const Hours = ({
+    input,
+    setSelectedHours,
+    setSelectedHour,
+    setSelectedMinute,
+    selectedHours,
+    startDate,
+    endDate,
+    ranged,
+}: any) => {
+    const hours = new Array(24).fill(0).reduce((acc, cur, index) => {
+        return acc.concat([
+            moment({ hour: index }).format('HH:mm'),
+            moment({ hour: index, minute: 30 }).format('HH:mm'),
+        ]);
+    }, []);
+
+    const handleChange = (event: any) => {
+        setSelectedHours(event.target.value);
+        setSelectedHour(event.target.value.charAt(0) + event.target.value.charAt(1));
+        setSelectedMinute(event.target.value.charAt(3) + event.target.value.charAt(4));
+        if (input !== undefined) {
+            !ranged
+                ? input.onChange(`${startDate.format('YYYY-MM-DD')}T${event.target.value}`)
+                : input.onChange([
+                      `${startDate.format('YYYY-MM-DD')}T${event.target.value}`,
+                      `${endDate.format('YYYY-MM-DD')}T${event.target.value}`,
+                  ]);
+        }
+    };
+
+    return (
+        <HideSelect value={selectedHours} onChange={handleChange}>
+            {hours.map((ho: string, i: number) => (
+                <option key={`${i}_${ho}`} value={ho}>
+                    {ho}
+                </option>
+            ))}
+        </HideSelect>
+    );
+};
+
+const SelectMonth = ({ m, selectedMonth, changeMonth, i }: any) => {
+    let className: any = {};
+
+    if (m == selectedMonth) {
+        className = {
+            backgroundColor: '#657786',
+            color: 'white',
+            fontWeight: '400',
+        };
+    } else {
+        className = {
+            backgroundColor: '#E1E8ED',
+        };
+    }
+
+    return (
+        <SelectedMonth
+            style={{ ...className }}
+            onClick={() => {
+                moment().set('month', i);
+                changeMonth(i);
+            }}>
+            {m}
+        </SelectedMonth>
+    );
+};
+
+const Months = ({ selectedMonth, changeMonth, switchs }: any) => (
+    <ContainerMonth style={switchs ? { display: 'none' } : { display: 'flex' }}>
+        {moment.months().map((m: string, i: number) => (
+            <SelectMonth key={i} m={m} i={i} selectedMonth={selectedMonth} changeMonth={changeMonth} />
+        ))}
+    </ContainerMonth>
+);
+
+const HeadingMonth = ({ date, changeMonth, switchs, setSwitchs }: any) => (
+    <HeadingStyled style={switchs ? { display: 'flex' } : { display: 'none' }}>
+        <HeadingDate>
+            <HeadingFormat>{date.format('MMMM')}</HeadingFormat>
+            <HeadingFormat>{date.format('YYYY')}</HeadingFormat>
+        </HeadingDate>
+
+        <EditDisplay>
+            <Arrow onClick={() => changeMonth(date.month() - 1)}>&lsaquo;</Arrow>
+            <Bullet onClick={() => setSwitchs(!switchs)}>&#8226;</Bullet>
+            <Arrow onClick={() => changeMonth(date.month() + 1)}>&rsaquo;</Arrow>
+        </EditDisplay>
+    </HeadingStyled>
+);
+
+const HeadingYear = ({ date, changeYear, switchs, setSwitchs }: any) => (
+    <HeadingStyled style={switchs ? { display: 'none' } : { display: 'flex' }}>
+        <HeadingDate>
+            <HeadingFormat>{date.format('YYYY')}</HeadingFormat>
+        </HeadingDate>
+
+        <EditDisplay>
+            <Arrow onClick={() => changeYear(date.year() - 1)}>&lsaquo;</Arrow>
+            <Bullet onClick={() => setSwitchs(!switchs)}>&#8226;</Bullet>
+            <Arrow onClick={() => changeYear(date.year() + 1)}>&rsaquo;</Arrow>
+        </EditDisplay>
+    </HeadingStyled>
+);
+
+const DateTime = ({ input, range, start, end, isMulti, name }: JRCFormDateTimeCustomProps) => {
+    const ranged = range || false;
+    moment.locale(window.navigator.language);
+    const [display, setDisplay] = React.useState(false);
+    const [switchs, setSwitchs] = React.useState(true);
+    const [selectedHours, setSelectedHours] = React.useState(
+        typeof input.value === 'string' && input.value !== '' ? input.value.slice(-5) : `00:00`,
+    );
+    const [selectedHour, setSelectedHour] = React.useState(
+        typeof input.value === 'string' && input.value !== '' ? input.value.slice(11, 13) : `00`,
+    );
+    const [selectedMinute, setSelectedMinute] = React.useState(
+        typeof input.value === 'string' && input.value !== '' ? input.value.slice(-2) : `00`,
+    );
+    const [selectedMonth, setSelectedMonth] = React.useState(
+        typeof input.value === 'string' && input.value !== ''
+            ? moment()
+                  .month(parseInt(input.value.slice(6, 7)) - 1)
+                  .format('MMMM')
+            : `MM`,
+    );
+    const inputDate =
+        typeof input.value === 'string' && input.value !== '' && moment(input.value.slice(0, 10)).isValid()
+            ? moment(input.value.slice(0, 10))
+            : undefined;
+    const [date, setDate] = React.useState(inputDate ? inputDate : moment());
+    //const current = moment();
+    const s = start ? moment(start).isValid() : false;
+    const e = end ? moment(end).isValid() : false;
+    const [startDate, setStartDate] = React.useState(s ? moment(start) : null);
+    const [endDate, setEndDate] = React.useState(e ? moment(end) : null);
+
+    const changeDisplay = () => {
+        setDisplay(!display);
+    };
+
+    const resetDate = () => {
+        setDate(moment());
+    };
+
+    const changeYear = (year: number) => {
+        const d = date.clone();
+        d.year(year);
+        setDate(d);
+    };
+
+    const changeMonth = (month: number) => {
+        const d = date.clone();
+        d.month(month);
+        setDate(d);
+        const newMonth = d.format('MMMM');
+        setSelectedMonth(newMonth);
+    };
+
+    const changeDate = (date: any) => {
+        let start = null;
+        let end = null;
+        if (ranged) {
+            // FIXME TYPESCRIPT-STRICT
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            let start = startDate.clone();
+            // FIXME TYPESCRIPT-STRICT
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            let end = endDate.clone();
+            if (ranged) {
+                if (startDate === null || date.isBefore(startDate, 'day') || !startDate.isSame(endDate, 'day')) {
+                    start = moment(date);
+                    end = moment(date);
+                } else if (date.isSame(startDate, 'day') && date.isSame(endDate, 'day')) {
+                    // FIXME TYPESCRIPT-STRICT
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-ignore
+                    start = null;
+                    // FIXME TYPESCRIPT-STRICT
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-ignore
+                    end = null;
+                } else if (date.isAfter(startDate, 'day')) {
+                    end = moment(date);
+                }
+            } else {
+                start = moment(date);
+                end = moment(date);
+            }
+
+            setStartDate(start);
+            setEndDate(end);
+        } else {
+            start = date.clone();
+            end = date.clone();
+        }
+        if (input !== undefined) {
+            !ranged
+                ? input.onChange(`${start.format('YYYY-MM-DD')}T${selectedHours}`)
+                : input.onChange([
+                      `${start.format('YYYY-MM-DD')}T${selectedHours}`,
+                      `${end.format('YYYY-MM-DD')}T${selectedHours}`,
+                  ]);
+            setDate(date);
+        }
+    };
+
+    const Day = ({ currentDate, date, startDate, endDate, onClick }: any) => {
+        let className: any = {};
+
+        if (moment().isSame(date, 'day')) {
+            className = {
+                ...className,
+                fontWeight: 'normal',
+            };
+        }
+
+        if (date.isSame(startDate, 'day')) {
+            className = {
+                ...className,
+                backgroundColor: '#AAB8C2',
+                borderTopLeftRadius: '12px',
+                borderBottomLeftRadius: '12px',
+                fontWeight: 'normal',
+                color: 'white',
+            };
+        }
+
+        if (date.isBetween(startDate, endDate, 'day')) {
+            className = {
+                ...className,
+                backgroundColor: '#E1E8ED',
+                fontWeight: 'normal',
+                color: 'white',
+            };
+        }
+
+        if (date.isSame(endDate, 'day')) {
+            className = {
+                ...className,
+                backgroundColor: '#AAB8C2',
+                borderBottomRightRadius: '12px',
+                borderTopRightRadius: '12px',
+                fontWeight: 'normal',
+                color: 'white',
+            };
+        }
+
+        if (!date.isSame(currentDate, 'month')) {
+            className = {
+                ...className,
+                fontWeight: 'normal',
+                color: 'rgba(0, 0, 0, 0.2)',
+            };
+        }
+
+        if (date.isSame(currentDate, 'day') && date.isSame(currentDate, 'month')) {
+            className = {
+                ...className,
+                fontWeight: '900',
+                color: 'black',
+            };
+            if (startDate == null && endDate == null)
+                className = {
+                    ...className,
+                    backgroundColor: '#E1E8ED',
+                    borderRadius: '12px',
+                };
+        }
+
+        return (
+            <DayStyled style={{ ...className }} onClick={() => onClick(date)}>
+                <span
+                    style={{ ...className }}
+                    // currentDate={date}
+                >
+                    {date.date()}
+                </span>
+            </DayStyled>
+        );
+    };
+
+    const Days = ({ date, startDate, endDate, onClick }: any) => {
+        const thisDate = moment(date);
+        const daysInMonth = moment(date).daysInMonth();
+        const firstDayDate = moment(date).startOf('month');
+        const previousMonth = moment(date).subtract(1, 'month');
+        const previousMonthDays = previousMonth.daysInMonth();
+        const nextsMonth = moment(date).add(1, 'month');
+        const days = [];
+        const labels = [];
+
+        for (let i = 1; i <= 7; i++) {
+            labels.push(
+                <Labels key={i}>
+                    <Label>{moment().day(i).format('dd')}</Label>
+                </Labels>,
+            );
+        }
+
+        for (let i = firstDayDate.day(); i > 1; i--) {
+            previousMonth.date(previousMonthDays - i + 2);
+
+            days.push(
+                <Day
+                    key={moment(previousMonth).format('DD MM YYYY')}
+                    onClick={(date: any) => onClick(date)}
+                    currentDate={date}
+                    date={moment(previousMonth)}
+                    startDate={startDate}
+                    endDate={endDate}
+                />,
+            );
+        }
+
+        for (let i = 1; i <= daysInMonth; i++) {
+            thisDate.date(i);
+
+            days.push(
+                <Day
+                    key={moment(thisDate).format('DD MM YYYY')}
+                    onClick={(date: any) => onClick(date)}
+                    currentDate={date}
+                    date={moment(thisDate)}
+                    startDate={startDate}
+                    endDate={endDate}
+                />,
+            );
+        }
+
+        const daysCount = days.length;
+        for (let i = 1; i <= 42 - daysCount; i++) {
+            nextsMonth.date(i);
+            days.push(
+                <Day
+                    key={moment(nextsMonth).format('DD MM YYYY')}
+                    onClick={(date: any) => onClick(date)}
+                    currentDate={date}
+                    date={moment(nextsMonth)}
+                    startDate={startDate}
+                    endDate={endDate}
+                />,
+            );
+        }
+        return (
+            <DaysStyled style={switchs ? { display: 'flex' } : { display: 'none' }}>
+                {labels.concat()}
+                {days.concat()}
+            </DaysStyled>
+        );
+    };
+
+    const handleClickAway = () => {
+        setDisplay(false);
+    };
+
+    const className: any = {
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'flex-start',
+        alignItems: 'flex-start',
+        position: 'relative',
+    };
+    return (
+        <ClickAwayListener onClickAway={handleClickAway} style={className} key={`ClickAwayListener-${name}`}>
+            <InputDate>
+                <SpanDate>
+                    {inputDate ? date.format('YYYY-MM-DD') : `YYYY-MM-DD`} {selectedHour}:{selectedMinute}
+                </SpanDate>
+                <IconDate onClick={changeDisplay}>
+                    <svg
+                        version="1.1"
+                        id="Capa_3"
+                        xmlns="http://www.w3.org/2000/svg"
+                        x="0px"
+                        y="0px"
+                        width="18px"
+                        height="18px"
+                        viewBox="0 0 36.447 36.447"
+                        enableBackground="new 0 0 36.447 36.447">
+                        <g>
+                            <g>
+                                <path
+                                    d="M30.224,3.948h-1.098V2.75c0-1.517-1.197-2.75-2.67-2.75c-1.474,0-2.67,1.233-2.67,2.75v1.197h-2.74V2.75
+                  c0-1.517-1.197-2.75-2.67-2.75c-1.473,0-2.67,1.233-2.67,2.75v1.197h-2.74V2.75c0-1.517-1.197-2.75-2.67-2.75
+                  c-1.473,0-2.67,1.233-2.67,2.75v1.197H6.224c-2.343,0-4.25,1.907-4.25,4.25v24c0,2.343,1.907,4.25,4.25,4.25h24
+                  c2.344,0,4.25-1.907,4.25-4.25v-24C34.474,5.855,32.567,3.948,30.224,3.948z M25.286,2.75c0-0.689,0.525-1.25,1.17-1.25
+                  c0.646,0,1.17,0.561,1.17,1.25v4.896c0,0.689-0.524,1.25-1.17,1.25c-0.645,0-1.17-0.561-1.17-1.25V2.75z M17.206,2.75
+                  c0-0.689,0.525-1.25,1.17-1.25s1.17,0.561,1.17,1.25v4.896c0,0.689-0.525,1.25-1.17,1.25s-1.17-0.561-1.17-1.25V2.75z M9.125,2.75
+                  c0-0.689,0.525-1.25,1.17-1.25s1.17,0.561,1.17,1.25v4.896c0,0.689-0.525,1.25-1.17,1.25s-1.17-0.561-1.17-1.25V2.75z
+                  M31.974,32.198c0,0.965-0.785,1.75-1.75,1.75h-24c-0.965,0-1.75-0.785-1.75-1.75v-22h27.5V32.198z"
+                                />
+                                <rect x="6.724" y="14.626" width="4.595" height="4.089" />
+                                <rect x="12.857" y="14.626" width="4.596" height="4.089" />
+                                <rect x="18.995" y="14.626" width="4.595" height="4.089" />
+                                <rect x="25.128" y="14.626" width="4.596" height="4.089" />
+                                <rect x="6.724" y="20.084" width="4.595" height="4.086" />
+                                <rect x="12.857" y="20.084" width="4.596" height="4.086" />
+                                <rect x="18.995" y="20.084" width="4.595" height="4.086" />
+                                <rect x="25.128" y="20.084" width="4.596" height="4.086" />
+                                <rect x="6.724" y="25.54" width="4.595" height="4.086" />
+                                <rect x="12.857" y="25.54" width="4.596" height="4.086" />
+                                <rect x="18.995" y="25.54" width="4.595" height="4.086" />
+                                <rect x="25.128" y="25.54" width="4.596" height="4.086" />
+                            </g>
+                        </g>
+                    </svg>
+                </IconDate>
+            </InputDate>
+            {display && (
+                <Container style={isMulti ? { minWidth: '300px' } : { maxWidth: '300px' }}>
+                    <div>
+                        <HeadingMonth
+                            switchs={switchs}
+                            setSwitchs={setSwitchs}
+                            date={date}
+                            changeMonth={(month: any) => changeMonth(month)}
+                            resetDate={() => resetDate()}
+                        />
+                        <Days
+                            onClick={(date: any) => changeDate(date)}
+                            date={date}
+                            startDate={startDate}
+                            endDate={endDate}
+                        />
+
+                        <HeadingYear
+                            changeYear={changeYear}
+                            switchs={switchs}
+                            setSwitchs={setSwitchs}
+                            date={date}
+                            resetDate={() => resetDate()}
+                        />
+                        <Months selectedMonth={selectedMonth} changeMonth={changeMonth} switchs={switchs} />
+                    </div>
+
+                    <ContainerSelect>
+                        <ContainerHours>
+                            <Hour
+                                input={input}
+                                setSelectedHour={setSelectedHour}
+                                setSelectedHours={setSelectedHours}
+                                selectedMinute={selectedMinute}
+                                selectedHour={selectedHour}
+                                startDate={startDate}
+                                endDate={endDate}
+                                ranged={ranged}
+                            />
+                            <DoubleDot>:</DoubleDot>
+                            <Minute
+                                input={input}
+                                setSelectedMinute={setSelectedMinute}
+                                selectedHour={selectedHour}
+                                selectedMinute={selectedMinute}
+                                startDate={startDate}
+                                endDate={endDate}
+                                ranged={ranged}
+                            />
+                        </ContainerHours>
+                        <Hours
+                            input={input}
+                            setSelectedHours={setSelectedHours}
+                            setSelectedHour={setSelectedHour}
+                            setSelectedMinute={setSelectedMinute}
+                            selectedHours={selectedHours}
+                            startDate={startDate}
+                            endDate={endDate}
+                            ranged={ranged}
+                        />
+                    </ContainerSelect>
+                </Container>
+            )}
+        </ClickAwayListener>
+    );
+};
+
+export const JRCFormDateTimeCustomMulti = (props: any) => {
+    const { fields } = props;
+
+    return (
+        <InputMultiDateTime>
+            <MultiDateTime>
+                {fields.map((f: any, i: number) => (
+                    <ContainerMulti key={`multi-${i}`}>
+                        <Field name={f} component={DateTime} {...props} id={i} />
+                        <IconCross
+                            onClick={() => {
+                                fields.remove(i);
+                            }}>
+                            &#10005;
+                        </IconCross>
+                    </ContainerMulti>
+                ))}
+            </MultiDateTime>
+            {fields.length < 3 && <IconPlus onClick={() => fields.push('')}>&#43;</IconPlus>}
+        </InputMultiDateTime>
+    );
+};
+
+export const JRCFormDateTimeCustom = (props: JRCFormDateTimeCustomProps) => {
+    const multi = props.isMulti || false;
+    return (
+        <React.Fragment>
+            <FormLabel htmlFor={props.htmlFor}>{props.label}</FormLabel>
+            {multi ? <JRCFormDateTimeCustomMulti {...props} /> : <DateTime {...props} id="single" />}
+            {props.description && <StyledDescription>{props.description}</StyledDescription>}
+        </React.Fragment>
+    );
+};
+
+// export const JRCFormDateTimeCustomField = (props: JRCFormDateTimeCustomProps) => {
+//     const intl = useIntl();
+//     const validate = useControls({ ...props, intl });
+//     const multi = props.isMulti || false;
+//     return (
+//         <React.Fragment>
+//             {multi ? (
+//                 <FieldArray
+//                     component={JRCFormDateTimeCustom}
+//                     name={props.name}
+//                     validate={validate}
+//                     {...props}
+//                 />
+//             ) : (
+//                 <Field
+//                     component={JRCFormDateTimeCustom}
+//                     name={props.name}
+//                     validate={validate}
+//                     {...props}
+//                 />
+//             )}
+//         </React.Fragment>
+//     );
+// };
+
+export interface JRCFormDateProps extends JRCWritableFormInputProps {
+    range?: boolean;
+    isMulti?: boolean;
+    start?: string;
+    end?: string;
+}
+
+/**
+ * Component used as a <input type="text"/>
+ * @param props JRCFormDateProps
+ * validation props: minValue, maxValue, required
+ * @returns JSX.Element
+ */
+export const JRCFormDatetimeField = (props: JRCFormDateProps) => {
+    const validate = useControls({
+        intl: useIntl(),
+        required: props.required,
+    });
+    return (
+        <>
+            {props.isMulti ? (
+                // FIXME TYPESCRIPT-STRICT
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                <FieldArray component={JRCFormDateTimeCustom} name={props.name} validate={validate} {...props} />
+            ) : (
+                // FIXME TYPESCRIPT-STRICT
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                <Field component={JRCFormDateTimeCustom} name={props.name} validate={validate} {...props} />
+            )}
+        </>
+        // <Field
+        //     component={JRCFormFieldRender}
+        //     renderInputFct={(input: WrappedFieldInputProps) => JRCFormDateTimeCustom(props, input)}
+        //     validate={validate}
+        //     htmlFor={props.name}
+        //     {...props}
+        // />
+    );
+};