|
@@ -1,7 +1,7 @@
|
|
|
import React from 'react'
|
|
|
import style from './index.less'
|
|
|
import PropTypes from 'prop-types'
|
|
|
-import {YearList, MonthList} from './SelectList'
|
|
|
+import { YearList, MonthList } from './SelectList'
|
|
|
import Content from './Content'
|
|
|
import Time from './Time'
|
|
|
|
|
@@ -12,114 +12,148 @@ import Time from './Time'
|
|
|
* needTime:是否显示下方时间输入控件 不显示则默认的时分秒为0
|
|
|
*/
|
|
|
class Calendar extends React.Component {
|
|
|
- constructor() {
|
|
|
- super();
|
|
|
- const date=new Date();
|
|
|
- this.year=date.getFullYear();
|
|
|
- this.month=date.getMonth()+1;
|
|
|
- this.day=date.getDate();
|
|
|
- this.inputing=false;
|
|
|
- this.state = {
|
|
|
- year: this.year,
|
|
|
- month: this.month,
|
|
|
- day: this.day,
|
|
|
- select:{
|
|
|
- year: this.year,
|
|
|
- month: this.month,
|
|
|
- day: this.day,
|
|
|
- day: 0,//这里设置初始选中的值
|
|
|
- hour:0,
|
|
|
- minute:0,
|
|
|
- second:0
|
|
|
- }
|
|
|
- }
|
|
|
+ constructor(props) {
|
|
|
+ super(props);
|
|
|
+ const date = new Date();
|
|
|
+ this.year = date.getFullYear();
|
|
|
+ this.month = date.getMonth() + 1;
|
|
|
+ this.day = date.getDate();
|
|
|
+ this.inputing = false;
|
|
|
+ this.state = {
|
|
|
+ year: this.year,
|
|
|
+ month: this.month,
|
|
|
+ day: this.day,
|
|
|
+ select: {
|
|
|
+ year: this.year,
|
|
|
+ month: this.month,
|
|
|
+ day: 0,
|
|
|
+ hour:0,
|
|
|
+ minute:0,
|
|
|
+ second:0
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
- handleYearSelect(year) {
|
|
|
- if(year===this.year && this.state.month>this.month){
|
|
|
- this.setState({
|
|
|
- year: year,
|
|
|
- month:this.month
|
|
|
- });
|
|
|
- }else{
|
|
|
- this.setState({
|
|
|
- year: year
|
|
|
- });
|
|
|
- }
|
|
|
+ }
|
|
|
+ componentDidMount(){
|
|
|
+ this.setState({
|
|
|
+ year: this.props.timeLis && this.props.timeLis.year || this.year,
|
|
|
+ month: this.props.timeLis && this.props.timeLis.month || this.month,
|
|
|
+ day: this.props.timeLis && this.props.timeLis.day || this.day,
|
|
|
+ select: {
|
|
|
+ year: this.props.timeLis && this.props.timeLis.year || this.year,
|
|
|
+ month: this.props.timeLis && this.props.timeLis.month || this.month,
|
|
|
+ day: this.props.timeLis && this.props.timeLis.day || this.day,//这里设置初始选中的值
|
|
|
+ hour: this.props.timeLis && this.props.timeLis.hour,
|
|
|
+ minute: this.props.timeLis && this.props.timeLis.minute,
|
|
|
+ second: this.props.timeLis && this.props.timeLis.second
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ handleYearSelect(year) {
|
|
|
+ if (year === this.year && this.state.month > this.month) {
|
|
|
+ this.setState({
|
|
|
+ year: year,
|
|
|
+ month: this.month
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.setState({
|
|
|
+ year: year
|
|
|
+ });
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- handleMonthSelect(month) {
|
|
|
- this.setState({
|
|
|
- month: month
|
|
|
- });
|
|
|
- }
|
|
|
+ handleMonthSelect(month) {
|
|
|
+ this.setState({
|
|
|
+ month: month
|
|
|
+ });
|
|
|
+ }
|
|
|
|
|
|
- handleChange(info){
|
|
|
- if(this.inputing){
|
|
|
- return;
|
|
|
- }
|
|
|
- this.inputing=true;
|
|
|
- info.year=this.state.year;
|
|
|
- info.month=this.state.month;
|
|
|
- // info.day = this.day;//没选日就加上默认值
|
|
|
- if(info.hour==null){
|
|
|
- info.hour=this.state.select.hour;
|
|
|
- info.minute=this.state.select.minute;
|
|
|
- info.second=this.state.select.second;
|
|
|
- }
|
|
|
- this.props.handleChange(Object.assign({},info));
|
|
|
- this.setState({
|
|
|
- select:info
|
|
|
- });
|
|
|
+ handleChange(info) {
|
|
|
+ if (this.inputing) {
|
|
|
+ return;
|
|
|
}
|
|
|
-
|
|
|
- handleTodayClick(){
|
|
|
- const info={
|
|
|
- year:this.year,
|
|
|
- month:this.month,
|
|
|
- day:this.day,
|
|
|
- hour:this.state.select.hour,
|
|
|
- minute:this.state.select.minute,
|
|
|
- second:this.state.select.second
|
|
|
- };
|
|
|
- this.setState({
|
|
|
- select:info
|
|
|
- });
|
|
|
- this.props.handleChange(info);
|
|
|
+ this.inputing = true;
|
|
|
+ info.year = this.state.year;
|
|
|
+ info.month = this.state.month;
|
|
|
+ // info.day = this.state.day;//没选日就加上默认值
|
|
|
+ if (info.hour == null) {
|
|
|
+ info.hour = this.state.select.hour;
|
|
|
+ info.minute = this.state.select.minute;
|
|
|
+ info.second = this.state.select.second;
|
|
|
}
|
|
|
- genTimeComponent(){
|
|
|
- return this.props.needTime?<Time hour={this.state.select.hour} minute={this.state.select.minute} second={this.state.select.second} day={this.state.select.day} handleChange={(info)=>{this.handleChange(info)}}/>:null;
|
|
|
+ this.props.handleChange(Object.assign({}, info));
|
|
|
+ this.setState({
|
|
|
+ select: info
|
|
|
+ });
|
|
|
+ }
|
|
|
+ timeSure() {
|
|
|
+ if (this.inputing) {
|
|
|
+ return;
|
|
|
}
|
|
|
- render() {
|
|
|
- return (
|
|
|
- <div className={style.wrapper} style={{top:this.props.top}}>
|
|
|
- <div className={style.top}>
|
|
|
- <div className={style.year}>
|
|
|
- <YearList select={this.state.year} canSelectFuture={this.props.canSelectFuture} handleChange={(info) => this.handleYearSelect(info)}/>
|
|
|
- </div>
|
|
|
- <div className={style.month}>
|
|
|
- <MonthList year={this.state.year} canSelectFuture={this.props.canSelectFuture} select={this.state.month} handleChange={(info) => this.handleMonthSelect(info)}/>
|
|
|
- </div>
|
|
|
- <div className={style.button}>
|
|
|
- <button onClick={()=>this.handleTodayClick()}>{'今天'}</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <Content selectTime={this.state.select} year={this.state.year} month={this.state.month} handleClick={(info)=>this.handleChange(info)} canSelectFuture={this.props.canSelectFuture}/>
|
|
|
- {this.genTimeComponent()}
|
|
|
- <div className={style.timeSure} onClick={()=>this.props.timeSure(this.state.select)}>确定</div>
|
|
|
- </div>
|
|
|
- )
|
|
|
+ this.inputing = true;
|
|
|
+ let info = this.state.select
|
|
|
+ info.year = this.state.year;
|
|
|
+ info.month = this.state.month;
|
|
|
+ // info.day = this.state.day;//没选日就加上默认值
|
|
|
+ if (info.hour == null) {
|
|
|
+ info.hour = this.state.select.hour;
|
|
|
+ info.minute = this.state.select.minute;
|
|
|
+ info.second = this.state.select.second;
|
|
|
}
|
|
|
+ this.props.timeSure(Object.assign({}, info))
|
|
|
+ this.setState({
|
|
|
+ select: info
|
|
|
+ });
|
|
|
+ }
|
|
|
+ handleTodayClick() {
|
|
|
+ const info = {
|
|
|
+ year: this.year,
|
|
|
+ month: this.month,
|
|
|
+ day: this.day,
|
|
|
+ hour: this.state.select.hour,
|
|
|
+ minute: this.state.select.minute,
|
|
|
+ second: this.state.select.second
|
|
|
+ };
|
|
|
+ this.setState({
|
|
|
+ select: info
|
|
|
+ });
|
|
|
+ // this.props.timeSure(Object.assign({}, info))
|
|
|
+ this.props.handleChange(info);
|
|
|
+ }
|
|
|
+ genTimeComponent() {
|
|
|
+ return this.props.needTime ? <Time hour={this.state.select.hour} minute={this.state.select.minute} second={this.state.select.second} day={this.state.select.day} handleChange={(info) => { this.handleChange(info) }} /> : null;
|
|
|
+ }
|
|
|
+ render() {
|
|
|
+ return (
|
|
|
+ <div className={style.wrapper} style={{ top: this.props.top }}>
|
|
|
+ <div className={style.top}>
|
|
|
+ <div className={style.year}>
|
|
|
+ <YearList select={this.state.year} canSelectFuture={this.props.canSelectFuture} handleChange={(info) => this.handleYearSelect(info)} />
|
|
|
+ </div>
|
|
|
+ <div className={style.month}>
|
|
|
+ <MonthList year={this.state.year} canSelectFuture={this.props.canSelectFuture} select={this.state.month} handleChange={(info) => this.handleMonthSelect(info)} />
|
|
|
+ </div>
|
|
|
+ <div className={style.button}>
|
|
|
+ <button onClick={() => this.handleTodayClick()}>{'今天'}</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <Content selectTime={this.state.select} year={this.state.year} month={this.state.month} day={this.state.day} handleClick={(info) => this.handleChange(info)} canSelectFuture={this.props.canSelectFuture} />
|
|
|
+ {this.genTimeComponent()}
|
|
|
+ {
|
|
|
+ this.props.sure ? <div className={style.timeSure} onClick={() => this.timeSure({})}>确定</div> : ''
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
|
|
|
- componentDidUpdate(){
|
|
|
- this.inputing=false;
|
|
|
- }
|
|
|
+ componentDidUpdate() {
|
|
|
+ this.inputing = false;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
export default Calendar;
|
|
|
|
|
|
Calendar.propTypes = {
|
|
|
- handleChange: PropTypes.func,
|
|
|
- needTime:PropTypes.bool,
|
|
|
- canSelectFuture:PropTypes.bool
|
|
|
+ handleChange: PropTypes.func,
|
|
|
+ needTime: PropTypes.bool,
|
|
|
+ canSelectFuture: PropTypes.bool
|
|
|
};
|