This is a situation that is completely perplexing to me. I am stuck using Material-UI core and not currently allowed to upgrade to MUI X due possible vulnerabilities and my project lead not wanting me to add any new dependencies that could cause issues. So in MUI core, I created a datepicker as such:

Datepicker Component:

import * as React from 'react';
import { TextField } from '@material-ui/core';


function InputDatePicker(props) {
    const { error = null, label, name, onChange, value, ...other } = props;

    return (
         <TextField
            variant='outlined'
            label={label}
            name={name}
            value={(value === undefined || value === null) ? '' : value} 
            onChange={onChange}
            {...other}
            {...(error && {error: true, helperText: error})}
        />
    );
}

export default DatePicker;

to which I call to the component inside the app as such:

  <DatePicker
    type='date'
    onChange={handleInputChange}
    name='rescheduleDate'
    label='Reschedule Date'
    value={rescheduleDate}
   />

The confusing part happens once I attempt to use the datepicker. Let's say I selected March 31, 2025 from the datepicker. I am console logging the selected values in the from, which display as 2025-03-31. This makes sense because the picker requires a YYYY-MM-DD date format. I am info logging the values inside the Java code of my API which is showing Sun Mar 30 19:00:00 CDT 2025, which is the previous day. The time is always 19:00:00. When I check the date value inside our Oracle database, the date is displaying as 30-MAR-25 which matches the Java info log, but not the originally selected date value. To further make things confusing, when I call to the date value to display it inside the app, it is returning a date value of 2025-03-31T00:00:00.000+00:00, which matches the selected date, but not what is logged in the Java code or displayed in the database. I have read that this display discrepancy is caused by a time zone issue, but I don't know how to correct this inside the component. There is documentation for how to handle this in MUI X, but it does not work for MUI Core.

Is there something I can do to keep the date consistently displaying the same date (March 31). Since it seems to return the result to the app that is expected, I am tempted to just ignore it, but I am afraid that if we pull reports from the database it will be showing an incorrect date.

This is a situation that is completely perplexing to me. I am stuck using Material-UI core and not currently allowed to upgrade to MUI X due possible vulnerabilities and my project lead not wanting me to add any new dependencies that could cause issues. So in MUI core, I created a datepicker as such:

Datepicker Component:

import * as React from 'react';
import { TextField } from '@material-ui/core';


function InputDatePicker(props) {
    const { error = null, label, name, onChange, value, ...other } = props;

    return (
         <TextField
            variant='outlined'
            label={label}
            name={name}
            value={(value === undefined || value === null) ? '' : value} 
            onChange={onChange}
            {...other}
            {...(error && {error: true, helperText: error})}
        />
    );
}

export default DatePicker;

to which I call to the component inside the app as such:

  <DatePicker
    type='date'
    onChange={handleInputChange}
    name='rescheduleDate'
    label='Reschedule Date'
    value={rescheduleDate}
   />

The confusing part happens once I attempt to use the datepicker. Let's say I selected March 31, 2025 from the datepicker. I am console logging the selected values in the from, which display as 2025-03-31. This makes sense because the picker requires a YYYY-MM-DD date format. I am info logging the values inside the Java code of my API which is showing Sun Mar 30 19:00:00 CDT 2025, which is the previous day. The time is always 19:00:00. When I check the date value inside our Oracle database, the date is displaying as 30-MAR-25 which matches the Java info log, but not the originally selected date value. To further make things confusing, when I call to the date value to display it inside the app, it is returning a date value of 2025-03-31T00:00:00.000+00:00, which matches the selected date, but not what is logged in the Java code or displayed in the database. I have read that this display discrepancy is caused by a time zone issue, but I don't know how to correct this inside the component. There is documentation for how to handle this in MUI X, but it does not work for MUI Core.

Is there something I can do to keep the date consistently displaying the same date (March 31). Since it seems to return the result to the app that is expected, I am tempted to just ignore it, but I am afraid that if we pull reports from the database it will be showing an incorrect date.

• reactjs
• material-ui
• mui-x-date-picker

• Currently I am not adding any date formatting or time zone adjustment within the backend Java code. – Mtullis Commented Mar 13 at 15:25
• I found a way of handling the situation inside the Java code, I just adjusted the timestamp from GTM as such Date newRescheduleDate = new Date(escheduleDate.getTime() + TimeZone.getTimeZone("GMT+5:00").getRawOffset()); Now The DB is diplaying the correct date. – Mtullis Commented Mar 13 at 17:27

1 Answer 1

Check your server's timezone. Also, it could be from the formatting you're doing at the backend. Check the date formatting style you're using in your java code to make sure it's not formatting based on a specific time and timezone.