How to format Date input?-CodePudding

I'm new to Reactjs and MUI, currently my date input format is in 23/11/2021(DD/MM/YYYY), how do I change it so that it will display as 23-nov-2021 (dd-mmm-yyyy) instead?

This is my current code:

<TextField
 name="startDate"
 label="Start Date"
 InputLabelProps={{ shrink: true, required: true, style: { fontWeight: 700, color:'#1E1E1E', fontFamily:'Open Sans', fontSize:'18px'} }}
 type="date"
 InputProps={{ style: {border: "1px solid #C2C2C2", padding: 6, width:480, height:51} }}
 defaultValue={values.startDate}
 onChange={e => handleStartDateChange(e)}
/>

CodePudding user response：

use the datepicker mui like this :

I made a dynamic datepicker component mui :

    import 'date-fns';
import React from 'react';
import Grid from '@material-ui/core/Grid';
import DateFnsUtils from '@date-io/date-fns';
import {
    MuiPickersUtilsProvider,
    KeyboardTimePicker,
    KeyboardDatePicker,
} from '@material-ui/pickers';
import moment from "moment";

export default function MaterialUIPickers(props) {
    // The first commit of Material-UI
    const {getData,name,label='',required,setValue,value} = props;
    // const [selectedDate, setSelectedDate] = React.useState(null);

    const handleDateChange = (date) => {
        setValue(date);
        getData(name,moment(date).format("YYYY-MM-DD HH:mm:ss"))
    };

    return (
        <MuiPickersUtilsProvider utils={DateFnsUtils}>
            <Grid container justifyContent="space-around">

                <KeyboardDatePicker
                    className="mt-0 w-100"
                    required={required}
                    margin="normal"
                    id="date-picker-dialog"
                    label={label}
                    format="dd/MM/yyyy"
                    value={value}
                    onChange={handleDateChange}
                    KeyboardButtonProps={{
                        'aria-label': 'change date',
                    }}
                />

            </Grid>
        </MuiPickersUtilsProvider>
    );
}

CodePudding user response：

Just want to display use moment.js

<TextField
 name="startDate"
 label="Start Date"
 InputLabelProps={{ shrink: true, required: true, style: { fontWeight: 700, color:'#1E1E1E', fontFamily:'Open Sans', fontSize:'18px'} }}
 type="date"
 InputProps={{ style: {border: "1px solid #C2C2C2", padding: 6, width:480, height:51} }}
 defaultValue={values?.startDate !=="" ? moment(values?.startDate).format('DD-MMM-YYYY') : ""}
 onChange={e => handleStartDateChange(e)}
/>