Material-ui DatePicker 汉化版

2019独角兽企业重金招聘Python工程师标准>>>

先引入DatePicker ,用了之后发现只有英文版的,然后就去看了一下源码,

发现有个叫DateTimeFormat的属性,需要传入一个function

import DatePicker from 'material-ui/DatePicker';

可以直接把源码里的这个function复制出来,

dateTimeFormat(locale, options) {
        this.format = function (date) {
            if (options.month === 'short' && options.weekday === 'short' && options.day === '2-digit') {
                return dayList[date.getDay()] + ', ' + monthList[date.getMonth()] + ' ' + date.getDate();
            } else if (options.year === 'numeric' && options.month === 'numeric' && options.day === 'numeric') {
                return date.getMonth() + 1 + '/' + date.getDate() + '/' + date.getFullYear();
            } else if (options.year === 'numeric' && options.month === 'long') {
                return monthLongList[date.getMonth()] + ' ' + date.getFullYear();
            } else if (options.weekday === 'narrow') {
                return dayAbbreviation[date.getDay()];
            } else if (options.year === 'numeric') {
                return date.getFullYear().toString();
            } else if (options.day === 'numeric') {
                return date.getDate();
            } else {
                process.env.NODE_ENV !== "production" ? (0, _warning2.default)(false, 'Material-UI: Wrong usage of DateTimeFormat') : void 0;
            }
        };
    }

然后只要改这个函数就可以了,把中文的元素注入进去

dateTimeFormat(locale, options) {
        var dayAbbreviation = ['日', '一', '二', '三', '四', '五', '六'];
        var dayList = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        var monthList = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
        var monthLongList = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
        this.format = function (date) {
            if (options.month === 'short' && options.weekday === 'short' && options.day === '2-digit') {
                return dayList[date.getDay()] + ', ' + monthList[date.getMonth()] + ' ' + date.getDate();
            } else if (options.year === 'numeric' && options.month === 'numeric' && options.day === 'numeric') {
                return date.getMonth() + 1 + '/' + date.getDate() + '/' + date.getFullYear();
            } else if (options.year === 'numeric' && options.month === 'long') {
                return monthLongList[date.getMonth()] + ' ' + date.getFullYear();
            } else if (options.weekday === 'narrow') {
                return dayAbbreviation[date.getDay()];
            } else if (options.year === 'numeric') {
                return date.getFullYear().toString();
            } else if (options.day === 'numeric') {
                return date.getDate();
            } else {
                process.env.NODE_ENV !== "production" ? (0, _warning2.default)(false, 'Material-UI: Wrong usage of DateTimeFormat') : void 0;
            }
        };
    }

最后再调用这个函数

<DatePicker DateTimeFormat={this.dateTimeFormat} />

ok,搞定啦,汉化版成功

转载于:https://my.oschina.net/codingBingo/blog/848441