how to set a default date for a Material-ui TextField Type=date

问题

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?

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

回答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.

来源：https://stackoverflow.com/questions/54714316/how-to-set-a-default-date-for-a-material-ui-textfield-type-date

标签

reactjs

typescript

date

material-ui