如何从formik datePicker将dateFormat发送到api

Question

我想将我的日期格式作为 dd-MM-yyyy 发送到 api，我可以让它在客户端显示正确的格式，但是当我将它发送到 api 时，我收到类似 yyyy-MM-ddThh :mm:ss 等等，但我只想要日期。

这就是我所拥有的：

import DatePicker from "react-datepicker";
export class AdminPage extends React.Component {
constructor(props){
    super(props);
    this.state = {
      initialValues: {
        dato: new Date()

      }
    };
  }
handleChange = date => {
        this.setState({
          dato: date
        });
      };
render(){
    let {initialValues} = this.state;
      return(
        <div>
          <h1 className="signupheader">Arbejds seddel</h1>
        <div>
          <Formik
              initialValues={initialValues}
              validationSchema={Yup.object().shape({
                dato: Yup.string().min(3, 'der skal flere tal på').required('husk at udfylde dato')
            })}
              onSubmit={(values, { setStatus, setSubmitting }) => {
                setStatus();
                fetch('https://nameless-ocean-57332.herokuapp.com/arbejdsseddel', {
                    method: 'post',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify(values)
                })
                .then((response) => (response.json()))
                .catch(error => console.log(error));
              }}


            >
            {({ values }) => {
            return(
               <Form>
                <div className="form-group">
                <label htmlFor="dato">
                    Dato<span className="req">*</span>
                  </label>
                  <DatePicker className='form-control' 
                    selected={this.state.dato}
                    onChange={dato => this.handleChange(dato)}
                    value={Selection}
                    dateFormat="dd-MM-yyyy"
                    withPortal
                    disabledKeyboardNavigation
                  />
                  </div>
                   <button type="submit" className="btn btn-primary" disabled={isSubmitting}>Send som E-mail</button>
                                {isSubmitting &&
                                    <img alt="" src="data:image/gif" />
                                }
                            </div>
                            {status &&
                                <div className={'alert alert-danger'}>{status}</div>
                            }
                              <button type="submit" className="btn btn-primary">Print</button>
                      </div>
                </Form>
                )
                }}
         </Formik>
         );
      }
}

所以我只希望 api 接收我的自定义格式而不是 iso 格式。

Answer 1

最简单的方法是修改您的 onSubmit 函数：

onSubmit={(values, { setStatus, setSubmitting }) => {
  const yourDate = values.dato;
  const yourFormattedDate =
    yourDate.getDate() +
    "-" +
    (yourDate.getMonth() + 1) +
    "-" +
    yourDate.getFullYear();
  const updatedValues = { ...values, dato: yourFormattedDate }
  setStatus();
  fetch("https://nameless-ocean-57332.herokuapp.com/arbejdsseddel", {
    method: "post",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(updatedValues)
  })
    .then(response => response.json())
    .catch(error => console.log(error));
}}

在将其发送到 API 之前，您需要以所需的方式对其进行重新格式化。当然，更优雅的方式是当您的 Datepicker 组件返回字符串但您没有提供任何有关它的信息时。

有时，当 API 需要一些奇怪的格式时，有时很难避免在将表单数据发送到后端之前对表单数据进行一些手动重新格式化。这是在onSubmit 函数中执行此操作的好方法。