In ReactJS -- I want to display week calender in my timesheet app !! Weekly timesheet .
[1]: https://i.stack.imgur.com/hPukx.png
I have taken empty array selectWeek[],onChnage event (date changes from date picker), It should always empty array ->selectWeek first then add elements into it as per the code.
Below code onChnage Event, it keeps adding dates to array-selectedWeek !!But on every onChnage event , I want to take empty array Only
Code: import React, { Component } from "react"; import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
class TimesheetForm extends Component {
constructor(props){
super(props);
var startDate=new Date();
var today = new Date(),
this.state = {
counter0:0,
counter1:0,
counter2:0,
counter3:0,
counter4:0 ,
total:0,
currentDate: date,
startDate: startDate,
currentDay:currentWeekDay,
week:[],
selectedWeek:[]
};
for (var i = 0; i <= 6; i++) {
var first = today.getDate() - today.getDay() + i
var day = new
Date(today.setDate(first)).toISOString().slice(0, 10)
this.state.week.push(day)
}
console.log(this.state.week); // gives me an array of all dates of week
}
handleDateChange = date => {
console.log("selectedWeek"+this.state.selectedWeek);
console.log(date);
this.setState({
startDate: date
});
for (var i = 0; i <= 6; i++) {
var first = date.getDate() - date.getDay() + i ;
var day = new
Date(date.setDate(first)).toISOString().slice(0,10) ;
this.state.selectedWeek.push(day);
}
console.log("shiv selectedWeek"+this.state.selectedWeek);
};
increment =(e)=> {
if(e.target.id==="id0"){
if(this.state.counter0=== 8){
this.setState({
counter0:8
});
}
else{
this.setState(prevState => ({
counter0: prevState.counter0 + 1
}));
}
}
if(e.target.id==="id1"){
if(this.state.counter1=== 8){
this.setState({
counter1:8
});
}
else{
this.setState(prevState => ({
counter1: prevState.counter1 + 1
}));
}
}
if(e.target.id==="id2"){
if(this.state.counter2=== 8){
this.setState({
counter2:8
});
}
else{
this.setState(prevState => ({
counter2: prevState.counter2 + 1
}));
}
}
if(e.target.id==="id3"){
if(this.state.counter3=== 8){
this.setState({
counter3:8
});
}
else{
this.setState(prevState => ({
counter3: prevState.counter3 + 1
}));
}
}
if(e.target.id==="id4"){
if(this.state.counter4=== 8){
this.setState({
counter4:8
});
}
else{
this.setState(prevState => ({
counter4: prevState.counter4 + 1
}));
}
}
e.preventDefault();
}
render(){
return(
<form >
<DatePicker
selected={this.state.startDate}
onChange={this.handleDateChange}
/>
<table className="" align="right">
<tr className="">
<td>
<label>{this.state.selectedWeek[1] ? this.state.selectedWeek[1] :this.state.week[1] }</label>
<div>
<input
className="time-input"
type="text"
size="1"
value={this.state.counter0}
/>
<button id="id0" onClick = {this.increment}> + </button>
<button id="id0" onClick = {this.decrement}> - </button>
</div>
</td>
<td className="">
{console.log(this.state.week)}
{console.log(this.state.selectedWeek)}
<label >{this.state.week[2] }{this.state.selectedWeek[2]}</label>
<div>
<input
className="time-input"
type="text"
size="1"
//onClick={e => e.target.select()}
value={this.state.counter1}
/>
<button id="id1" onClick = {this.increment}> + </button>
<button id="id1" onClick = {this.decrement}> - </button>
</div>
</td>
<td className="">
<label >{this.state.selectedWeek[3] ? this.state.selectedWeek[3] :this.state.week[3] }</label>
<div>
<input
className="time-input"
type="text"
size="1"
//onClick={e => e.target.select()}
value={this.state.counter2}
/>
<button id="id2" onClick = {this.increment}> + </button>
<button id="id2" onClick = {this.decrement}> - </button>
</div>
</td>
<td className="">
<label >{this.state.selectedWeek[4] ? this.state.selectedWeek[4] :this.state.week[4] }</label>
<div>
<input
className="time-input"
type="text"
size="1"
//onClick={e => e.target.select()}
value={this.state.counter3}
/>
<button id="id3" onClick = {this.increment}> + </button>
<button id="id3" onClick = {this.decrement}> - </button>
</div>
</td>
<td className="">
<label >{this.state.selectedWeek[5] ? this.state.selectedWeek[5] :this.state.week[5] }</label>
<div>
<input
className="time-input"
type="text"
size="1"
//onClick={e => e.target.select()}
value={this.state.counter4}
/>
<button id="id4" onClick = {this.increment}> + </button>
<button id="id4" onClick = {this.decrement}> - </button>
</div>
</td>
<td className="">
<label >Total:</label>
<div>
<input
className="time-input"
type="text"
size ="1"
//onClick={e => e.target.select()}
value={this.state.counter0+this.state.counter1+this.state.counter2+this.state.counter3+this.state.counter4}
/>
</div>
</td>
</tr>
</table>
}
}
