pedwfrontend/components/elements/fields/renderDatePicker.js

import React from "react";
import DatePicker from "react-datepicker";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import {
    addDays,
    addMonths,
    addYears,
    parseISO,
    subDays,
    subMonths,
    subYears
} from "date-fns";
import fieldLookup from "../../../data/crmfieldlookuptranslations.json";
import { getFieldTranslation } from "../helpers/translationHelpers";

export const RenderDatePicker = ({
    datafieldname,
    name,
    label,
    id,
    errorMsg,
    input: { onChange, value },
    meta: { touched, error },
    ...custom
}) => {
    const router = useRouter();
    let { t } = useTranslation();
    const { locale } = router;
    const { appealtypes } = router.query;

    const translatedLabel = getFieldTranslation({
        label,
        locale,
        appealtypes,
        fieldLookup
    });

    function dateFromOffset(offsetStr) {
        const today = new Date();

        if (!offsetStr || offsetStr === "0") {
            return today;
        }

        const match = offsetStr.match(/^([+-])(\d+)([dmy])$/i);

        if (!match) {
            console.warn("Invalid offset format:", offsetStr);
            return today;
        }

        const [, sign, numberStr, unitRaw] = match;
        const amount = parseInt(numberStr, 10);
        const unit = unitRaw.toLowerCase();
        const isNegative = sign === "-";

        switch (unit) {
            case "y":
                return isNegative
                    ? subYears(today, amount)
                    : addYears(today, amount);

            case "m":
                return isNegative
                    ? subMonths(today, amount)
                    : addMonths(today, amount);

            case "d":
                return isNegative
                    ? subDays(today, amount)
                    : addDays(today, amount);

            default:
                return today;
        }
    }

    const minDate = dateFromOffset(custom.dateStart);
    const maxDate = dateFromOffset(custom.dateEnd);

    return (
        <>
            <div
                className={
                    touched && error
                        ? "govuk-form-group govuk-form-group--error"
                        : "govuk-form-group "
                }
            >
                <fieldset
                    className="govuk-fieldset"
                    role="group"
                    aria-describedby={id + "_label"}
                >
                    <legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
                        <label
                            className="govuk-fieldset__heading"
                            id={id + "_label"}
                            htmlFor={id}
                        >
                            {translatedLabel}
                        </label>
                        {custom.hasOwnProperty("hint") && (
                            <div className="govuk-hint govuk-!-font-size-14">
                                {t(custom.hint)}
                            </div>
                        )}
                    </legend>
                    {!custom.hasOwnProperty("showErrorBottom")
                        ? touched &&
                          error && (
                              <span
                                  id={id + "-error"}
                                  className="govuk-error-message"
                              >
                                  <span className="govuk-visually-hidden">
                                      Error:
                                  </span>{" "}
                                  {errorMsg}
                              </span>
                          )
                        : ""}

                    <DatePicker
                        {...custom}
                        locale={router.locale}
                        autoOk={true}
                        id={id}
                        dateFormat="dd/MM/yyyy"
                        onChange={onChange}
                        selected={
                            value
                                ? typeof value != "object"
                                    ? parseISO(value)
                                    : value
                                : null
                        }
                        className="govuk-input govuk-input--width-10"
                        minDate={minDate}
                        maxDate={maxDate}
                        autoComplete="off"
                    />
                    {custom.hasOwnProperty("showErrorBottom")
                        ? touched &&
                          error && (
                              <span
                                  id={id + "-error"}
                                  className="govuk-error-message"
                              >
                                  <span className="govuk-visually-hidden">
                                      Error:
                                  </span>{" "}
                                  {error}
                              </span>
                          )
                        : ""}
                </fieldset>
            </div>
        </>
    );
};