오락기/react

react 용 bootstrap

문방구앞오락기 2018. 9. 28. 17:52

const {

Button,

ButtonGroup,

} = Reactstrap;



}

componentDidMount(){

// 42 제작 = 7*6

// 시작

// console.log(new Date( this.year , this.today.getMonth() , 1).toLocaleDateString())

//

// console.log(new Date( this.year , this.today.getMonth()+1 , 0).toLocaleDateString())

//토요일=6

}

componentWillUnmount() {

}

_prevMonth = () => {

let dt = new Date(this.state.now)

dt.setMonth(dt.getMonth() - 1)

this.setState({

now : dt

})

}

_today = () => {

this.setState({

now : new Date()

})

}

_nextMonth = () => {

let dt = new Date(this.state.now)

dt.setMonth(dt.getMonth() + 1)

this.setState({

now : dt

})

}

_getFirstDate =(today) => {

return new Date( today.getFullYear() ,today.getMonth() , 1)

}

_getLastDate =(today) => {

return new Date( today.getFullYear() ,today.getMonth()+1 , 0)

}

_getDayOfWeek=(day) =>{

return this.days[day.getDay()]

}

_getPrevDay = (date) =>{

let target = new Date(date)

let dayNumber = new Date(date).getDay()

target.setDate(target.getDate()-dayNumber)

return target

}

_getDateformat = (date) =>{

return { yyyy : date.getFullYear(),

MM : date.getMonth()+1,

dd : date.getDate()

}

}

_getDayArray = () =>{

let arr = []

let firstDay = this._getFirstDate(this.state.now)

let preDay = this._getPrevDay(firstDay)

for(let i = 0 ; i < 42 ; i++){

let pushDate = new Date(preDay)

arr.push(this._setData(pushDate))

preDay.setDate(preDay.getDate()+1)

}

return arr

}

_setData = (date) =>{

return {

date : date,

dayOfWeek : this.days[date.getDay()],

isMonth : date.getMonth() == this.state.now.getMonth() ? true : false ,

isToday : date.toLocaleDateString() == new Date().toLocaleDateString() ? true : false

}

}

_getCalendar = () =>{

let list = this._getDayArray()

return list.map( (value , index) => {

return <Day

key={index}

day={value.date.getDate()}

month={value.date.getMonth()+1}

year={value.date.getMonth()}

dayOfWeek={value.dayOfWeek}

isMonth={value.isMonth}

isToday={value.isToday}

></Day>

})

}

_displayHeaderDate = () =>{

let dt = this.state.now

return dt.getFullYear()+' '+ parseInt(dt.getMonth()+1) +''

}

render() {

return (

<div className="outer">

<div className="header">

<h1>{this._displayHeaderDate()}</h1>

<div className="btnGroup" >

<ButtonGroup >

<Button onClick={this._prevMonth} >&lt;</Button>

<Button onClick={this._today} >Today</Button>

<Button onClick={this._nextMonth} >&gt;</Button>

</ButtonGroup>

{/* <button onClick={this._prevMonth}>&lt;</button>

<button onClick={this._today}>Today</button>

<button onClick={this._nextMonth}>&gt;</button> */}

</div>

</div>

<div className="main">

{this.state.now ? this._getCalendar() : '로딩'}

</div>

</div>

)

}

}