React datetime format not working when sending date as url parameter to API

Question

i am trying to pass date time value as url parameter to backend java api , I am using GET method to send request. But at the api end i am getting only part of date time string, other part of date time string is cutting off.

my react code

  const handleStartDate = date => {
    setStartDate(date);
    const formattedDttm =  format(date, "dd.MM.yyyy H:mm:ss", { timeZone: "Asia/Kolkata" });
    console.log(formattedDttm);
   DataService.findByDttmOfSale(formattedDttm)
    .then(response => {
      Entry.price = response.data.price;
    }).catch(e => {
      if (e.response && e.response.data) {
        setMessage(e.response.data.message);
        setAlertHeading("Error!");
        setAlertVariant("danger");
        setShow(true);
        console.log(e.response.data.message); // some reason error message
      }
      console.log(e);
    });
  };

At java backend

@GetMapping("/FromDttmOfSale/{dttm_of_sale}")
public TestMO getFromDateTimeOfSale(@PathVariable(value = "dttm_of_sale") String 
 dateTimeOfSale) throws Exception {
    System.out.println(" get mo from date time of sale date value is = " + dateTimeOfSale);
    TestMO testMO = fuelService.getFuelPriceByDateTime(dateTimeOfSale);
    return testMO ;
}

the date i entered from react js is of format 11/10/2020 8:42 AM where as at backend i am getting only part of the date string as date time of sale date value is = 11.10

same where during conversion the date string is getting stripped off. i have tried changing the format also but getting same error

Answer 1

Might be better to pass the date as a string and then format it to date on the backend.

Answer 2

I had the same error and i solved it using two options, first using the moment library and the second that I consider better converting the date toISOString before sending it to the backend.

export async function getAssessmentsByDate(dateInit, dateEnd, clientId) {
  try {
    const response = await getApi().get(
      `/assessment/${clientId}?dateInit=${dateInit.toISOString()}&dateEnd=${dateEnd.toISOString()}`,
      {}
    );

    return response;
  } catch (error) {
    return { status: 400, message: 'Cant..' };
  }
}

In the backend (nodejs) I receive it this way. I recommend you validate the string before using it. It worked perfectly for me.

const getClientAssessmentByDate = async (req, res) => {
  try {
    const clientId = parseInt(req.params.id);
    const dateInit = req.query.dateInit;
    const dateEnd = req.query.dateEnd;
    /** .... */
   /** 3. find evaluations */
    const results = await AssessmentResult.findAll({
      where: {
        createdAt: {
          [Op.between]: [dateInit, dateEnd]
        }
      }
   })
    /** .... */
  } catch (e) {
    return res.status(500).send('error processing request');
  }
}

Answer 3

i have changed my date param from 11/10/2020 8:42 AM to 11 10 2020 8:42 AM and it started working. seems like there is limitation sending special characters in url