如何格式化日期输入？答案

【问题标题】：How to format Date input?如何格式化日期输入？
【发布时间】：2021-11-23 05:23:21
【问题描述】：

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

【问题讨论】：

标签： reactjs date material-ui date-format

【解决方案1】：

像这样使用 datepicker mui：

我做了一个动态的 datepicker 组件 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>
    );
}

【讨论】：

【解决方案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)}
/>

【讨论】：