我是 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)}
/>
uj5u.com熱心網友回復：
像這樣使用日期選擇器 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>
);
}
uj5u.com熱心網友回復：
只想顯示使用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)}
/>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/368188.html