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

Question

I just started working with React and I am trying to use a date picker using the material

it looks like this:

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

Setting: type="date" gives me the date picker but it also overlays the format for the default value to "dd/mm/yyyy". I want the default value to be values.someDate I've tried using the defaultValue prop and the value prop as shown above with no luck. The only way to change the label is if I remove type="date" which also removes the datepicker.

How I can I set it to values.someDate on render?

Answer 1

it looks like it should work with defaultValue:

Please see it working here: 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

In my case I wanted to set my default Date to my current date. So I took my current date and formatted it according to material textfield format. So my default is always my current date.

See in 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>
  );
}

Don't know if this is what you need. But you can just manipulate the new Date() according to your need and this will work.

This should assist people will less experience in date.

Answer 3

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

Answer 4

To clarify @bharat's answer, setting value for material ui input field requires that you format the date to be YYYY-MM-DD . If you're using a library like dayjs for example you can do this

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")}
      />