CODEWITHSUNDEEP
reactjsmaterial-ui
opticyclic
opticyclic

Reputation: 8106

How Do I Set The Current Date In A Material-UI TextField

If I set type="date" on a TextField I can initialise it with a string.

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

However, when I try to use the current date using a date object 

const values = {
  someDate: new Date()
};

I get an error

Warning: Failed prop type: Invalid prop `defaultValue` supplied to `TextField`.

How do I pass a Date to the TextField?

Upvotes: 1

Views: 3365

Answers (1)

Bj&#246;rn Hei&#223;
Bj&#246;rn Hei&#223;

Reputation: 1728

As you can read in the docs defaultValue has to be either a string or a number. The Date type is not supported.

But since you're using type="date" you should be fine by handing the date as string.

e.g.

const values = {
  someDate: new Date().toISOString().substring(0, 10);
};

Upvotes: 5

Related Questions