Moment.js formatting date field to a day earlier than it should

Question

This is a very small little bug I'm trying to fix in my code. I have a React component with this initial state

const initialFormData = Object.freeze({
    date: Moment(new Date()).format('YYYY-MM-DD'),
    price_per_gallon: '',
    trip_distance: '',
    gallons: '',
    car: ''
});

const [formData, updateFormData] = useState(initialFormData);

Which is used in a form like so:

<MuiPickersUtilsProvider utils={DateFnsUtils}>
    <Grid container justifyContent="space-around">
        <KeyboardDatePicker
            fullWidth
            disableToolbar
            inputVariant="outlined"
            format="yyyy-MM-dd"
            margin="normal"
            id="date-picker-inline"
            label="Date of Fillup"
            name="date"
            value={formData.date}
            onChange={handleDateChange}
            KeyboardButtonProps={{
                'aria-label': 'change date',
        }}
        />
    </Grid>
</MuiPickersUtilsProvider>

I've done console.logs to see that the Moment(new Date()).format('YYYY-MM-DD') shows today's date, as I want, but for some reason when the component renders it has the default date in the field as yesterday, but if I were to get rid of initializing the date with the Moment instance and just have it be 'new Date()', it renders with today's date correctly.

Any idea why this could be? Kind of wracking my brain here, I just want the default date on my form to be whatever the current day is, and need to format it to YYYY-MM-DD because that's how my API sends and receives the data

Edit: Here are three console.logs I've tried:

console.log(new Date());
console.log(Moment(new Date()).format('YYYY-MM-DD'));
console.log(Moment().format('YYYY-MM-DD'));

and their results:

Wed Feb 09 2022 22:01:41 GMT-0500 (Eastern Standard Time)
2022-02-09
2022-02-09

But for some reason the second two using Moment will cause the component to render with yesterday's date

Maybe it causes by machine timezone and UTC timezone, I am not sure about momentjs, but I experience similar issue with other library, when we console log it show correctly, but when formatting it will convert to UTC time — Vengleab SO, Feb 10 '22 at 03:16
I don't think it can be an issue with timezone and UTC, as the date being shown is yesterday's date. If it was showing the date in UTC, it would be showing 2022-02-10 — Chowdahhh, Feb 10 '22 at 03:21
Why [Object.freeze()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) to set the default state? — Louys Patrice Bessette, Feb 10 '22 at 03:25
I used Object.freeze() to lock the initial data of the form, but I guess it isn't really necessary. I just got rid of the freeze and loaded my app in a different browser (Firefox instead of my usual Chrome) and got the same result with yesterday's date — Chowdahhh, Feb 10 '22 at 03:27
Did you investigate what is the use of the `format` prop passed to the `KeyboardDatePicker` component? — Louys Patrice Bessette, Feb 10 '22 at 03:33
for ur case, u pass formatted date to KeyboardDatePicker, the potential bugs is that KeyboardDatePicker might assume that `2022-02-09` is UTC date, so it try to convert to local timezone, which become `2022-02-08` GMT-0500 — Vengleab SO, Feb 10 '22 at 06:24

Louys Patrice Bessette · Accepted Answer · 2022-02-10T15:14:39.957

2

First, you can emove the plain JS new Date() as agument to moment.

date: moment().format('YYYY-MM-DD')

No argument is necesssary to moment to have a moment object for local time. It's the default ;)

Then, as mentionned in comments by Vengleab SO, you are passing that date to KeyboardDatePicker which (most probably) assumes that is a UTC date and "removes" your time offset from it. That would explain why the date is yesterday when testing it between 19H00 and midnight (your local GMT-5 time).

So... Just passing a time along the date should fix the issue.

date: moment().format('YYYY-MM-DD 12:00:00')

edited Feb 10 '22 at 15:14

answered Feb 10 '22 at 02:56

Louys Patrice Bessette

33,375
6
36
64

I didn't realize you didn't have to put an argument in a Moment instance, but that unfortunately didn't fix my issue. I edited my question with the examples of console.logs I've run and the results I get. UTC is ahead of my timezone anyways (EST), so if that was messing me up I imagine it would be showing tomorrow's date, not yesterday's, but as we see on those console.logs, they return the correct date. It's something with the component I guess – Chowdahhh Feb 10 '22 at 03:06
Yup looks like this did the trick! Came to about the same conclusion after doing more research myself. For anyone here from Googling, here's more info: https://stackoverflow.com/questions/7556591/is-the-javascript-date-object-always-one-day-off/31732581#31732581 – Chowdahhh Feb 11 '22 at 01:36

Moment.js formatting date field to a day earlier than it should

1 Answers1