How to convert date format(Fri Jun 22 2018 14:37:47 GMT+0530 (India Standard Time)) to DD-MM-YYYY

Question

I am using material-ui/DatePicker I am getting date in full format I need only the DD-MM-YYYY

import DatePicker from 'material-ui/DatePicker';

datepicker Component

<DatePicker
   hintText=""
   formatDate={(date) => moment(date).format('DD-MM-YYYY')}
   value={this.state.contractDate}
   onChange={this.handleContractDateChange}
  />

On change Function looks like below

handleContractDateChange = (event, date) => {
    this.setState({
              contractDate: date,
            });

          }

Possible duplicate of [How to get current formatted date dd/mm/yyyy in Javascript and append it to an input](https://stackoverflow.com/questions/12409299/how-to-get-current-formatted-date-dd-mm-yyyy-in-javascript-and-append-it-to-an-i) — kayakpim, Jun 22 '18 at 09:21

score 2 · Answer 1 · answered Jun 22 '18 at 09:34

There is a method to convert JS Date Object to DD-MM-YYYY which is as follows

function formatDate(oDate) {
    var oTempDate = new Date(oDate),
        sMonth = '' + (oTempDate.getMonth() + 1),
        sDay = '' + oTempDate.getDate(),
        iYear = oTempDate.getFullYear();

        if (sMonth.length < 2) { sMonth = '0' + sMonth; }
        if (sDay.length < 2) { sDay = '0' + sDay; }

        return [sDay, sMonth, iYear].join('-');
}

score 0 · Answer 2 · answered Jun 22 '18 at 09:26

0

Do it like below using pure JavaScript:

let date = new Date("Fri Jun 22 2018 14:37:47 GMT+0530 (India Standard Time)");

let dd = date.getDate();
let mm = date.getMonth() + 1;
let yyyy = date.getFullYear();

console.log(dd + "-" + mm + "-" + yyyy);

answered Jun 22 '18 at 09:26

Vikasdeep Singh

20,983
15
78
104

score 0 · Accepted Answer · answered Jun 22 '18 at 09:36

0

From what I see in the documentation (https://v0.material-ui.com/#/components/date-picker) the prop formatDate is just for formatting the value of the date picker that is displayed in the field after picking a date. Your onChange handler still gets called with the date object. You have to call moment.format() again in your onChange handler.

handleContractDateChange = (event, date) => {
  const formattedDate = moment(date).format('DD-MM-YYYY');
  // Use formattedDate

  this.setState({
    contractDate: date,
  });
}

answered Jun 22 '18 at 09:36

Shriharsha KL

317
1
2
11

date is not populating in the UI, – user9883888 Jun 22 '18 at 09:47
It is formating but date is not populating in the UI – user9883888 Jun 22 '18 at 09:48
This is not correct answer at all. momentjs is **NOT** supporting `DD-MM-YYYY` format. If you will run it will show you warning in `console logs` – Vikasdeep Singh Jun 22 '18 at 14:04

How to convert date format(Fri Jun 22 2018 14:37:47 GMT+0530 (India Standard Time)) to DD-MM-YYYY

3 Answers3