Question

我正在尝试使用toTimeString（）方法以下列格式显示时间

13:45（没有秒，没有时区）

我想要做的就是破解该功能，以便在单独的中仅显示小时和分钟，以便我可以将:作为常规时钟添加到其中。

我为jQuerty网站，AngularJS，Typescript（Angular2）做了这个，但是我无法弄清楚如何在React中做到这一点

这是我现在的组件

import React from 'react';
import {Link, hashHistory} from 'react-router';
import FlatButton from 'material-ui/FlatButton';
import 'jquery-slimscroll/jquery.slimscroll.min';

class SidebarContent extends React.Component {

    constructor(props) {
        super(props);
        this.state = {date: new Date()};
    }

    componentWillUnmount() {
        clearInterval(this.timerID);
    }

    tick() {
        this.setState({
            date: new Date()
        });
    }

    componentDidMount() {

        this.timerID = setInterval(
            () => this.tick(),
            1000
        );
    }

    render() {

        return (
            <ul className="nav" ref={(c) => { this.nav = c;}}>
                <li className="city-row" ref="cityRow">
                    <p>{this.state.date.toTimeString('en-US', { hour12: false }).replace(/.*(\d{2}:\d{2}:\d{0}).*/, "$1")}</p>
                    <p>{this.state.date.toDateString()}</p>
                </li>
                  ...
                   nav stuff in here
                  ...
            </ul>
        );
    }
 }

 module.exports = SidebarContent;

这让我输出13:45:关闭，但不完全。我无法摆脱尾随的结肠，如果我把它拿出去消磨时间而不是几秒钟。只是一团糟

如何操作toTimeString方法只显示hh，然后只在单独的 or 中显示MM？

如果你有任何其他方法可以在没有toTimeString（）的情况下做到这一点，只要它使用了反应LifeCycle和所有的铃声和口哨，我就会对它开放。（请不要马虎乱砍）

这是使用toTimeString（）方法

的CODEPEN

提前致谢

Answer 1

如果你有任何其他方法没有toTimeString（）

是的，有getHours和getMinutes。您可以直接使用它们：

   var n = d.getHours() + ':'+ d.getMinutes();

getTime() {
 return this.state.date.getHours() + ':' + this.state.date.getMinutes() ;
}

render() {

    return (
        <ul className="nav" ref={(c) => { this.nav = c;}}>
            <li className="city-row" ref="cityRow">
                <p>{this.getTime()}</p>
                <p>{this.state.date.toDateString()}</p>
            </li>
              ...
               nav stuff in here
              ...
        </ul>
    );
}

Answer 2

Abdennours 的构建答案我写了以下内容，因为我有 2 次想要格式化，并且它还解决了小时时间显示为 :0 而不是 :00

toTimeString(date: Date) {
    return date.getHours() + ':' + date.getMinutes().toString().padStart(2, "0");
}

格式化toTimeString（）方法

2 个答案: