reactjs - hvordan sette en standarddato for en Material-ui TextField Type=date

Jeg har nettopp begynt å jobbe med React, og jeg prøver å bruke en datovelger med Material.

det ser slik ut:

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

Innstilling: type="date" gir meg datovelgeren, men det overskriver også formatet for standardverdien til "dd/mm/yyyy". Jeg vil at standardverdien skal være values.someDate. Jeg har prøvd å bruke defaultValue-propen og value-propen som vist ovenfor uten hell. Den eneste måten å endre etiketten på er hvis jeg fjerner type="date", noe som også fjerner datovelgeren.

Hvordan kan jeg sette det til values.someDate ved rendering?

Svar #1

det ser ut som det bør fungere med defaultValue:

Se det i arbeid her: 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>
  );
}

Svar #2

I mitt tilfelle ønsket jeg å sette standarddatoen min til dagens dato. Så jeg tok dagens dato og formaterte den i henhold til material tekstfeltformat. Så standarden min er alltid dagens dato.

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

Vet ikke om dette er det du trenger. Men du kan bare manipulere new Date() i henhold til ditt behov, og dette vil fungere.

Dette bør hjelpe folk med mindre erfaring med dato.

Relaterte artikler