wsclock_front/src/ClockDisp.js

import * as React from 'react';

import './ClockDisp.css';

class ClockDisp extends React.Component {
	
	constructor(props:{time:'', tzname:''}) {
		super(props)
		
	}

	render() {
		let date, time, offset;
		let year, month, day, hour, minute, second;

		date = this.props.time.substring(0,10)
		time = this.props.time.substring(11,19)
		offset = this.props.time.substring(19,this.props.time.length)

		year = date.substring(0,4)
		month = date.substring(5,7)
		day = date.substring(8,10)
		hour = time.substring(0,2)
		minute = time.substring(3,5)
		second = time.substring(6,8)

		document.title = time+offset
		return (<div className="ClockDisp">
				<p
					className="ClockTime"
				>
					<span
						className="ClockNumber ClockHour"
					>{hour}</span>
					<span
						className="ClockTimeSep"
					>:</span>
					<span
						className="ClockNumber ClockMinute"
					>{minute}</span>
					<span
						className="ClockTimeSep"
					>:</span>
					<span
						className="ClockNumber ClockSecond"
					>{second}</span>
				</p>
				<p className="ClockDate">{date}</p>
				<p className="ClockTz">{this.props.tzname} {offset}</p>
			</div>
		);
	}

}

export default ClockDisp;