how to set a default date for a 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>
  );
}