时间戳

首页 > 解决方案 > 没有时区的 React Material UI Datepicker

reactjs - 没有时区的 React Material UI Datepicker

问题描述

我正在尝试开发一个 React Material ui datepicker。它在mysql数据库中“发布”时区：2020-08-16T20:06:09.344Z

格式应该是这样的：16.08.2020

如何在 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>

标签： reactjs

解决方案

您可以使用 Javascript 日期对象：

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"));

推荐阅读