Moment 时间处理

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @icedesign/base@latest -S

Guide

moment.js 是一个 JavaScript 日期处理类库，用于解析、检验、操作、以及显示日期。本组件是 moment.js 的一个精简版，删掉了多余的 locale，留下主流的 locale 文案。具体用法参考 moment.js 的官方文档。

如果您不熟悉 moment.js ，强烈建议您先阅读官方的文档。

代码示例

基本

最简单的用法。

查看源码在线预览

import { moment } from "@icedesign/base";
class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      lang: "zh-cn"
    };
  }
  onChangeLang(e) {
    this.setState({
      lang: e.target.value
    });
  }
  render() {
    const { lang } = this.state;
    moment.locale(lang);
    return (
      <div>
        <select value={lang} onChange={this.onChangeLang.bind(this)}>
          <option value="none">none</option>
          <option value="en-us">en-us</option>
          <option value="ar">ar</option>
          <option value="de">de</option>
          <option value="es">es</option>
          <option value="fr">fr</option>
          <option value="hi">hi</option>
          <option value="it">it</option>
          <option value="ja">ja</option>
          <option value="ko">ko</option>
          <option value="pt">pt</option>
          <option value="ru">ru</option>
          <option value="zh-cn">zh-cn</option>
          <option value="zh-hk">zh-hk</option>
          <option value="zh-tw">zh-tw</option>
        </select>
        <br />
        <br />
        <h3>Format Dates</h3>
        <ul className="box">
          <li>
            <span className="code">
              moment().format('MMMM Do YYYY, h:mm:ss a');
            </span>
            <span className="display">
              //{moment().format("MMMM Do YYYY, h:mm:ss a")}
            </span>
          </li>
          <li>
            <span className="code">moment().format('dddd');</span>
            <span className="display">//{moment().format("dddd")}</span>
          </li>
          <li>
            <span className="code">moment().format("MMM Do YY");</span>
            <span className="display">//{moment().format("MMM Do YY")}</span>
          </li>
          <li>
            <span className="code">
              moment().format('YYYY [escaped] YYYY');
            </span>
            <span className="display">
              //{moment().format("YYYY [escaped] YYYY")}
            </span>
          </li>
          <li>
            <span className="code">moment().format();</span>
            <span className="display">//{moment().format()}</span>
          </li>
        </ul>
        <h3>Relative Time</h3>
        <ul className="box">
          <li>
            <span className="code">
              moment("20111031", "YYYYMMDD").fromNow();
            </span>
            <span className="display">
              //{moment("20111031", "YYYYMMDD").fromNow()}
            </span>
          </li>
          <li>
            <span className="code">moment().startOf('day').fromNow();</span>
            <span className="display">
              //{moment()
                .startOf("day")
                .fromNow()}
            </span>
          </li>
          <li>
            <span className="code">moment().endOf('day').fromNow();</span>
            <span className="display">
              //{moment()
                .endOf("day")
                .fromNow()}
            </span>
          </li>
          <li>
            <span className="code">moment().startOf('hour').fromNow();</span>
            <span className="display">
              //{moment()
                .startOf("hour")
                .fromNow()}
            </span>
          </li>
          <li>
            <span className="code">moment().format();</span>
            <span className="display">//{moment().format()}</span>
          </li>
        </ul>
        <h3>Calendar Time</h3>
        <ul className="box">
          <li>
            <span className="code">
              moment().subtract(10, 'days').calendar();
            </span>
            <span className="display">
              //{moment()
                .subtract(10, "days")
                .calendar()}
            </span>
          </li>
          <li>
            <span className="code">moment().calendar();</span>
            <span className="display">//{moment().calendar()}</span>
          </li>
          <li>
            <span className="code">moment().add(10, 'days').calendar();</span>
            <span className="display">
              //{moment()
                .add(10, "days")
                .calendar()}
            </span>
          </li>
        </ul>
        <h3>Multiple Locale Support</h3>
        <ul className="box">
          <li>
            <span className="code">moment.locale();</span>
            <span className="display">//{moment.locale()}</span>
          </li>
          <li>
            <span className="code">moment().format('LT');</span>
            <span className="display">//{moment().format("LT")}</span>
          </li>
          <li>
            <span className="code">moment().format('LLLL');</span>
            <span className="display">//{moment().format("LLLL")}</span>
          </li>
        </ul>
      </div>
    );
  }
}
ReactDOM.render(<Demo />, mountNode);

.box {
    list-style: none;
    border: 1px solid rgba(34,34,34,0.2);
    border-radius: 4px;
    color: #000;
    font-size: 14px;
    padding: 5px 8px;
    margin: 0 0 20px;
    line-height: 24px;
    background: rgba(34,34,34,0.03);
}
.code {
    display: inline-block;
    width: 50%;
}
.display {
    color: rgba(34,34,34,0.5);
}

相关区块

暂无相关区块