时间戳

首页 > 解决方案 > reactjs KeyboardDatePicker + react hook form：如何获取YYYY-MM-DD格式的日期

reactjs - reactjs KeyboardDatePicker + react hook form：如何获取YYYY-MM-DD格式的日期

问题描述

我正在为我的表单使用材料 ui + react hook 表单

          <MuiPickersUtilsProvider utils={DateFnsUtils}>
            <Controller
              name="date_of_birth"
              control={control}
              defaultValue={new Date()}
              render={({ field: { ref, ...rest } }) => (
                <KeyboardDatePicker
                  inputRef={ref}
                  margin="dense"
                  fullWidth
                  id="date-picker-dialog"
                  label="Date of Birth"
                  format="yyyy-MM-dd"
                  KeyboardButtonProps={{
                    "aria-label": "change date",
                  }}
                  error={errors.date_of_birth ? true : false}
                  {...rest}
                />
              )}
            />
          </MuiPickersUtilsProvider>

在反应钩子形式中，我得到date_of_birth了格式2021-08-29T00:46:27.103Z，但我希望它是2021-08-29

我怎样才能做到这一点

试过了

import DateFnsUtils from "@date-io/date-fns";
const dateFns = new DateFnsUtils();

... in the onSubmit function
... example
date = dateFns.parseISO('2021-08-29T01:23:43.495Z')
... here i get error parseISO is not a function of dateFns
formated = dateFns.format(date,"yyyy-MM-dd")

如何使用 dateFns 将其格式化为 yyyy-MM-dd

标签： reactjsmaterial-uireact-hook-form

解决方案

正如您在他们的文档中看到的那样。只需使用格式功能。

https://date-fns.org/docs/Getting-Started

更新我的答案：

出于日期格式化目的，您可以使用 date-fns 或 moment.js。@date-io 是各种日期库的抽象，如 moment、date-fns、luxon 等。在您的情况下，您可以直接使用 date-fns 库并使用它们的功能。

推荐阅读