@amxchange/grid-view-web-client/src/modules/FormField/DateField.jsx

amxchange grid view framework web client in react ( a module extracted from existing jax )

import React from "react";
import moment from "moment";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";

const DateField = React.forwardRef(({ id, label, containerClass, value, onChangeInput, errorMsg, ...restProps }, ref) => {
    // console.log({value: value}) //falsy values - empty string 
    return (
        <LocalizationProvider dateAdapter={AdapterMoment}>
            <div className={`input-field-sec date-box ${errorMsg ? "error-field" : ""} ${containerClass || ""}`}>
                {label && <label>{label}</label>}
                <DatePicker
                    style={{ width: "100%", color: !value ? "transparent" : "" }}
                    inputRef={ref}
                    className={"custom-date-input"}
                    id={id}
                    value={value && moment(value).isValid() ? moment(new Date(value).valueOf()) : null}
                    onChange={newDate => {
                        onChangeInput(newDate ? new Date(newDate).valueOf() : null);
                    }}
                    format="DD/MM/YYYY"
                    {...restProps}
                />
                {errorMsg && <span className="helperTextError">{errorMsg}</span>}
            </div>
        </LocalizationProvider>
    );
});

export default DateField;