如何格式化日期输入？

Question

我是 Reactjs 和 MUI 的新手，目前我的日期输入格式是 23/11/2021(DD/MM/YYYY)，如何更改它以便显示为 23-nov-2021 (dd-mmm -yyyy）？

这是我当前的代码：

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

Answer 1

像这样使用日期选择器 mui :

我制作了一个动态日期选择器组件 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>
    );
}

Answer 2

只想显示使用 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)}
/>