时间戳

首页 > 解决方案 > 我不想保存的日期选择器返回时间

javascript - 我不想保存的日期选择器返回时间

问题描述

我正在按照这个 React 示例尝试一个最小的应用程序：https ://www.freecodecamp.org/news/react-and-googlesheets/

如何重现问题？ 我按照上面链接中的两个/三个说明创建了项目。这是：

npx create-react-app react-googlesheets

npm install semantic-ui-react semantic-ui-css

在以下位置添加以下内容index.js

import 'semantic-ui-css/semantic.min.css'

npm install axios

然后，我在我的 App.js 中使用了以下内容

import React, { useState } from 'react';
import { Button, Form, Container, Header } from 'semantic-ui-react';
import axios from 'axios';
import SemanticDatepicker from 'react-semantic-ui-datepickers'; //https://www.npmjs.com/package/react-semantic-ui-datepickers
import 'react-semantic-ui-datepickers/dist/react-semantic-ui-datepickers.css';
import TimePicker from 'react-time-picker'; //https://github.com/wojtekmaj/react-time-picker
// import DateTimePicker from 'react-datetime-picker'; //https://www.npmjs.com/package/react-datetime-picker
import './App.css';

function App() {
    // const [currentDate,onChange]=useState(new Date());
    const [currentDate, setNewDate] = useState(new Date());
    const onChange = (event, data) => setNewDate(data.value);
    const [getTime,setTime]=useState('10:00');

    const [meter1, setM1] = useState('');
    const [meter2, setM2] = useState('');
    const [meter3, setM3] = useState('');

    console.log(currentDate);
    const handleSubmit = (e) => {
        e.preventDefault();
        const objt = { currentDate,getTime,meter1,meter2,meter3 };

        axios
            .post(
                'https://sheet.best/api/sheets/xxx',
                objt
            )
            .then((response) => {
                console.log(response);
            });
    };

    return (
        <Container fluid className="container">
            <Header as="h2">Meter Reading Entry</Header>
            <Form className="form">
                <Form.Field>
                    <label>DateTime</label>
                     {/* <DateTimePicker 
                     onChange={currentDate} 
                     value={onChange} 
                     /> */}
                    <SemanticDatepicker 
                    onChange={onChange} 
                    value={currentDate} 
                    format="D/MMM/YY"
                    />
                    <TimePicker 
                    onChange={setTime} 
                    value={getTime}
                    />
                </Form.Field>
                <Form.Field>
                    <label>Meter1</label>
                    <input
                        placeholder="Enter Meter1 reading"
                        onChange={(e) => setM1(e.target.value)}
                    />
                </Form.Field>
                <Form.Field>
                    <label>Meter2</label>
                    <input
                        placeholder="Enter Meter2 reading"
                        onChange={(e) => setM2(e.target.value)}
                    />
                </Form.Field>
                <Form.Field>
                    <label>Meter3</label>
                    <input
                        placeholder="Enter Meter3 reading"
                        onChange={(e) => setM3(e.target.value)}
                    />
                </Form.Field>

                <Button color="blue" type="submit" onClick={handleSubmit}>
                    Submit
                </Button>
            </Form>
        </Container>
    );
}

export default App;

我使用了 Google 表格并通过http://sheet.best使其对 REST 友好，详细信息在上面的第一个链接中给出。

我在这里做的是：家庭仪表的输入系统，使用当前/自定义日期和时间保存。

现在，我的问题是当我保存日期时，它们看起来像乱码：2021-05-03T18:00:00.000Z

我使用了格式化程序，但这没有帮助。我在使用日期选择器时做错了什么？

标签： javascriptreactjsrestgoogle-sheetsdatepicker

解决方案

当您调用时axios.post- 您以 Date 类型发送currentDate，它使用Date.toString方法将其转换为字符串。默认情况下Date.toString使用完整的日期时间格式，包括时区。您应该在发送之前格式化日期，因为您希望在后端获取它。您可以自己进行格式化或使用像momentjs这样的库之一

这是一个示例（没有任何库）：

// ...
function myPrettyDateFormat(d) {
  const pureDateStr = d.toString().split('T')[0]
  const timeStr = `${d.getUTCHours()}:${d.getMinutes()}`
  return `${pureDateStr} ${timeStr}`
}

function App() {
    const [currentDate,onChange]=useState(new Date());
    // ....
    const handleSubmit = (e) => {
        e.preventDefault();
        const objt = { currentDate: myPrettyDateFormat(currentDate), getTime,meter1,meter2,meter3 };

        axios
            .post(
                'https://sheet.best/api/sheets/xxx',
                objt
            )
            .then((response) => {
                console.log(response);
            });
    };

推荐阅读