Material-table: How to change edit field value format if the type = "date"?

Created on 27 Aug 2019  路  3Comments  路  Source: mbrn/material-table

I wish to display the date with the format like this "dd/MM/yyyy" instead of "MM.dd.yyyy", is there any way to do it for edit fileld with the type "date"?

wontfix

Most helpful comment

You could use the 'render' props on columns =>

{ 
    field: 'validated_at',
    title: 'Hi'
    type: 'date',
    render: rowData => moment(rowData.validated_at).format('DD/MM/YYYY')
}

All 3 comments

You could use the 'render' props on columns =>

{ 
    field: 'validated_at',
    title: 'Hi'
    type: 'date',
    render: rowData => moment(rowData.validated_at).format('DD/MM/YYYY')
}

I think the question was for editable field, the above is applying the format for data after being saved or when loaded.
To provide a format on edit field, the only way I figured was to use "editComponent" column property like this:

{
       title: "Date",
       field: "date",
       type: "date",
       editComponent: props => (
              <MuiPickersUtilsProvider utils={DateFnsUtils} 
                          locale={props.dateTimePickerLocalization}>
                     <DatePicker
                            format="dd/MM/yyyy"
                            value={props.value || null}
                            onChange={props.onChange}
                            clearable
                            InputProps={{
                                     style: {
                                          fontSize: 13,
                                     }
                            }}
                       />
                </MuiPickersUtilsProvider>
               )
},

Basically, I added the code from m-table-edit-field.js into the "editComponent" and I changed the format.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

roseak picture roseak  路  3Comments

victorwvieira picture victorwvieira  路  3Comments

bohrsty picture bohrsty  路  3Comments

timrchavez picture timrchavez  路  3Comments

behrouz-s picture behrouz-s  路  3Comments