大写的React Live Clock AM PM不可见

Question

我正在使用React Live时钟并尝试使用的AM / PM模式，但是输出很小，显示为enter image description here

timeFormat ='h：mm：ss A';

Answer 1

如果您使用的是react-live-clock，则可以按照here所述设置 style 属性。

例如以下设置：

<Clock style={{fontSize: '10.5em'}}  format={'h:mm:ss A'} ticking={true} timezone={'US/Pacific'} />

生成了以下视图：

注意：

我将示例项目上传到了我的github仓库here；

关注README.MD文件，以获取有关如何在本地克隆和启动应用程序的详细信息。

祝你好运！

Answer 2

您可以添加一个函数来设置更改日期的格式，并将A和P分别设置为AM和PM。

var WithoutFormattingA = "8:11:35 A";
var WithoutFormattingP = "8:11:35 P";

function formatDate(unformattedDate) {
    var timeOfDay = unformattedDate.substr(unformattedDate.length - 1)

    if(timeOfDay === 'A' || timeOfDay === 'P') {
        return unformattedDate + "M";
    } else {
        return "Invalid date format.";
    }
}

ReactDOM.render(
  <div>
    <div>Formatted {WithoutFormattingA} to {formatDate(WithoutFormattingA)}</div>
    <div>Formatted {WithoutFormattingP} to {formatDate(WithoutFormattingP)}</div>
  </div>,
  document.getElementById("react")
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>