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

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

import React from "react";
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";

dayjs.extend(utc);

// Function to validate ISO 8601 string
const isValidISO8601 = dateString => {
    const isoDate = dayjs(dateString, dayjs.ISO_8601, true);
    return isoDate.isValid();
};

// Function to validate date using Day.js
const isValidDate = dateString => {
    const date = dayjs(dateString); 
    return date.isValid();
};

// Function to validate date string in both formats
const isValidDateString = dateString => {
    return isValidISO8601(dateString) || isValidDate(dateString);
};

const DateTimeField = React.forwardRef(
    //TODO, in these fields, replace dateAdapter with AdapterMoment
    ({ id, label, containerClass, value, onChangeInput, errorMsg, ...restProps }, ref) => {
        // console.log({value: value}) //falsy values - empty string
        //P.S Note --> works with date in timestamp, JS Date Object, in ISO format string and any other valid dayjs date-time format
        return (
            <LocalizationProvider dateAdapter={AdapterDayjs}>
                <div className={`input-field-sec date-box ${errorMsg ? "error-field" : ""} ${containerClass || ""}`}>
                    {label && <label>{label}</label>}
                    <DateTimePicker
                        views={["year", "month", "day", "hours", "minutes", "seconds"]}
                        style={{ width: "100%", color: !value ? "transparent" : "" }}
                        inputRef={ref}
                        className={"custom-date-input"}
                        id={id}
                        value={value && isValidDateString(value) ? dayjs(value) : null}
                        onChange={date => {
                            onChangeInput(date && isValidDateString(date) ? dayjs(date).utc().toISOString() : null);
                        }}
                        format="DD/MM/YYYY hh:mm:ss A" //defaultFormat
                        {...restProps}
                    />
                    {errorMsg && <span className="helperTextError">{errorMsg}</span>}
                </div>
            </LocalizationProvider>
        );
    }
);

export default DateTimeField;