Moment.js中文文档系列之七日期时间的自定义(Customize)

 2015年10月30日    3529     声明


  1. 设置月份名months
  2. 设置月份名 (缩写) monthsShort
  3. 设置星期名weekdays
  4. 设置星期名 (缩写)weekdaysShort
  5. 设置星期名 (极简缩写)weekdaysMin
  6. 设置长日期格式longDateFormat
  7. 设置相对时间relativeTime
  8. 设置上午下午meridiem
  9. 上午下午解析meridiemParse
  10. 设置日历calendar
  11. 比较ordinal
  12. 相对时间临界值relativeTimeThreshold

Moment.js可以非常简单的进行自定义。一般情况下,你需要创建一个您要进行自定义的语言的配置。

moment.locale('en-my-settings', {
    // 配置.
});

当然,你也可对已经载入的现有语言进行修改。

moment.locale('en', {
    // 配置.
});

任何未定义的设置默认都将使用英语。

删除之前定义的语言,需要在第二个参数中传入null

moment.locale('fr'); // 'fr'
moment.locale('en'); // 'en'
moment.locale('fr', null);
moment.locale('fr'); // 'en'


1. 设置月份名months

// 2.8.1 之后
moment.locale('en', {
    months : String[]
});
moment.locale('en', {
    months : Function
});

// Deprecated in 2.8.1
moment.lang('en', {
    months : String[]
});
moment.lang('en', {
    months : Function
});

Locale#months要以数组形式提供月份名。

moment.locale('en', {
    months : [
        "January", "February", "March", "April", "May", "June", "July",
        "August", "September", "October", "November", "December"
    ]
});

如果你要对月份进行更多的处理(如,根据不同的语法提供不同的格式),Locale#months可以像下面这样做为一个函数提供,其返回值始终是月份名:

moment.locale('en', {
    months : function (momentToFormat, format) {
        // momentToFormat是要格式化的时间
        // format是格式化字符串
        if (/^MMMM/.test(format)) { // 如果格式化格式为 'MMMM'
            return nominative[momentToFormat.month()];
        } else {
            return subjective[momentToFormat.month()];
        }
    }
});


2. 设置月份名 (缩写) monthsShort

// 2.8.1 之后
moment.locale('en', {
    monthsShort : String[]
});
moment.locale('en', {
    monthsShort : Function
});

// 2.8.1 之前
moment.lang('en', {
    monthsShort : String[]
});
moment.lang('en', {
    monthsShort : Function
});

Locale#monthsShort要以数组形式提供缩写的月份名。

moment.locale('en', {
    monthsShort : [
        "Jan", "Feb", "Mar", "Apr", "May", "Jun",
        "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
    ]
});

Locale#months一样,Locale#monthsShort也可以做为一个回调函数。

moment.locale('en', {
    monthsShort : function (momentToFormat, format) {
        if (/^MMMM/.test(format)) {
            return nominative[momentToFormat.month()];
        } else {
            return subjective[momentToFormat.month()];
        }
    }
});


3. 设置星期名weekdays

// 2.8.1 之后
moment.locale('en', {
    weekdays : String[]
});
moment.locale('en', {
    weekdays : Function
});

// 2.8.1 之前
moment.lang('en', {
    weekdays : String[]
});
moment.lang('en', {
    weekdays : Function
});

Locale#weekdays要以数组形式提供星期名。

moment.locale('en', {
    weekdays : [
        "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"
    ]
});

Locale#weekdays也可以做为一个回调函数。

moment.locale('en', {
    weekdays : function (momentToFormat, format) {
        return weekdays[momentToFormat.day()];
    }
});


4. 设置星期名 (缩写)weekdaysShort

// 2.8.1 之后
moment.locale('en', {
    weekdaysShort : String[]
});
moment.locale('en', {
    weekdaysShort : Function
});

// 2.8.1 之前
moment.lang('en', {
    weekdaysShort : String[]
});
moment.lang('en', {
    weekdaysShort : Function
});

Locale#weekdaysShort要以数组形式提供缩写的星期名。

moment.locale('en', {
    weekdaysShort : ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
});

Locale#weekdaysShort也可以做为一个回调函数。

moment.locale('en', {
    weekdaysShort : function (momentToFormat, format) {
        return weekdaysShort[momentToFormat.day()];
    }
});


5. 设置星期名 (极简缩写)weekdaysMin

// 2.8.1 之后
moment.locale('en', {
    weekdaysMin : String[]
});
moment.locale('en', {
    weekdaysMin : Function
});

// 2.8.1 之前
moment.lang('en', {
    weekdaysMin : String[]
});
moment.lang('en', {
    weekdaysMin : Function
});

Locale#weekdaysMin要以数组形式提供两个字母缩写的星期名。这样设置是为了在日历等场景中使用时,可以显示的更友好。

moment.locale('en', {
    weekdaysMin : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
});

Locale#weekdaysMin也可以做为一个回调函数。

moment.locale('en', {
    weekdaysMin : function (momentToFormat, format) {
        return weekdaysMin[momentToFormat.day()];
    }
});


6. 设置长日期格式longDateFormat

// 2.8.1 之后
moment.locale('en', {
    longDateFormat : Object
});

// 2.8.1 之前
moment.lang('en', {
    longDateFormat : Object
});

Locale#longDateFormat应该是一个长日期格式键/值对的数组,格式包括:L LL LLL LLLL LT LTSLT应该是时间格式,其同样是在moment#calendar中使用。

moment.locale('en', {
    longDateFormat : {
        LT: "h:mm A",
        LTS: "h:mm:ss A",
        L: "MM/DD/YYYY",
        l: "M/D/YYYY",
        LL: "MMMM Do YYYY",
        ll: "MMM D YYYY",
        LLL: "MMMM Do YYYY LT",
        lll: "MMM D YYYY LT",
        LLLL: "dddd, MMMM Do YYYY LT",
        llll: "ddd, MMM D YYYY LT"
    }
});

你可以排除小写的l标识,它们会在替换长日期格式时根据短日期格式自动创建。

moment.locale('en', {
    longDateFormat : {
        LT: "h:mm A",
        LTS: "h:mm:ss A",
        L: "MM/DD/YYYY",
        LL: "MMMM Do YYYY",
        LLL: "MMMM Do YYYY LT",
        LLLL: "dddd, MMMM Do YYYY LT"
    }
});


7. 设置相对时间relativeTime

// 2.8.1 之后
moment.locale('en', {
    relativeTime : Object
});

// 2.8.1 之前
moment.lang('en', {
    relativeTime : Object
});

Locale#relativeTime应该是一个对象,用于替换moment#from字符串。

moment.locale('en', {
    relativeTime : {
        future: "in %s",
        past:   "%s ago",
        s:  "seconds",
        m:  "a minute",
        mm: "%d minutes",
        h:  "an hour",
        hh: "%d hours",
        d:  "a day",
        dd: "%d days",
        M:  "a month",
        MM: "%d months",
        y:  "a year",
        yy: "%d years"
    }
});

Locale#relativeTime.future是未来时间前缀/后缀的引用,Locale#relativeTime.past是过去时间前缀/后缀的引用。所有其它字符,单字符都是单数形式的引用,双字符是双数形式的引用。

如果语言需要对标识进行额外处理,可以像下面这样做为一个做为一个函数提供,其返回值是一个字符串。

function (number, withoutSuffix, key, isFuture) {
    return string;
}


8. 设置上午下午meridiem

// 2.8.1 之后
moment.locale('en', {
    meridiem : Function
});

// 2.8.1 之前
moment.lang('en', {
    meridiem : Function
});

如果你的语言中使用了am/pmLocale#meridiem可以忽略掉其它的设置。

如果你要对am/pm进行不同的计算,Locale#meridiem要以回调函数的形式提供,其返回值是一个包括小时、分钟和大小写的字符串。

moment.locale('zh-cn', {
    meridiem : function (hour, minute, isLowercase) {
        if (hour < 9) {
            return "早上";
        } else if (hour < 11 && minute < 30) {
            return "上午";
        } else if (hour < 13 && minute < 30) {
            return "中午";
        } else if (hour < 18) {
            return "下午";
        } else {
            return "晚上";
        }
    }
});


9. 上午下午解析meridiemParse

// 2.8.1 之后
moment.locale('en', {
    meridiemParse : RegExp
    isPM : Function
});

// 2.8.1 之前
moment.lang('en', {
    meridiemParse : RegExp
    isPM : Function
});

Locale#isP如果输入值在12点以后应该返回true。这通过a A标识转换。

moment.locale('en', {
    isPM : function (input) {
        return ((input + '').toLowerCase()[0] === 'p');
    }
});

通过meridiemParse属性可以设置哪种输入字符可以被转换。

moment.locale('en', {
    meridiemParse : /[ap]\.?m?\.?/i
});


10. 设置日历calendar

// 2.8.1 之后
moment.locale('en', {
    calendar : Object
});

// 2.8.1 之前
moment.lang('en', {
    calendar : Object
});

Locale#calendar应该像下面这样提供格式化字符串。

moment.locale('en', {
    calendar : {
        lastDay : '[Yesterday at] LT',
        sameDay : '[Today at] LT',
        nextDay : '[Tomorrow at] LT',
        lastWeek : '[last] dddd [at] LT',
        nextWeek : 'dddd [at] LT',
        sameElse : 'L'
    }
});

每个Locale#calendar配置值都可以以回调函数形式提供,返回值应是格式化字符串。

function () {
    return '[hoy a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
},


11. 比较ordinal

// 2.8.1 之后
moment.locale('en', {
    ordinal : Function
});

// 2.8.1 之前
moment.lang('en', {
    ordinal : Function
});

Locale#ordinal应是一个函数,返回值是比较后的序数。

moment.locale('en', {
    ordinal : function (number, token) {
        var b = number % 10;
        var output = (~~ (number % 100 / 10) === 1) ? 'th' :
            (b === 1) ? 'st' :
            (b === 2) ? 'nd' :
            (b === 3) ? 'rd' : 'th';
        return number + output;
    }
});


12.相对时间临界值relativeTimeThreshold

moment.relativeTimeThreshold(unit);  // getter
moment.relativeTimeThreshold(unit, limit);  // setter

Locale#ordinal是一个临界值,它会根据小时、分钟等单位来界定。例如,超过45秒会被认为是一分钟,超过22小时会被认为是一天。修改这些限定,使用moment.relativeTimeThreshold(unit, limit),其值是smhdM之一。

单位 含义 用法
s 超过指定秒后会被认为是一分钟
m l超过指定分后会被认为是一小时
h 小时 超过指定小时后会被认为是一天
d 超过指定天后会被认为是一月
M 超过指定月后会被认为是一年


  // 返回当前使用的临界值
  moment.relativeTimeThreshold('s');  // 45
  moment.relativeTimeThreshold('m');  // 45
  moment.relativeTimeThreshold('h');  // 22
  moment.relativeTimeThreshold('d');  // 26
  moment.relativeTimeThreshold('M');  // 11

  // 设置新的临界值
  moment.relativeTimeThreshold('s', 40);
  moment.relativeTimeThreshold('m', 40);
  moment.relativeTimeThreshold('h', 20);
  moment.relativeTimeThreshold('d', 25);
  moment.relativeTimeThreshold('M', 10);