美文网首页优美编程
Moment-基本概念篇

Moment-基本概念篇

作者: 小遁哥 | 来源:发表于2020-02-04 15:15 被阅读0次

    Moment.js 是一个强大到有些不正经的日期处理库。
    支持TS
    国际化,一些函数的输出会根据当前语言环境。
    高度自定义

    有了它只要后台不是自创的格式我们都可以解析,解析问题可见这篇文章
    在转换为文字上颇有门道
    本文将抛砖引玉,简单介绍一些基本概念和常用的API,方便日常工作时快速了解。

    默认

    Moment.js 会为 Date 对象创建封装器,而不是修改本地的 Date.prototype,Moment 原型通过 moment.fn 公开。 如果要添加自己的函数,则可以在其中放置它们。

    moment("15", "hh").format('YYYY-MM-DD HH:mm:ss');
    // "2020-02-04 15:00:00"
    

    可以创建一个 moment 对象,仅指定一些单位,其余的将会默认为当前的日期、月份、年份,小时、分钟、秒钟和毫秒默认为 0

    以对象形式指定:

    moment({hour: 5, minute: 10, seconds: 20}).format('YYYY-MM-DD HH:mm:ss');
    "2020-02-04 05:10:20"
    

    支持解析 hmm、Hmm、hmmss 和 Hmmss:

    moment("123", "hmm").format("HH:mm") === "01:23"
    moment("1234", "hmm").format("HH:mm") === "12:34"
    

    通过moment.defaultFormat 可以设置默认格式化方式

    默认的

    moment("15", "hh").format();
    //"2020-02-04T15:00:00+08:00"
    

    设置后

    moment.defaultFormat = "YYYY-MM-DD HH:mm:ss"
    moment("15", "hh").format();
    // "2020-02-04 15:00:00"
    

    所有的 moment 都是可变的。 如果想要克隆 moment,则可以隐式或显式地操作。

    在 moment 上调用 moment() 将会克隆它。

    var a = moment([2012]);
    var b = moment(a);
    a.year(2000);
    b.year(); // 2012
    

    通过clone

    var a = moment([2012]);
    var b = a.clone();
    a.year(2000);
    b.year(); // 2012
    

    Moment 的解析器非常宽松,使用时建议开启严格模式,及早发现问题

    开启前

    moment('2016 is a date', 'YYYY-MM-DD').format("YYYY-MM-DD HH:mm:ss");
    //"2016-01-01 00:00:00"
    

    开启后

    moment('2016 is a date', 'YYYY-MM-DD',true).format("YYYY-MM-DD HH:mm:ss");
    // "Invalid date"
    

    不带参数调用方法会作为取值,而带参数调用则会作为 赋值。

    moment().seconds();
    moment().seconds(50).format("YYYY-MM-DD HH:mm:ss");
    // "2020-02-04 11:14:50"
    

    如果数值超过当前单位,会向上一个单位冒泡哦

    moment().seconds(150).format("YYYY-MM-DD HH:mm:ss");
    // "2020-02-04 11:19:30"
    

    可以为负数

    moment().seconds(-50).format("YYYY-MM-DD HH:mm:ss");
    "2020-02-04 11:15:10"
    

    格式化

    format 链接

    key 意思 输出
    YY 年份 70 71 ... 29 30
    M 月份 1 2 ... 11 12
    D 日期 1 2 ... 30 31
    H 小时 0 1 ... 22 23
    h 小时 1 2 ... 11 12
    m 分钟 0 1 ... 58 59
    s 0 1 ... 58 59
    S 毫秒 0 1 ... 8 9
    d 星期 0 1 ... 5 6
    Q 季度 1 2 3 4
    A 子午线 AM PM
    a 子午线 am pm
    w 年份的星期 1 2 ... 52 53

    转义格式字符串中的字符

    moment().format('[今天] dddd');
     // '今天 Sunday'
    

    与当前时间的关系

    fromNow

    moment([2007, 0, 29]).fromNow(); 
    // "13 years ago"
    moment([2007, 0, 29]).fromNow(true); 
    // "13 years"
    
    moment().toNow()
    // "a few seconds ago"
    moment().toNow(Boolean);
    // "a few seconds"
    

    两个时间的关系

    var a = moment([2007, 0, 28]);
    var b = moment([2007, 0, 29]);
    a.from(b); 
    "a day ago"
    
    var a = moment([2007, 0, 28]);
    var b = moment([2007, 0, 29]);
    a.to(b)
    "in a day"
    

    calendar

    链接

    
    moment().calendar();
    // "Today at 2:37 PM"
    

    同时支持一些判定API isBeforeisSameisAfterisSameOrBeforeisSameOrAfterisBetween

    对于时长的描述

    moment.duration(1, "minutes").humanize();
    // "a minute"
    moment.duration(1, "minutes").humanize(true); 
    // "in a minute"
    

    对时间的操作

    moment().add(Number, String);
    moment().add(Duration);
    moment().add(Object);
    
    moment().add(7, 'd');
    

    减去API: subtract

    moment().startOf(String);
    
    moment().startOf('year');    // 设置为今年一月1日上午 12:00
    moment().startOf('month');   // 设置为本月1日上午 12:00
    

    结束API: endOf

    key 缩写
    years y
    quarters Q
    months M
    weeks w
    days d
    hours h
    minutes m
    seconds s
    milliseconds ms

    调试

    验证时间的有效性

    isValid()

    moment([2015, 25, 35]).isValid();
    // false
    

    parsingFlags 返回一个对象

    moment([2015, 25, 35]).parsingFlags();
    
    image.png

    通过invalidAt 确认那个单位无效

    moment([2015, 25, 35]).invalidAt();
    // 1
    
    数字 单位
    0 年份
    1 月份
    2 日期
    3 小时
    4 分钟
    5 秒钟
    6 毫秒

    得到创建moment时的输入

    moment("2013-01-02", "YYYY-MM-DD", true).creationData() 
    
    image.png

    转换

    得到js的Date 对象

    moment().toDate();
    

    得到数组形式

    moment().toArray();
    //[2020, 1, 4, 14, 3, 25, 481]
    

    得到对象形式

    moment().toObject();
    
    image.png

    时长

    链接

    默认毫秒

    moment.duration(100).milliseconds();
    // 100
    

    支持传单位

    moment.duration(2, 'seconds').seconds();
    

    更精确的转换

    moment.duration(15001).asSeconds(); 
    // 15.001
    
    key 缩写
    years y
    months M
    weeks w
    days d
    hours h
    minutes m
    seconds s
    milliseconds ms

    可直接传递对象

    moment.duration({
        seconds: 2,
        years: 2
    });
    

    支持传递字符串形式

    moment.duration('23:59:59');
    

    很对用于操作moment的API对duration也生效

    进阶

    解析字符串

    原文
    当从字符串创建 moment 时,需要首先检查字符串是否与已知的 ISO 8601 格式匹配,如果未找到已知的格式,则在降维到 new Date(string) 之前检查字符串是否与 RFC 2822 日期时间格式匹配,浏览器对于解析字符串的支持是不一致的

    webpack打包

    webpack 会打包所有的 Moment.js 语言环境,优化可看

    插件

    round 对时间四舍五入
    地址.

    m.round(5, 'seconds'); // 2015-06-18 15:30:20
    m.ceil(3, 'minutes'); // 2015-06-18 15:33:00
    m.floor(16, 'hours'); // 2015-06-18 00:00:00
    

    Moment-那些让人眼前一亮的API

    相关文章

      网友评论

        本文标题:Moment-基本概念篇

        本文链接:https://www.haomeiwen.com/subject/moalxhtx.html