reactjsdatetimeformat

How to change datetime to local timezone in Reactjs?


I am currently using data from Jikan Api. The datetime data is like this "broadcast": { "day": "Saturdays", "time": "01:53", "timezone": "Asia/Tokyo", "string": "Saturdays at 01:53 (JST)" }, is there anyway to change it into local time?

I searched across the web and found nothing like this. Mostly they are about formatting full datetime.


Solution

  • You can use a javaScript library called luxon. I made an example please check my stackblitz.

    import React, { useState, useEffect } from 'react';
    import { DateTime } from 'luxon';
    
    
    //you can replace this data to the one from API
    const jikanapiData = {
      data: {
        broadcast: {
          day: 'Saturdays',
          time: '01:53',
          timezone: 'Asia/Tokyo',
          string: 'Saturdays at 01:53 (JST)',
        },
      },
    };
    
    const dayMap = {
      Mondays: 1,
      Tuesdays: 2,
      Wednesdays: 3,
      Thursdays: 4,
      Fridays: 5,
      Saturdays: 6,
      Sundays: 7,
    };
    
    function App() {
      const getLocalBroadcastTime = () => {
        //convert day to weekday number in dayMap
        const broadcastWeekday = dayMap[jikanapiData.data.broadcast.day];
        if (!broadcastWeekday) return null;
    
        //get the current time from jikanapiData
        let now = DateTime.now().setZone(jikanapiData.data.broadcast.timezone);
        //reset time to midnight
        let broadcastDate = now.startOf('day');
    
        //match current weekdday number and broadcast weekday
        while (broadcastDate.weekday !== broadcastWeekday) {
          broadcastDate = broadcastDate.plus({ days: 1 });
          console.log(broadcastDate);
        }
    
        //set hour and minute from jikanapiData
        const [hour, minute] = jikanapiData.data.broadcast.time
          .split(':')
          .map(Number);
        //combine date and time for convering to local time
        const broadcastDateTime = broadcastDate.set({ hour, minute });
    
        //convert the result to the local timezone on your pc system
        return broadcastDateTime.setZone(
          Intl.DateTimeFormat().resolvedOptions().timeZone
        );
      };
    
      const localTime = getLocalBroadcastTime();
    
      return (
        <div className="App">
          <div>
            <strong>Local Broadcast Time: </strong>
            {localTime ? localTime.toFormat('cccc, hh:mm a') : 'Unknown'}
          </div>
        </div>
      );
    }
    export default App;