CODEWITHSUNDEEP
reactjstypescriptdatematerial-ui
Haq.H
Haq.H

Reputation: 973

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?

Upvotes: 4

Views: 54065

Answers (4)

omarwaleed
omarwaleed

Reputation: 681

To clarify @bharat's answer, setting value for material ui input field requires that you format the date to be YYYY-MM-DD. If you're using a library like dayjs for example you can do this

import dayjs from 'dayjs';

      <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={dayjs(values.someDate).format("YYYY-MM-DD")}
      />

Upvotes: 0

Bharat Gupta
Bharat Gupta

Reputation: 21

For someone who might miss it out, the format for the date in defaultValue is yyyy-mm-dd, I was using the dd-mm-yyyy, and it did not render.

Upvotes: 2

Fauzul Chowdhury
Fauzul Chowdhury

Reputation: 54

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.

Upvotes: 3

grenzbotin
grenzbotin

Reputation: 2565

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

Upvotes: 7

Related Questions