|
@@ -0,0 +1,54 @@
|
|
|
+import React from "react";
|
|
|
+
|
|
|
+class DateTimeDisplay extends React.Component {
|
|
|
+ state = {
|
|
|
+ currentTime: "",
|
|
|
+ };
|
|
|
+ componentDidMount() {
|
|
|
+ this.timeInterval = setInterval(() => setState(new Date()), 1000);
|
|
|
+ return () => clearInterval(this.timeInterval);
|
|
|
+ }
|
|
|
+
|
|
|
+ componentWillUnmount() {
|
|
|
+ clearInterval(this.timeInterval);
|
|
|
+ }
|
|
|
+
|
|
|
+ formatDate = (date) => {
|
|
|
+ const year = date.getFullYear();
|
|
|
+ const month = `${date.getMonth() + 1}`.padStart(2, "0");
|
|
|
+ const day = `${date.getDate()}`.padStart(2, "0");
|
|
|
+ const weekdays = [
|
|
|
+ "星期日",
|
|
|
+ "星期一",
|
|
|
+ "星期二",
|
|
|
+ "星期三",
|
|
|
+ "星期四",
|
|
|
+ "星期五",
|
|
|
+ "星期六",
|
|
|
+ ];
|
|
|
+ return `${year}/${month}/${day} ${weekdays[date.getDay()]}`;
|
|
|
+ };
|
|
|
+
|
|
|
+ formatTime = (date) => {
|
|
|
+ const hours = `${date.getHours()}`.padStart(2, "0");
|
|
|
+ const minutes = `${date.getMinutes()}`.padStart(2, "0");
|
|
|
+ const seconds = `${date.getSeconds()}`.padStart(2, "0");
|
|
|
+ return `${hours}:${minutes}:${seconds}`;
|
|
|
+ };
|
|
|
+
|
|
|
+ render() {
|
|
|
+ const { currentTime } = this.state;
|
|
|
+ return (
|
|
|
+ <div className="bg-gray-900 text-white px-4 py-2 flex items-center justify-end rounded-r-lg font-mono">
|
|
|
+ <span className="text-blue-400 mr-2">
|
|
|
+ {this.formatDate(currentTime)}
|
|
|
+ </span>
|
|
|
+ <span className="text-white text-xl font-bold">
|
|
|
+ {this.formatTime(currentTime)}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+export default DateTimeDisplay;
|