增加日历选择组件 review by 盖剑秋

@@ -3,6 +3,8 @@
 import React from 'react-native';
 import TrendTextSection from './TrendTextSection';
 import Placeholder from './Placeholder';
+import DateSelector from './calendar/DateSelector';
+import CalendarPicker from './calendar/CalendarPicker';
 
 let {
     Component,
@@ -33,16 +35,62 @@ export default class SaleStatistics extends Component {
         ),
     };
 
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            showPicker: false,
+            selectdDate: '2016-01-26',
+        };
+
+        this.toogleSelector = this.toogleSelector.bind(this);
+        this.onCancel = this.onCancel.bind(this);
+        this.onOK = this.onOK.bind(this);
+    }
+
+    toogleSelector() {
+        this.setState({
+            showPicker: !this.state.showPicker
+        });
+    }
+
+    onCancel() {
+        this.toogleSelector();
+    }
+
+    onOK(selected) {
+        let selectdDate;
+
+        if (selected.selectMode === 'day') {
+            let day = selected.day;
+            selectdDate = day.getFullYear() + '年' + (day.getMonth() + 1) + '月' + day.getDate() + '日';
+        } else if (selected.selectMode === 'week') {
+            let from = selected.from;
+            let to = selected.to;
+            selectdDate = from.getFullYear() + '年' + (from.getMonth() + 1) + '月' + from.getDate() + '日'
+                + '-' + to.getFullYear() + '年' + (to.getMonth() + 1) + '月' + to.getDate() + '日';
+        } else if (selected.selectMode === 'month') {
+            let year = selected.year;
+            selectdDate = selected.year + '年' + selected.month + '月';
+        }
+
+        this.setState({
+            showPicker: !this.state.showPicker,
+            selectdDate
+        });
+    }
+
 	render() {
 
         return (
             <ScrollView>
-
+                <DateSelector date={this.state.selectdDate} toogleSelector={this.toogleSelector} />
+                <Placeholder />
                 <TrendTextSection content={this.props.section1} />
                 <Placeholder />
                 <TrendTextSection content={this.props.section2} />
                 <Placeholder />
-
+                {this.state.showPicker ? <CalendarPicker onCancel={this.onCancel} onOK={this.onOK}/> : <View/>}
 
             </ScrollView>
         );

+'use strict';
+
+import React from 'react-native';
+const {
+    Component,
+    View,
+    Text,
+    TouchableOpacity,
+    StyleSheet,
+    Dimensions,
+} = React;
+
+import Month from './Month';
+import Year from './Year';
+
+console.disableYellowBox = true;
+
+let width = Dimensions.get('window').width - 20;
+
+export default class Calendar extends Component {
+    static defaultProps = {
+        onCancel: () => {
+
+        },
+
+        onOK: () => {
+
+        },
+
+        monthsLocale: ['1月', '2月', '3月', '4月', '5月', '6月',
+            '7月', '8月', '9月', '10月', '11月', '12月'],
+        weekDaysLocale: [ '日', '一', '二', '三', '四', '五', '六'],
+
+        width: width,
+
+        selectMode: 'week',
+
+        bodyBackColor: 'white',
+        bodyTextColor: 'black',
+        headerSepColor: 'grey',
+
+        dayCommonBackColor: 'white',
+        dayCommonTextColor: '#444444',
+
+        dayDisabledBackColor: 'white',
+        dayDisabledTextColor: '#B0B0B0',
+
+        daySelectedBackColor: '#FD9D2B',
+        daySelectedTextColor: '#444444',
+
+        dayInRangeBackColor: '#FD9D2B',
+        dayInRangeTextColor: '#444444'
+    };
+
+    static propTypes = {
+        selectFrom: React.PropTypes.instanceOf(Date),
+        selectTo: React.PropTypes.instanceOf(Date),
+
+        monthsCount: React.PropTypes.number,
+
+        monthsLocale: React.PropTypes.arrayOf(React.PropTypes.string),
+        weekDaysLocale: React.PropTypes.arrayOf(React.PropTypes.string),
+        startFromMonday: React.PropTypes.bool,
+
+        onCancel: React.PropTypes.func,
+        onOK: React.PropTypes.func,
+
+        width: React.PropTypes.number,
+
+        selectMode: React.PropTypes.oneOf(['day', 'week', 'month']),
+
+        bodyBackColor: React.PropTypes.string,
+        bodyTextColor: React.PropTypes.string,
+        headerSepColor: React.PropTypes.string,
+
+        dayCommonBackColor: React.PropTypes.string,
+        dayCommonTextColor: React.PropTypes.string,
+
+        dayDisabledBackColor: React.PropTypes.string,
+        dayDisabledTextColor: React.PropTypes.string,
+
+        daySelectedBackColor: React.PropTypes.string,
+        daySelectedTextColor: React.PropTypes.string,
+
+        dayInRangeBackColor: React.PropTypes.string,
+        dayInRangeTextColor: React.PropTypes.string
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.changeSelection = this.changeSelection.bind(this);
+        this.generateMonth = this.generateMonth.bind(this);
+        this.prevMonth = this.prevMonth.bind(this);
+        this.nextMonth = this.nextMonth.bind(this);
+
+        let {selectMode, selectFrom, selectTo, monthsCount} = this.props;
+
+        this.selected = {
+            selectMode: selectMode,
+            from: null,
+            to: null,
+            day: null,
+            week: 0,
+            month: 0,
+            year: 0,
+        };
+
+        this.selectMode = selectMode;
+        this.month = this.generateMonth(new Date());
+        this.weeksInMonth = this.generateWeeks(new Date());
+        this.monthsInYear = this.generateMonthsInYear(new Date());
+        this.currentYear = new Date().getFullYear();
+
+        this.state = {
+            selectMode: this.selectMode,
+            month: this.month,
+            weeksInMonth: this.weeksInMonth,
+            monthsInYear: this.monthsInYear,
+        }
+    }
+
+    componentWillReceiveProps(nextProps) {
+        this.selectMode = nextProps.selectMode;
+        this.month = this.generateMonth(this.state.month[15].date);
+        this.weeksInMonth = this.generateWeeks(this.state.month[15].date);
+        this.monthsInYear = this.generateMonthsInYear(this.state.month[15].date);
+        this.setState({
+            selectMode: this.selectMode,
+            month: this.month,
+            weeksInMonth: this.weeksInMonth,
+            monthsInYear: this.monthsInYear,
+        });
+    }
+
+    generateMonth(currentDate) {
+        let month = this.getDates(currentDate, this.props.startFromMonday);
+
+        month = month.map((day, i) => {
+            return {
+                date: day,
+                status: 'common',
+                disabled: day.getMonth() !== currentDate.getMonth() || day > Date.now(),
+                belongWeek: Math.floor(i / 7) + 1,
+                first: false,
+                last: false,
+            }
+        });
+
+        return month;
+    }
+
+    getDates(month, startFromMonday) {
+        month = new Date(month);
+        month.setDate(1);
+
+        var delta = month.getDay();
+        if (startFromMonday) {
+            delta--;
+            if (delta === -1) delta = 6;
+        }
+
+        var startDate = new Date(month);
+        startDate.setDate(startDate.getDate() - delta);
+
+        month.setMonth(month.getMonth() + 1);
+        month.setDate(0);
+
+        delta = 6 - month.getDay();
+        if (startFromMonday) {
+            delta++;
+            if (delta === 7) delta = 0;
+        }
+
+        var lastDate = new Date(month);
+        lastDate.setDate(lastDate.getDate() + delta);
+
+        var allDates = [];
+        while (startDate <= lastDate) {
+            allDates.push(new Date(startDate));
+            startDate.setDate(startDate.getDate() + 1);
+        }
+        return allDates;
+    }
+
+    generateWeeks(date) {
+
+        let weeksNum = Math.ceil(this.month.length / 7);    //月份的周数
+
+        let monthWeeks = [];
+        for (let i = 0; i < weeksNum; i++) {
+            monthWeeks[i] = i + 1;
+        }
+
+        monthWeeks = monthWeeks.map((week) => {
+            let disabled = this.selectMode === 'week' ? false : true;
+            return {
+                week: week,
+                status: 'common',
+                disabled: disabled,
+                first: false,
+                last: false,
+            }
+        });
+
+        return monthWeeks;
+    }
+
+    generateMonthsInYear(date) {
+        let monthsInYear = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+        monthsInYear = monthsInYear.map((month) => {
+            let disabled = false;
+            // let earlierYear = date.getFullYear() > new Date().getFullYear();
+            //
+            // if (earlierYear) {
+            //     let earlierMonth = date.getMonth() > new Date().getMonth();
+            //     disabled = earlierMonth ? true : false;
+            // } else {
+            //     disabled = false;
+            // }
+            return {
+                month: month,
+                status: 'common',
+                disabled: disabled,
+            }
+        });
+
+        return monthsInYear;
+    }
+
+    changeSelection(value) {
+        this.selected.selectMode = this.state.selectMode;
+
+        if (this.state.selectMode === 'week') {
+            this.selectWeek(value);
+        }
+
+        if (this.state.selectMode === 'day') {
+            this.selectDay(value);
+        }
+
+        if (this.state.selectMode === 'month') {
+            this.selectMonth(value);
+        }
+    }
+
+    selectDay(value) {
+        let {date} = value;
+        let {month} = this;
+        month = month.map((item) => {
+            let status = item.date.toDateString() === date.toDateString() ? 'selected' : 'common';
+            let first = item.date.toDateString() === date.toDateString() ? true : false;
+            let last = item.date.toDateString() === date.toDateString() ? true : false;
+            return {
+                date: item.date,
+                status: status,
+                disabled: item.disabled,
+                belongWeek: item.belongWeek,
+                first,
+                last,
+            };
+        });
+
+        this.selected.day = date;
+
+        this.month = month;
+
+        this.setState({
+            month: this.month,
+            weeksInMonth: this.weeksInMonth,
+        });
+    }
+
+    selectWeek(value) {
+        let {belongWeek} = value;
+        let {month, weeksInMonth} = this;
+
+        weeksInMonth = weeksInMonth.map((item) => {
+            let status = item.week === belongWeek ? 'selected' : 'common';
+            let first = item.week === belongWeek ? true : false;
+            return {
+                week: item.week,
+                status: status,
+                disabled: item.disabled,
+                first: first,
+                last: false,
+            };
+        });
+
+        let currentWeekDays = month.filter((day) => {
+            return day.belongWeek === belongWeek;
+        });
+
+        let firstDay = currentWeekDays[0];
+        let lastDay = currentWeekDays[currentWeekDays.length - 1];
+
+        month = month.map((day) => {
+            let status = day.belongWeek === belongWeek ? 'selected' : 'common';
+            // let first = day.date.toDateString() === firstDay.date.toDateString() ? true : false;
+            let last = day.date.toDateString() === lastDay.date.toDateString() ? true : false;
+            return {
+                date: day.date,
+                status: status,
+                disabled: day.disabled,
+                belongWeek: day.belongWeek,
+                first: false,
+                last,
+            };
+        });
+
+        this.selected.week = belongWeek;
+        this.selected.from = firstDay.date;
+        this.selected.to = lastDay.date
+
+        this.month = month;
+        this.weeksInMonth = weeksInMonth;
+
+        this.setState({
+            month: this.month,
+            weeksInMonth: this.weeksInMonth,
+        });
+    }
+
+    selectMonth(value) {
+        let {month} = value;
+        let {monthsInYear} = this;
+        monthsInYear = monthsInYear.map((item) => {
+            let status = item.month == month ? 'selected' : 'common';
+            return {
+                month: item.month,
+                status: status,
+                disabled: item.disabled,
+            };
+        });
+
+        this.selected.month = month;
+        this.selected.year = this.currentYear;
+
+        this.monthsInYear = monthsInYear;
+        this.setState({
+            monthsInYear: this.monthsInYear,
+        });
+    }
+
+    prevMonth() {
+        if (this.state.selectMode === 'month') {
+            this.currentYear -= 1;
+            this.updateMonthInYear(new Date(this.currentYear, 5, 1));
+
+        } else {
+            let middleDay = this.state.month[15].date;
+            let currentMonth = middleDay.getMonth();
+            let prevMonthDate = new Date(middleDay.setMonth(currentMonth - 1));
+
+            this.updateWeekAndMonth(prevMonthDate);
+        }
+    }
+
+    nextMonth() {
+        if (this.state.selectMode === 'month') {
+            this.currentYear += 1;
+            this.updateMonthInYear(new Date(this.currentYear, 5, 1));
+
+        } else {
+            let middleDay = this.state.month[15].date;
+            let currentMonth = middleDay.getMonth();
+            let nextMonthDate = new Date(middleDay.setMonth(currentMonth + 1));
+
+            this.updateWeekAndMonth(nextMonthDate);
+        }
+    }
+
+    updateMonthInYear(date) {
+        this.monthsInYear = this.generateMonthsInYear(date);
+        this.setState({
+            monthsInYear: this.monthsInYear,
+        });
+    }
+
+    updateWeekAndMonth(date) {
+        this.month = this.generateMonth(date);
+        this.weeksInMonth = this.generateWeeks(date);
+        this.setState({
+            month: this.month,
+            weeksInMonth: this.weeksInMonth,
+        });
+    }
+
+    renderContent() {
+        return (
+            <Month
+                {...this.props}
+                days={this.state.month}
+                style={styles.month}
+                changeSelection={this.changeSelection}
+                weeks={this.state.weeksInMonth}
+                months={this.state.monthsInYear}
+                year={this.currentYear}
+                prevMonth={this.prevMonth}
+                nextMonth={this.nextMonth}
+            />
+        );
+    }
+
+    renderButton() {
+        return (
+            <View style={styles.buttonContainer}>
+                <TouchableOpacity onPress={() => {this.props.onCancel()}} style={styles.button}>
+                    <Text style={[styles.text, styles.cancelText]}>
+                        取消
+                    </Text>
+                </TouchableOpacity>
+                <View style={styles.seprator} />
+                <TouchableOpacity onPress={() => {this.props.onOK(this.selected)}} style={styles.button}>
+                    <Text style={styles.text}>
+                        确定
+                    </Text>
+                </TouchableOpacity>
+            </View>
+        );
+    }
+
+    render() {
+        return (
+            <View>
+                {this.renderContent()}
+                {this.renderButton()}
+            </View>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    listViewContainer: {
+        backgroundColor: 'white',
+        alignSelf: 'center',
+        transform: [{scaleY: -1}]
+    },
+    month: {
+        // transform: [{scaleY: -1}]
+    },
+    buttonContainer: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderTopWidth: 1,
+        borderTopColor: '#B0B0B0',
+    },
+    button: {
+        width: width / 2,
+        height: 35,
+    },
+    text: {
+        paddingTop: 10,
+        height: 35,
+        fontSize: 14,
+        color: '#444444',
+        textAlign: 'center',
+    },
+    seprator: {
+        width: 1,
+        height: 35,
+        backgroundColor: '#B0B0B0',
+    },
+});

+'use strict';
+
+import React from 'react-native';
+import DateType from './DateType';
+import Calendar from './Calendar';
+
+const {
+    Component,
+    StyleSheet,
+    TouchableOpacity,
+    View,
+    Text
+} = React;
+
+export default class CalendarPicker extends Component {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            selectedType: 'day',
+        };
+
+        this.onSelect = this.onSelect.bind(this);
+        this.onCancel = this.onCancel.bind(this);
+        this.onOK = this.onOK.bind(this);
+    }
+
+    onSelect(selectedType) {
+        this.setState({
+            selectedType
+        });
+    }
+
+    onCancel() {
+        this.props.onCancel && this.props.onCancel();
+    }
+
+    onOK(selected) {
+        this.props.onOK && this.props.onOK(selected);
+    }
+
+    render() {
+        return (
+            <View style={styles.container}>
+                <DateType selectedType={this.state.selectedType} onSelect={this.onSelect} />
+                <Calendar
+                    startFromMonday={true}
+                    selectMode={this.state.selectedType}
+                    onCancel={this.onCancel}
+                    onOK={this.onOK}
+                />
+            </View>
+        );
+    }
+}
+
+let styles = StyleSheet.create({
+    container: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        position: 'absolute',
+        top: 45,
+        left: 0,
+        right: 0,
+        backgroundColor: 'white',
+        opacity: 0.96,
+    },
+    calendarContainer: {
+
+    },
+});

+'use strict';
+
+import React from 'react-native';
+const {
+    Component,
+    StyleSheet,
+    TouchableOpacity,
+    Text,
+    Image,
+} = React;
+
+export default class DateSelector extends Component {
+
+    static propTypes = {
+        date: React.PropTypes.string.isRequired,
+        toogleSelector: React.PropTypes.func,
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.onPress = this.onPress.bind(this);
+    }
+
+    onPress() {
+        this.props.toogleSelector && this.props.toogleSelector();
+    }
+
+    render() {
+
+        return (
+            <TouchableOpacity
+                activeOpacity={0.5}
+                style={styles.container}
+                onPress={this.onPress}>
+                <Text style={styles.text}>{this.props.date}</Text>
+                <Image source={require('./date.png')} style={styles.thumb} />
+            </TouchableOpacity>
+        );
+    }
+}
+
+let styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'white',
+        height: 45,
+    },
+    text: {
+        fontSize: 14,
+        color: '#444444',
+        textAlign: 'center',
+    },
+    thumb: {
+        left: 5,
+        width: 15,
+        height: 15,
+    },
+});

+'use strict';
+
+import React from 'react-native';
+const {
+    Component,
+    StyleSheet,
+    TouchableOpacity,
+    View,
+    Text,
+    Dimensions,
+} = React;
+
+export default class DateType extends Component {
+
+    static propTypes = {
+        selectedType: React.PropTypes.oneOf(['day', 'week', 'month']).isRequired,
+        onSelect: React.PropTypes.func,
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.items = [{
+            type: 'day',
+            text: '日',
+        },
+        {
+            type: 'week',
+            text: '周',
+        },{
+            type: 'month',
+            text: '月',
+        }];
+
+        this.onSelect = this.onSelect.bind(this);
+    }
+
+    onSelect(type) {
+        this.props.onSelect && this.props.onSelect(type);
+    }
+
+    render() {
+
+        return (
+            <View style={styles.container}>
+                <View style={styles.seprator1} />
+                <View style={styles.seprator2} />
+                {this.items.map((item, i) => {
+                    let color = item.type === this.props.selectedType ? styles.selectText : styles.normalText;
+                    return (
+                        <TouchableOpacity key={i} onPress={() => this.onSelect(item.type)}>
+                            <Text style={[styles.text, color]}>{item.text}</Text>
+                        </TouchableOpacity>
+                    );
+                })}
+
+                <View style={styles.seprator3} />
+                <View style={styles.seprator4} />
+
+            </View>
+        );
+    }
+}
+
+let {width, height} = Dimensions.get('window');
+
+let styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'white',
+        height: 45,
+    },
+    text: {
+        fontSize: 14,
+        textAlign: 'center',
+        width: width / 3,
+    },
+    normalText: {
+        color: '#B0B0B0',
+    },
+    selectText: {
+        color: '#444444',
+    },
+    seprator1: {
+        width: width,
+        height: 1,
+        backgroundColor: '#B0B0B0',
+        position: 'absolute',
+    },
+    seprator2: {
+        width: width,
+        height: 1,
+        top: 44,
+        backgroundColor: '#B0B0B0',
+        position: 'absolute',
+    },
+    seprator3: {
+        width: 1,
+        height: 15,
+        top: 15,
+        left: width / 3,
+        backgroundColor: '#B0B0B0',
+        position: 'absolute',
+    },
+    seprator4: {
+        width: 1,
+        height: 15,
+        top: 15,
+        left: width * 2 / 3,
+        backgroundColor: '#B0B0B0',
+        position: 'absolute',
+    },
+});

+'use strict';
+
+import React from 'react-native';
+const {
+    Component,
+    StyleSheet,
+    TouchableOpacity,
+    Text
+} = React;
+
+export default class Day extends Component {
+    render() {
+        let {date, status, disabled, onDayPress, width, belongWeek, first, last} = this.props;
+        let onPress, textColor, backColor;
+
+        if (disabled) {
+            status = 'disabled';
+            onPress = null;
+        } else {
+            onPress = () => {
+                onDayPress({
+                    date,
+                    belongWeek,
+                });
+            }
+        }
+
+        let borderTopLeftRadius = first ? 5 : 0;
+        let borderBottomLeftRadius = first ? 5 : 0;
+        let borderTopRightRadius = last ? 5 : 0;
+        let borderBottomRightRadius = last ? 5 : 0;
+
+        switch (status) {
+            case 'disabled':
+                backColor = this.props.dayDisabledBackColor;
+                textColor = this.props.dayDisabledTextColor;
+                break;
+
+            case 'common':
+                backColor = this.props.dayCommonBackColor;
+                textColor = this.props.dayCommonTextColor;
+                break;
+
+            case 'selected':
+                backColor = this.props.daySelectedBackColor;
+                textColor = this.props.daySelectedTextColor;
+                break;
+
+            case 'inRange':
+                backColor = this.props.dayInRangeBackColor;
+                textColor = this.props.dayInRangeTextColor;
+                break;
+        }
+
+        return (
+            <TouchableOpacity
+                activeOpacity={disabled ? 1 : 1}
+                style={[styles.common, {backgroundColor: backColor, width: width / 8, height: width / 8, borderTopLeftRadius, borderBottomLeftRadius,borderTopRightRadius, borderBottomRightRadius}]}
+                onPress={onPress}>
+                <Text style={{color: textColor}}>{date.getDate()}</Text>
+            </TouchableOpacity>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    common: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'white',
+    }
+});

+'use strict';
+
+import React from 'react-native';
+const {
+    Component,
+    View,
+    StyleSheet,
+    TouchableOpacity,
+    Text,
+    Image,
+} = React;
+
+import Day from './Day';
+import Week from './Week';
+import Year from './Year';
+
+export default class Month extends Component {
+    constructor(props) {
+        super(props);
+
+        this.onPressPrev = this.onPressPrev.bind(this);
+        this.onPressNext = this.onPressNext.bind(this);
+
+        this.weekDaysLocale = props.weekDaysLocale.slice();
+
+        if (props.startFromMonday) {
+            this.weekDaysLocale.push(this.weekDaysLocale.shift());
+        }
+
+    }
+
+    onPressPrev() {
+        this.props.prevMonth && this.props.prevMonth();
+    }
+
+    onPressNext() {
+        this.props.nextMonth && this.props.nextMonth();
+    }
+
+    renderContent() {
+        let {
+            days, weeks, months, changeSelection, style, monthsLocale,
+            bodyBackColor, bodyTextColor, headerSepColor, width
+        } = this.props;
+
+        if (this.props.selectMode === 'month') {
+            return (
+                <View style={styles.monthContainer}>
+                    <View style={styles.monthDays}>
+                        {months.map((month, i) => {
+                            return (
+                                <Year
+                                    key={i}
+                                    {...this.props}
+                                    disabled={month.disabled}
+                                    status={month.status}
+                                    month={month.month}
+                                    onMonthPress={changeSelection}
+                                />
+                            );
+                        })}
+                    </View>
+                </View>
+            );
+        } else {
+            return (
+                <View style={styles.monthContainer}>
+                    <View style={styles.monthWeeks}>
+                        <View style={[styles.weekDay, {borderColor: headerSepColor, width: width / 8, height: width / 8}]}>
+                            <Text style={{color: bodyTextColor}}>周</Text>
+                        </View>
+                        {weeks.map((week, i) => {
+                            return (
+                                <Week
+                                    key={i}
+                                    {...this.props}
+                                    disabled={week.disabled}
+                                    status={week.status}
+                                    week={week.week}
+                                    first={week.first}
+                                    onWeekPress={changeSelection}
+                                />
+                            );
+                        })}
+                    </View>
+
+                    <View style={styles.monthDays}>
+                        {this.weekDaysLocale.map((dayName, i) => {
+                            return (
+                                <View key={i} style={[styles.weekDay, {borderColor: headerSepColor, width: width / 8, height: width / 8}]}>
+                                    <Text style={{color: bodyTextColor}}>{dayName}</Text>
+                                </View>
+                            );
+                        })}
+                        {days.map((day, i) => {
+                            return (
+                                <Day
+                                    key={i}
+                                    {...this.props}
+                                    disabled={day.disabled}
+                                    status={day.status}
+                                    date={day.date}
+                                    belongWeek={day.belongWeek}
+                                    first={day.first}
+                                    last={day.last}
+                                    onDayPress={changeSelection}
+                                />
+                            );
+                        })}
+                    </View>
+                </View>
+            );
+        }
+    }
+
+    render() {
+        let {
+            year, days, weeks, changeSelection, style, monthsLocale,
+            bodyBackColor, bodyTextColor, headerSepColor, width
+        } = this.props;
+
+        let monthHeader = days[15].date.getFullYear() + '年' + monthsLocale[days[15].date.getMonth()];
+        if (this.props.selectMode === 'month') {
+            monthHeader = year + '年';
+        }
+
+        return (
+            <View style={[style, {width: width, backgroundColor: bodyBackColor}]}>
+
+                <View style={styles.headerContainer}>
+                    <TouchableOpacity onPress={this.onPressPrev}>
+                        <Image source={require('./date.png')} resizeMode={'contain'} style={styles.headerThumb}/>
+                    </TouchableOpacity>
+                    <Text style={[styles.monthHeader, {color: bodyTextColor}]}>
+                        {monthHeader}
+                    </Text>
+                    <TouchableOpacity onPress={this.onPressNext}>
+                        <Image source={require('./date.png')} resizeMode={'contain'} style={styles.headerThumb}/>
+                    </TouchableOpacity>
+                </View>
+
+
+
+                    {this.renderContent()}
+
+
+            </View>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    headerContainer: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: 45,
+    },
+    headerThumb: {
+        width: 20,
+        height: 15,
+    },
+    monthHeader: {
+        width: 100,
+        fontSize: 14,
+        textAlign: 'center',
+    },
+    monthContainer: {
+        flexDirection: 'row',
+        flexWrap: 'wrap'
+    },
+    monthWeeks: {
+        flexDirection: 'column',
+        flexWrap: 'wrap',
+        flex: 1,
+    },
+    monthDays: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        flex: 7,
+    },
+    weekDay: {
+        borderBottomWidth: 0,
+        justifyContent: 'center',
+        alignItems: 'center'
+    }
+});

+'use strict';
+
+import React from 'react-native';
+const {
+    Component,
+    StyleSheet,
+    TouchableOpacity,
+    Text
+} = React;
+
+export default class Day extends Component {
+    render() {
+        let {week, status, disabled, onWeekPress, width, first} = this.props;
+        let onPress, textColor, backColor;
+
+        if (disabled) {
+            status = 'disabled';
+            onPress = null;
+        } else {
+            onPress = () => {
+                onWeekPress({
+                    belongWeek: week,
+                });
+            }
+        }
+
+        let borderTopLeftRadius = first ? 5 : 0;
+        let borderBottomLeftRadius = first ? 5 : 0;
+
+        switch (status) {
+            case 'disabled':
+                backColor = this.props.dayDisabledBackColor;
+                textColor = this.props.dayDisabledTextColor;
+                break;
+
+            case 'common':
+                backColor = this.props.dayCommonBackColor;
+                textColor = this.props.dayCommonTextColor;
+                break;
+
+            case 'selected':
+                backColor = this.props.daySelectedBackColor;
+                textColor = this.props.daySelectedTextColor;
+                break;
+
+            case 'inRange':
+                backColor = this.props.dayInRangeBackColor;
+                textColor = this.props.dayInRangeTextColor;
+                break;
+        }
+
+        return (
+            <TouchableOpacity
+                activeOpacity={disabled ? 1 : 1}
+                style={[styles.common, {backgroundColor: backColor, width: width / 8, height: width / 8, borderTopLeftRadius, borderBottomLeftRadius}]}
+                onPress={onPress}>
+                <Text style={{color: textColor}}>{week}</Text>
+            </TouchableOpacity>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    common: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'white'
+    }
+});

+'use strict';
+
+import React from 'react-native';
+const {
+    Component,
+    StyleSheet,
+    TouchableOpacity,
+    Text
+} = React;
+
+export default class Year extends Component {
+    render() {
+        let {onMonthPress, width, disabled, status, month} = this.props;
+        let onPress, textColor, backColor;
+
+        if (disabled) {
+            status = 'disabled';
+            onPress = null;
+        } else {
+            onPress = () => {
+                onMonthPress({
+                    month
+                });
+            }
+        }
+
+        let borderTopLeftRadius = 5;
+        let borderBottomLeftRadius = 5;
+        let borderTopRightRadius = 5;
+        let borderBottomRightRadius = 5;
+
+        switch (status) {
+            case 'disabled':
+                backColor = this.props.dayDisabledBackColor;
+                textColor = this.props.dayDisabledTextColor;
+                break;
+
+            case 'common':
+                backColor = this.props.dayCommonBackColor;
+                textColor = this.props.dayCommonTextColor;
+                break;
+
+            case 'selected':
+                backColor = this.props.daySelectedBackColor;
+                textColor = this.props.daySelectedTextColor;
+                break;
+
+            case 'inRange':
+                backColor = this.props.dayInRangeBackColor;
+                textColor = this.props.dayInRangeTextColor;
+                break;
+        }
+
+        return (
+            <TouchableOpacity
+                activeOpacity={disabled ? 1 : 1}
+                style={[styles.common, {backgroundColor: backColor, width: width / 4, height: width / 8, borderTopLeftRadius, borderBottomLeftRadius,borderTopRightRadius, borderBottomRightRadius}]}
+                onPress={onPress}>
+                <Text style={{color: textColor}}>{month + '月'}</Text>
+            </TouchableOpacity>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    common: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'white',
+    }
+});