Question

我刚刚开始使用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属性和上面显示的值属性，但是没有运气。更改标签的唯一方法是，如果我删除type =“ date”，这也会删除日期选择器。

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

Answer 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>
  );
}

Answer 2

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

在codeSandbox中查看：https://codesandbox.io/s/elastic-sea-s7i76

java.lang.IllegalStateException: Module with the Main dispatcher had failed to initialize. For tests Dispatchers.setMain from kotlinx-coroutines-test module can be used

at kotlinx.coroutines.internal.MissingMainCoroutineDispatcher.missing(MainDispatchers.kt:79)
at kotlinx.coroutines.internal.MissingMainCoroutineDispatcher.isDispatchNeeded(MainDispatchers.kt:54)
at kotlinx.coroutines.DispatchedKt.resumeCancellable(Dispatched.kt:373)
at kotlinx.coroutines.intrinsics.CancellableKt.startCoroutineCancellable(Cancellable.kt:25)
at kotlinx.coroutines.BuildersKt__Builders_commonKt.withContext(Builders.common.kt:152)
at kotlinx.coroutines.BuildersKt.withContext(Unknown Source)

不知道这是否是您所需要的。但是您可以根据需要操作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> ); }，这将起作用。

这应该会帮助人们减少约会经验。

Answer 3

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

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

3 个答案: