如何为 Material-ui TextField Type=date 设置默认日期答案

【问题标题】：how to set a default date for a Material-ui TextField Type=date如何为 Material-ui TextField Type=date 设置默认日期
【发布时间】：2019-07-09 21:23:39
【问题描述】：

我刚开始使用 React，我正在尝试使用使用该材料的日期选择器

看起来像这样：

      <TextField
        name="someDate"
        label="Some Date"
        InputLabelProps={{ shrink: true, required: true }}
        helperText={errors.someDate}
        FormHelperTextProps={{ hidden: !this.hasError('someDate') }}
        type="date"
        error={this.hasError('someDate')}
        onChange={this.handleSomeDateChange}
        value={values.someDate}
      />

设置：type="date" 为我提供了日期选择器，但它也将默认值的格式覆盖为“dd/mm/yyyy”。我希望默认值为 values.someDate 我已经尝试使用 defaultValue 道具和 value 道具，如上所示，但没有运气。更改标签的唯一方法是删除 type="date" ，这也会删除日期选择器。

如何在渲染时将其设置为 values.someDate？

【问题讨论】：

标签： reactjs typescript date material-ui

【解决方案1】：

它看起来应该与 defaultValue 一起使用：

请看它在这里工作： https://codesandbox.io/s/9y6yz462op

const values = {
  someDate: "2017-05-24"
};

function App() {
  return (
    <div className="App">
      <TextField
        name="someDate"
        label="Some Date"
        InputLabelProps={{ shrink: true, required: true }}
        type="date"
        defaultValue={values.someDate}
      />
    </div>
  );
}

【讨论】：

我认为使用 defaultValue 是正确的做法
是的，事实证明这是一个后端问题。默认值有效
如何删除文本字段中的关闭图标符号？

【解决方案2】：

就我而言，我想将默认日期设置为当前日期。所以我拿了我当前的日期并根据材料文本字段格式对其进行格式化。所以我的默认值始终是我当前的日期。

见codeSandbox：https://codesandbox.io/s/elastic-sea-s7i76

const dateNow = new Date(); // Creating a new date object with the current date and time
const year = dateNow.getFullYear(); // Getting current year from the created Date object
const monthWithOffset = dateNow.getUTCMonth() + 1; // January is 0 by default in JS. Offsetting +1 to fix date for calendar.
const month = // Setting current Month number from current Date object
  monthWithOffset.toString().length < 2 // Checking if month is < 10 and pre-prending 0 to adjust for date input.
    ? `0${monthWithOffset}`
    : monthWithOffset;
const date =
  dateNow.getUTCDate().toString().length < 2 // Checking if date is < 10 and pre-prending 0 if not to adjust for date input.
    ? `0${dateNow.getUTCDate()}`
    : dateNow.getUTCDate();

const materialDateInput = `${year}-${month}-${date}`; // combining to format for defaultValue or value attribute of material <TextField>

function App() {
  return (
    <form noValidate>
      <TextField
        id="date"
        label="Birthday"
        type="date"
        defaultValue={materialDateInput} // Today's Date being used as default
        InputLabelProps={{
          shrink: true
        }}
      />
    </form>
  );
}

不知道这是不是你需要的。但是您可以根据需要操纵new Date()，这将起作用。

这应该有助于人们在约会时经验较少。

【讨论】：

如何删除文本字段中的关闭图标符号？

【解决方案3】：

对于可能会错过它的人，defaultValue 中日期的格式是yyyy-mm-dd，我使用的是dd-mm-yyyy，它没有呈现。

【讨论】：

【解决方案4】：

为了澄清@bharat 的答案，为材料 ui 输入字段设置值要求您将日期格式化为YYYY-MM-DD。例如，如果您使用像 dayjs 这样的库，您可以这样做

import dayjs from 'dayjs';

      <TextField
        name="someDate"
        label="Some Date"
        InputLabelProps={{ shrink: true, required: true }}
        helperText={errors.someDate}
        FormHelperTextProps={{ hidden: !this.hasError('someDate') }}
        type="date"
        error={this.hasError('someDate')}
        onChange={this.handleSomeDateChange}
        value={dayjs(values.someDate).format("YYYY-MM-DD")}
      />

【讨论】：