91 lines
2.5 KiB
JavaScript
91 lines
2.5 KiB
JavaScript
/*
|
|
* Author: 黎永顺
|
|
* name: 移动端页面-日期选择组件
|
|
* Description:
|
|
* Date: 2023/11/10
|
|
*/
|
|
import React, { Component } from "react";
|
|
import { WeaLocaleProvider } from "ecCom";
|
|
import moment from "moment";
|
|
import { Picker, Popup } from "spring-picker";
|
|
import "spring-picker/lib/style.css";
|
|
|
|
const getLabel = WeaLocaleProvider.getLabel;
|
|
|
|
class Index extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
visible: false,
|
|
salaryYearMonth: { year: "", month: "" }
|
|
};
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps, nextContext) {
|
|
const { value } = nextProps;
|
|
const [year, month] = value.split("-");
|
|
this.setState({
|
|
salaryYearMonth: { year, month }
|
|
});
|
|
}
|
|
|
|
handleChangeYear = (year) => {
|
|
this.setState({ salaryYearMonth: { ...this.state.salaryYearMonth, year } });
|
|
};
|
|
handleChangeMonth = (month) => {
|
|
|
|
this.setState({ salaryYearMonth: { ...this.state.salaryYearMonth, month: parseInt(month).toString() } });
|
|
};
|
|
handleCancel = () => {
|
|
this.setState({ visible: false });
|
|
};
|
|
handleConfirm = () => {
|
|
const { year, month } = this.state.salaryYearMonth;
|
|
this.setState({ visible: false }, () => {
|
|
this.props.onChange(moment(new Date(`${year}- ${month}`)).format("YYYY-MM"));
|
|
});
|
|
};
|
|
|
|
render() {
|
|
const { value } = this.props;
|
|
const { visible } = this.state;
|
|
const [year, month] = value.split("-");
|
|
return (
|
|
<div className="ui-picker-address">
|
|
<span className="date" onClick={() => this.setState({ visible: true })}>{value}</span>
|
|
<Popup visible={visible} onCancel={this.handleCancel} onConfirm={this.handleConfirm}>
|
|
<Picker
|
|
onChange={this.handleChangeYear}
|
|
data={{
|
|
list: YearFn(Number(moment().subtract(100, "year").format("YYYY")), Number(moment().add(100, "year").format("YYYY"))),
|
|
defaultValue: year,
|
|
displayValue(name) {
|
|
return name;
|
|
}
|
|
}}
|
|
/>
|
|
<Picker
|
|
onChange={this.handleChangeMonth}
|
|
data={{
|
|
list: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
|
|
defaultValue: `${parseInt(month)}月`,
|
|
displayValue(name) {
|
|
return name;
|
|
}
|
|
}}
|
|
/>
|
|
</Popup>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Index;
|
|
const YearFn = (lowEnd, highEnd) => {
|
|
let list = [];
|
|
for (let i = lowEnd; i <= highEnd; i++) {
|
|
list.push(i.toString());
|
|
}
|
|
return list;
|
|
};
|