index.jsx 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. import React from 'react'
  2. import style from './index.less'
  3. import PropTypes from 'prop-types'
  4. import {YearList, MonthList} from './SelectList'
  5. import Content from './Content'
  6. import Time from './Time'
  7. /**
  8. * handleChange: 时间改变时会触发的方法(在点击具体日期和输入改变时分秒时触发)
  9. * 该方法会传入一个对象如{year:2018,month:1,day:1,hour:1,minute:1,second:1}
  10. * needTime:是否显示下方时间输入控件 不显示则默认的时分秒为0
  11. */
  12. class Calendar extends React.Component {
  13. constructor() {
  14. super();
  15. const date=new Date();
  16. this.year=date.getFullYear();
  17. this.month=date.getMonth()+1;
  18. this.day=date.getDate();
  19. this.inputing=false;
  20. this.state = {
  21. year: this.year,
  22. month: this.month,
  23. select:{
  24. year: this.year,
  25. month: this.month,
  26. day: 0,//这里设置初始选中的值
  27. hour:0,
  28. minute:0,
  29. second:0
  30. }
  31. }
  32. }
  33. handleYearSelect(year) {
  34. if(year===this.year && this.state.month>this.month){
  35. this.setState({
  36. year: year,
  37. month:this.month
  38. });
  39. }else{
  40. this.setState({
  41. year: year
  42. });
  43. }
  44. }
  45. handleMonthSelect(month) {
  46. this.setState({
  47. month: month
  48. });
  49. }
  50. handleChange(info){
  51. if(this.inputing){
  52. return;
  53. }
  54. this.inputing=true;
  55. info.year=this.state.year;
  56. info.month=this.state.month;
  57. // info.day = this.day;//没选日就加上默认值
  58. if(info.hour==null){
  59. info.hour=this.state.select.hour;
  60. info.minute=this.state.select.minute;
  61. info.second=this.state.select.second;
  62. }
  63. this.props.handleChange(Object.assign({},info));
  64. this.setState({
  65. select:info
  66. });
  67. }
  68. handleTodayClick(){
  69. const info={
  70. year:this.year,
  71. month:this.month,
  72. day:this.day,
  73. hour:this.state.select.hour,
  74. minute:this.state.select.minute,
  75. second:this.state.select.second
  76. };
  77. this.setState({
  78. select:info
  79. });
  80. this.props.handleChange(info);
  81. }
  82. genTimeComponent(){
  83. return this.props.needTime?<Time hour={this.state.select.hour} minute={this.state.select.minute} second={this.state.select.second} handleChange={(info)=>{this.handleChange(info)}}/>:null;
  84. }
  85. render() {
  86. return (
  87. <div className={style.wrapper}>
  88. <div className={style.top}>
  89. <div className={style.year}>
  90. <YearList select={this.state.year} canSelectFuture={this.props.canSelectFuture} handleChange={(info) => this.handleYearSelect(info)}/>
  91. </div>
  92. <div className={style.month}>
  93. <MonthList year={this.state.year} canSelectFuture={this.props.canSelectFuture} select={this.state.month} handleChange={(info) => this.handleMonthSelect(info)}/>
  94. </div>
  95. <div className={style.button}>
  96. <button onClick={()=>this.handleTodayClick()}>{'今天'}</button>
  97. </div>
  98. </div>
  99. <Content selectTime={this.state.select} year={this.state.year} month={this.state.month} handleClick={(info)=>this.handleChange(info)} canSelectFuture={this.props.canSelectFuture}/>
  100. {this.genTimeComponent()}
  101. </div>
  102. )
  103. }
  104. componentDidUpdate(){
  105. this.inputing=false;
  106. }
  107. }
  108. export default Calendar;
  109. Calendar.propTypes = {
  110. handleChange: PropTypes.func,
  111. needTime:PropTypes.bool,
  112. canSelectFuture:PropTypes.bool
  113. };