reactjs - hvordan man sætter en standarddato for et Material-ui TextField Type=date

Jeg er lige begyndt at arbejde med React, og jeg prøver at bruge en datovælger med materialet

det ser sådan ud:

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

Indstilling: type="date" giver mig datovælgeren, men det overskriver også formatet for standardværdien til "dd/mm/yyyy". Jeg vil have, at standardværdien skal være values.someDate. Jeg har forsøgt at bruge defaultValue-proppen og value-proppen som vist ovenfor uden held. Den eneste måde at ændre etiketten på er, hvis jeg fjerner type="date", hvilket også fjerner datovælgeren.

Hvordan kan jeg sætte det til values.someDate ved rendering?

Svar #1

det ser ud til, at det burde fungere med defaultValue:

Se det i arbejde 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 mit tilfælde ønskede jeg at sætte min standarddato til min nuværende dato. Så jeg tog min nuværende dato og formaterede den i henhold til materialetekstfeltets format. Så min standard er altid min nuværende 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>
  );
}

Ved ikke om dette er, hvad du har brug for. Men du kan bare manipulere new Date() i henhold til dine behov, og dette vil virke.

Dette burde hjælpe folk med mindre erfaring med dato.

Relaterede artikler