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.
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;