javascript - How to convert Luxon DateTime format into string or numbers? - Stack Overflow

admin管理员组

文章数量:1435859

I am using the following code to set up a Luxon clock for my project use.

import { DateTime } from 'luxon';
import React, { useEffect, useState } from 'react';

interface IProps {
  timezone: string;
  format: string;
  calendar?: string;
  daysOffset?: number;
}

const LiveDateTime: React.FC<IProps> = ({
  timezone,
  daysOffset,
  format,
  calendar,
}) => {
  const [timeLive, setTimeLive] = useState<DateTime>(DateTime.local());

  useEffect(() => {
    const interval = setInterval(() => {
      setTimeLive(
        DateTime.local()
          .setZone(timezone)
          .reconfigure({ outputCalendar: calendar })
          .plus({ days: daysOffset })
      );
    }, 1000);

    return () => clearInterval(interval);
  }, [timezone]);

  return <span>{timeLive?.toFormat(format)}</span>;
}; 
export default LiveDateTime;

Now, I am using this ponent in another place to define the month# of the current date.

const month = <LiveDateTime timezone={place?.timezone} format="M" />; // This returns '12' as a number in the UI (for December)
console.log(month)
getData(month); //this functions is supposed to return some data based on the given month.
//I get an error instead on this line that says, 'Argument of type 'Element' is not assignable to parameter of type 'number'.

When I print this in the console, I get an entire react.element object. I need to be able to use '12' as a number (for December) in getData()for the month variable. How can I covert this object into a number type or string type if necessary? P.S. I tried using pareInt(). doesn't work.

I am using the following code to set up a Luxon clock for my project use.

import { DateTime } from 'luxon';
import React, { useEffect, useState } from 'react';

interface IProps {
  timezone: string;
  format: string;
  calendar?: string;
  daysOffset?: number;
}

const LiveDateTime: React.FC<IProps> = ({
  timezone,
  daysOffset,
  format,
  calendar,
}) => {
  const [timeLive, setTimeLive] = useState<DateTime>(DateTime.local());

  useEffect(() => {
    const interval = setInterval(() => {
      setTimeLive(
        DateTime.local()
          .setZone(timezone)
          .reconfigure({ outputCalendar: calendar })
          .plus({ days: daysOffset })
      );
    }, 1000);

    return () => clearInterval(interval);
  }, [timezone]);

  return <span>{timeLive?.toFormat(format)}</span>;
}; 
export default LiveDateTime;

Now, I am using this ponent in another place to define the month# of the current date.

const month = <LiveDateTime timezone={place?.timezone} format="M" />; // This returns '12' as a number in the UI (for December)
console.log(month)
getData(month); //this functions is supposed to return some data based on the given month.
//I get an error instead on this line that says, 'Argument of type 'Element' is not assignable to parameter of type 'number'.

When I print this in the console, I get an entire react.element object. I need to be able to use '12' as a number (for December) in getData()for the month variable. How can I covert this object into a number type or string type if necessary? P.S. I tried using pareInt(). doesn't work.

• javascript
• reactjs
• typescript
• next.js
• luxon

Share Improve this question Follow asked Dec 7, 2021 at 20:59 Redwan AhmedRedwan Ahmed 11544 silver badges99 bronze badges 1

• 1 You shouldn't be returning a ponent just to convert the time. There are plenty of libraries that already do the job such as date-fns, luxon, moment. Please feel free to choose the one that fits your use case and then convert the time in the ponent itself rather than creating a ponent to convert the time. – em_code Commented Dec 7, 2021 at 21:26

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Rather than having this logic in a React ponent, you should move it to a custom React hook instead. This allows you to easily reuse its return value however you like.

import { DateTime } from 'luxon';
import React, { useEffect, useState } from 'react';

const useLiveDataTime = ({
  timezone,
  daysOffset,
  format,
  calendar,
}: IProps) => {
  const [timeLive, setTimeLive] = useState<DateTime>(DateTime.local());

  useEffect(() => {
    const interval = setInterval(() => {
      setTimeLive(
        DateTime.local()
          .setZone(timezone)
          .reconfigure({ outputCalendar: calendar })
          .plus({ days: daysOffset })
      );
    }, 1000);

    return () => clearInterval(interval);
  }, [timezone]);

  return timeLive?.toFormat(format);
}; 

export default useLiveDataTime;

You can then retrieve the value as a string so you can pass it to other functions, or render it.

import React from 'react';
import useLiveDataTime from '<path-to>/use-live-date-time';

const SomeComponent: React.FC = () => {
    const month = useLiveDataTime({ timezone: 'Europe/London', format: 'M' });
    console.log(month);
    getData(month);

    return <span>{month}</span>;
};

As you're just using the month of the current time in the ponent you could just use
const month = DateTime.local().setZone(place?.timezone).toFormat('M')
adding a .reconfigure({ outputCalendar: calendar }) and/or .plus({ days: daysOffset }) if required

Even though I am still advocating my opinion that is in the ments, I totally respect if you want to continue the way you have chosen. Therefore, if you want to access the value of the ponent you can do so by calling the children which will hold the value in your case.

console.log(month.props.children) // will return 12 as string

本文标签： javascriptHow to convert Luxon DateTime format into string or numbersStack Overflow