如何将 dateFormat 从 formik datePicker 发送到 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 组件 return 字符串但您没有提供任何有关它的信息时。

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

如何将 dateFormat 从 formik datePicker 发送到 api

how to send the dateFormat to api from formik datePicker

datepicker

reactjs

formik