Moment.js 将日期字段格式化为比应有的早一天

Question

这是我试图在我的代码中修复的一个非常小的小错误。我有一个初始状态为

的 React 组件

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

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

以如下形式使用：

<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>

我已经 console.logs 看到 Moment(new Date()).format('YYYY-MM-DD') 显示了今天的日期，如我所愿，但由于某种原因，当组件呈现时它在字段中的默认日期为昨天，但如果我要摆脱使用 Moment 实例初始化日期并让它成为 'new Date()'，它会正确呈现今天的日期。

知道为什么会这样吗？在这里有点伤脑筋，我只希望表单上的默认日期是当前日期，并且需要将其格式化为 YYYY-MM-DD，因为这就是我的 API 发送和接收数据的方式

编辑：这是三个 console.logs 我试过：

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

他们的结果：

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

但由于某些原因，后两个使用 Moment 会导致组件以昨天的日期呈现

Answer 1

首先，您可以将普通的 JS new Date() 移到 moment 中。

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

没有参数是必要的时刻有当地时间的时刻对象。这是 default ;)

然后，正如 Vengleab SO 在评论中提到的那样，您将该日期传递给 KeyboardDatePicker，这（很可能）假定这是一个 UTC 日期并从中“删除”您的时间偏移。这可以解释为什么在 19H00 和午夜（您当地的 GMT-5 时间）之间测试时日期是昨天。

所以...只需在日期中传递一个时间就可以解决问题。

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

Moment.js 将日期字段格式化为比应有的早一天

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

javascript

momentjs

reactjs

material-ui