繁体   English   中英

用 emailjs 反应日期选择器

[英]react datepicker with emailjs

我做了预订表格。 我想使用日期选择器通过 email 发送预订时间。 所以我使用emailjs收到了预订信息,但时间不同。 我检查了控制台,没有问题,但是当我检查email时,又发送了一次。 这有什么问题?

import { React, useRef } from "react";
import { useForm, Controller } from "react-hook-form";
import emailjs from "@emailjs/browser";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

const Contact = () => {
  const form = useRef();
  const time = useRef();

  const { control } = useForm();
  const sendEmail = (e) => {

    const info = {
      name: form.current["name"].value,
      email: form.current["email"].value,
      phone: form.current["phone"].value,
      message: form.current["message"].value,
      size: form.current["size"].value,
      time: time.current.props.selected,
    };
    console.log("log name", form.current["name"].value);
    console.log("log email", form.current["email"].value);
    console.log("log phone", form.current["phone"].value);
    console.log("log message", form.current["message"].value);
    console.log("log size", form.current["size"].value);
    console.log("log time", time.current.props.selected);

    e.preventDefault();
    emailjs
      .send("serviceID", "templateID", info, "publicKey")
      .then(
        (result) => {
          console.log(result.status, result.text);
        },
        (error) => {
          console.log(error.status, error.text);
        }
      );
  };

  return (
    <section class="page-section" id="contact">
      <div class="container">
        <div class="text-center">
          <h2 class="section-heading text-uppercase">Reservation</h2>
        </div>

        <form id="contactForm" ref={form} onSubmit={sendEmail}>
          <div class="row align-items-stretch mb-5">
            <div class="col-md-6">
              <div class="form-group">
                <Controller
                  control={control}
                  name="time"
                  id="time"
                  render={({ field }) => (
                    <DatePicker
                      placeholderText="Select date"
                      onChange={(date) => field.onChange(date)}
                      selected={field.value}
                      showTimeSelect
                      dateFormat="Pp"
                      timeFormat="p"
                      //minDate={new Date()}
                      minDate={new Date()}
                      minTime={new Date().setHours(17, 0, 0, 0)}
                      maxTime={new Date().setHours(21, 0, 0, 0)}
                      ref={time}
                    />
                  )}
                />
              </div>

Web站点网站

控制台日志

控制台日志

Email,我得到了不同的时间
电子邮件

JavaScript 通常将本地时区转换为 UTC。 我认为这是在 api 中发送 UTC 时间的问题。你可以使用 momentjs 或者我已经分享了讨论,对于这个问题有很多解决方案。

参考这个..

JSON Stringify 由于 UTC 而更改日期时间

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM