import React, {Component} from "react";
import {
View,
Text,
Image,
Button, IconSvg
} from "app/components";
import moment from "moment";
import y from "app/utils/yunfeiStyle";
export default class Index extends Component {
constructor(props) {
super(props);
this.state = {
date: new Date(),
allDayArr: [],
taday: new Date().getDate(),
lastMonth: [],
nextMonth: [],
years: new Date().getFullYear(),
month: new Date().getMonth() + 1,
today: moment(),
curMonth: props.defaultDate ? moment(props.defaultDate) : moment(),
acDay: props.defaultDate ? moment(props.defaultDate) : moment()
};
}
before() {
const date = moment(this.state.curMonth).date(1);
const count = date.day();
date.subtract(count + 1, "day");
let views = [] as any[];
for (let i = 0; i < count; i++) {
date.add(1, "day");
views.push(
<View key={i + "_before"} style={[y.wRatio(100 / 7), y.uac]}>
<View
style={[y.w(50), y.h(50), y.ujc, y.uac]}>
<Text
style={[y.color("#bebebe"), y.fSize(13)]}>{date.date()}</Text>
</View>
</View>
);
}
return views;
}
after() {
const date = moment(this.state.curMonth).date(1).add(1, "months");
const count = 7 - date.day();
if (count === 7) {
return null;
}
let views = [] as any[];
for (let i = 0; i < count; i++) {
views.push(
<View key={i + "_after"} style={[y.wRatio(100 / 7), y.uac]}>
<View
style={[y.w(50), y.h(50), y.ujc, y.uac]}>
<Text
style={[y.color("#bebebe"), y.fSize(13)]}>{date.date()}</Text>
</View>
</View>
);
date.add(1, "day");
}
return views;
}
thisM() {
const date = moment(this.state.curMonth).date(1);
const count = date.daysInMonth();
let views = [] as any[];
for (let i = 0; i < count; i++) {
const todayMoment = moment(date);
const isSame = this.state.acDay && todayMoment.isSame(this.state.acDay, "day");
let disable = false;
if (this.props.min && todayMoment.isBefore(this.props.min, "day")) {
disable = true;
}
if (this.props.max && todayMoment.isAfter(this.props.max, "day")) {
disable = true;
}
views.push(
<Button
key={i + "_this"}
style={[y.wRatio(100 / 7), y.uac]}
onPress={() => {
if (disable) {
return;
}
this.setState({
acDay: todayMoment
});
this.props.onPressDay && this.props.onPressDay(todayMoment);
}}>
<View style={[y.w(50), y.h(50), y.ujc, y.uac]}>
<View
style={[y.bgColor(isSame ? "#00aea9" : "rgba(0,0,0,0)"), y.radiusA(40), y.w(30), y.h(30), y.ujc, y.uac]}>
{disable ?
<Text
style={[y.color("#bebebe"), y.fSize(13)]}>{todayMoment.date()}</Text>
:
<Text style={[y.color(isSame ? "#fff" : "#000"), y.fSize(13)]}>
{todayMoment.date()}
</Text>
}
</View>
</View>
</Button>
);
date.add(1, "day");
}
return views;
}
render() {
return (
<View style={[y.bgColor("#fff"), this.props.style]}>
<View style={[y.udr, y.ujb, y.uac, y.plr(10)]}>
<Button
style={[y.h(40), y.ujc, y.uas]}
onPress={() => {
this.state.curMonth.subtract(1, "year");
this.forceUpdate();
}}>
<IconSvg type={"iconfanye_shuang_L"} size={18}/>
</Button>
<Button
style={[y.h(40), y.ujc, y.uas]}
onPress={() => {
this.state.curMonth.subtract(1, "months");
this.forceUpdate();
}}>
<IconSvg type={"iconfanye_dan_L"} size={18}/>
</Button>
<Text style={[y.fSize(14), y.color("#1D1D26")]}>
{this.state.curMonth.format("YYYY年MM月")}
</Text>
<Button
style={[y.h(40), y.ujc, y.uas]}
onPress={() => {
this.state.curMonth.add(1, "months");
this.forceUpdate();
}}>
<IconSvg type={"iconfanye_dan_R"} size={18}/>
</Button>
<Button
style={[y.h(40), y.ujc, y.uas]}
onPress={() => {
this.state.curMonth.add(1, "year");
this.forceUpdate();
}}>
<IconSvg type={"iconfanye_shuang_R"} size={18}/>
</Button>
</View>
<View style={[y.udr, y.btb(1), y.bdColor("#EEEEEE"), y.minh(35), y.uac]}>
<Text style={[y.fSize(14), y.uf1, y.utxc, y.color("#777777")]}>日</Text>
<Text style={[y.fSize(14), y.uf1, y.utxc, y.color("#777777")]}>一</Text>
<Text style={[y.fSize(14), y.uf1, y.utxc, y.color("#777777")]}>二</Text>
<Text style={[y.fSize(14), y.uf1, y.utxc, y.color("#777777")]}>三</Text>
<Text style={[y.fSize(14), y.uf1, y.utxc, y.color("#777777")]}>四</Text>
<Text style={[y.fSize(14), y.uf1, y.utxc, y.color("#777777")]}>五</Text>
<Text style={[y.fSize(14), y.uf1, y.utxc, y.color("#777777")]}>六</Text>
</View>
<View style={[y.udr, y.uf1, y.w100, y.uWrap, y.mb(10)]}>
{
this.before()
}
{
this.thisM()
}
{
this.after()
}
</View>
</View>
);
}
}