React Material UI日期选择器，不带时区

Question

我正在尝试开发一个React材质ui日期选择器。它"；张贴"；mysql数据库中的时区：2020-08-16T20:06:09.344Z

格式应该是这样的：2020年8月16日

如何在React前端或Java后端更改字符串格式？在Java和mysql中，日期是一个字符串。

export default function Speisereste() {
const classes = useStyles();
const [firstLoad, setLoad] = React.useState(true);
const [datum, setDatum] = React.useState(new Date());
const handleDatumChange = (date) => {
setDatum(date);
};
console.log(datum);
const [message, setMessage] = React.useState("Nothing saved in the session");
async function sampleFunc(toInput) {
const response = await fetch("/speisereste", {
method: "POST", // *GET, POST, PUT, DELETE, etc.
mode: "cors", // no-cors, *cors, same-origin
cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
credentials: "same-origin", // include, *same-origin, omit
headers: {
"Content-Type": "application/json"
// 'Content-Type': 'application/x-www-form-urlencoded',
},
redirect: "follow", // manual, *follow, error
referrerPolicy: "no-referrer", // no-referrer, *client
body: JSON.stringify(toInput) // body data type must match "Content-Type" header
});
let body = await response.json();
console.log(body.id);
setMessage(body.id ? "Data sucessfully updated" : "Data updating failed");
}
const handleSubmit = variables => {
const toInput = { datum };
sampleFunc(toInput);
setDatum(datum);
};

if (firstLoad) {
//  sampleFunc();
setLoad(false);
}

return (

<FormControl required className={classes.formControl}>
<Grid item xs={12}>
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<DatePicker
label="Datum"
value={datum}
format="dd/MM/yyyy"
onChange={handleDatumChange}
animateYearScrolling
/>
</MuiPickersUtilsProvider>
</Grid>
</FormControl>
</Grid>

Answer 1

您可以使用Javascript Date对象：

var d = new Date('2020-08-16T20:06:09.344Z');
console.log(d.getUTCHours()); // Hours
console.log(d.getUTCMinutes());
console.log(d.getUTCSeconds());

或者使用momentjs：http://momentjs.com/

var localTime = moment().format('YYYY-MM-DD'); // store localTime
var proposedDate = localTime + "T00:00:00.000Z";

现在您已经有了一段时间的正确格式，如果它有效，请解析它：

var isValidDate = moment(proposedDate).isValid();
// returns true if valid and false if it is not.

为了获得时间部分，你可以做一些事情，比如：

var momentDate = moment(proposedDate)
var hour = momentDate.hours();
var minutes = momentDate.minutes();
var seconds = momentDate.seconds();
// or you can use `.format`:
console.log(momentDate.format("YYYY-MM-DD hh:mm:ss A Z"));

Answer 2

很抱歉它不起作用。我只想要日期，而不是我发布到数据库的时间，

export default function Speisereste() {
var d = new Date('dd/MM/yyyy');
const classes = useStyles();
const [firstLoad, setLoad] = React.useState(true);
const [speisen, setSpeisen] = React.useState("");
const [department, setDepartment] = React.useState("");
const [gewicht, setGewicht] = React.useState("");
const [grund, setGrund] = React.useState("");
const [datum, setDatum] = React.useState(d);
const handleDatumChange = (date) => {
setDatum(date);
};
console.log(datum);

const handleSpeisenChange = event => setSpeisen(event.target.value);
const handleDepartmentChange = event => setDepartment(event.target.value);
const handleGewichtChange = event => setGewicht(event.target.value);
const handleGrundChange = event => setGrund(event.target.value);
const [message, setMessage] = React.useState("Nothing saved in the session");
async function sampleFunc(toInput) {
const response = await fetch("/speisereste", {
method: "POST", // *GET, POST, PUT, DELETE, etc.
mode: "cors", // no-cors, *cors, same-origin
cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
credentials: "same-origin", // include, *same-origin, omit
headers: {
"Content-Type": "application/json"
// 'Content-Type': 'application/x-www-form-urlencoded',
},
redirect: "follow", // manual, *follow, error
referrerPolicy: "no-referrer", // no-referrer, *client
body: JSON.stringify(toInput) // body data type must match "Content-Type" header
});
let body = await response.json();
console.log(body.id);
setMessage(body.id ? "Data sucessfully updated" : "Data updating failed");
}
const handleSubmit = variables => {
const toInput = { speisen, department, gewicht, grund, datum };
sampleFunc(toInput);
setSpeisen("");
setDepartment("");
setGewicht("");
setGrund("");
setDatum(datum);

};

if (firstLoad) {
//  sampleFunc();
setLoad(false);
}

return (
<Container component="main" maxWidth="xs">
<CssBaseline />
<div className={classes.paper}>
<div className="logo">
<img src={logo} width="300" height="100" />
</div>
<Typography component="h1" variant="h5">
Speisereste Analyse App
</Typography>
<FormControl required className={classes.form}>
<Grid container spacing={2}>
<Grid item xs={12}>
<TextField
variant="outlined"
required
fullWidth
id="speisen"
value={speisen}
label="Beilage, Gemüse, Salat"
name="speisen"
autoComplete="speisen"
onChange={handleSpeisenChange}
/>
</Grid>
<Grid item xs={12} sm={6}>
<FormControl required className={classes.formControl}>
<InputLabel id="demo-simple-select-required-label">Gewicht</InputLabel>
<Select
labelId="demo-customized-select-label"
id="demo-customized-select"
value={gewicht}
onChange={handleGewichtChange}
>
<MenuItem value={0.5}>0.5kg</MenuItem>
<MenuItem value={1.0}>1.0kg</MenuItem>
<MenuItem value={1.5}>1.5kg</MenuItem>
<MenuItem value={2.0}>2.0kg</MenuItem>
<MenuItem value={2.5}>2.5kg</MenuItem>
<MenuItem value={3.0}>3.0kg</MenuItem>
</Select>
</FormControl>
</Grid>
<Grid item xs={12} sm={6}>
<FormControl required className={classes.formControl}>
<InputLabel id="demo-simple-select-required-label">Niederlassung</InputLabel>
<Select
labelId="demo-customized-select-label"
id="demo-customized-select"
value={department}
onChange={handleDepartmentChange}
>
<MenuItem value={9043}>AWKG</MenuItem>
<MenuItem value={9032}>SWG</MenuItem>
<MenuItem value={9033}>WIS</MenuItem>
</Select>
</FormControl>
</Grid>
<Grid item xs={12} sm={6}>
<FormControl required className={classes.formControl}>
<InputLabel id="demo-simple-select-required-label">Grund</InputLabel>
<Select
labelId="demo-customized-select-label"
id="demo-customized-select"
value={grund}
onChange={handleGrundChange}
>
<MenuItem value={10}>Ausgabe</MenuItem>
<MenuItem value={20}>MHD</MenuItem>
<MenuItem value={30}>Zu viel Produziert</MenuItem>
</Select>
</FormControl>
</Grid>
<FormControl required className={classes.formControl}>
<Grid item xs={12}>
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<DatePicker
label="Datum"
value={datum}
format="dd/MM/yyyy"
onChange={handleDatumChange}
animateYearScrolling
/>
</MuiPickersUtilsProvider>
</Grid>
</FormControl>
</Grid>

<Button
// type="submit"
fullWidth
variant="contained"
color="primary"
preventDefault
className={classes.submit}
onClick={handleSubmit}
>
Save
</Button>
<Grid container justify="center">
<Grid item>
<Link to="/view">View Speisereste Records</Link>
</Grid>
</Grid>
<Grid container justify="center">
<Grid item>
<Link to="/help">View Help</Link>
</Grid>
</Grid>
<Typography style={{ margin: 7 }} variant="body1">
Status: {message}
</Typography>
</FormControl>
</div>
</Container>
);
}

在此处输入图像描述

在此处输入图像描述