我有一个使用reactjs实现的压延机。但是我无法通过单击日期获得日期名称。我只能通过单击日期获得月份的天数。例如,当我单击“ 2019”的日期时/ 05/24“,我可以获得24.的数字。单击该日期的日期名称时需要该日期(星期一,星期二,星期日,...)。 我可以为此解决方案吗?
import React from 'react';
import moment from 'moment';
import './Calender.css';
import Datetime from 'react-datetime'
export default class Calender extends React.Component {
state = {
dateContext: moment(),
today: moment(),
showMonthPopup: false,
showYearPopup: false,
selectedDay: null
}
weekdays = moment.weekdays(); //["Sunday", "Monday", "Tuesday", "Wednessday", "Thursday", "Friday", "Saturday"]
weekdaysShort = moment.weekdaysShort(); // ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
months = moment.months();
daysInMonth = () => {
return this.state.dateContext.daysInMonth();
}
firstDayOfMonth = () => {
let dateContext = this.state.dateContext;
let firstDay = moment(dateContext).startOf('month').format('d'); // Day of week 0...1..5...6
return firstDay;
}
onDayClick = (e, day) => {
this.setState({
selectedDay: day
}, () => {
console.log("SELECTED DAY: ", this.state.selectedDay);
});
this.props.onDayClick && this.props.onDayClick(e, day);
}
render() {
// Map the weekdays i.e Sun, Mon, Tue etc as <td>
let weekdays = this.weekdaysShort.map((day) => {
return (
<td key={day} className="week-day">{day}</td>
)
});
let blanks = [];
for (let i = 0; i < this.firstDayOfMonth(); i++) {
blanks.push(<td key={i * 80} className="emptySlot">
{""}
</td>
);
}
console.log("blanks: ", blanks);
let daysInMonth = [];
for (let d = 1; d <= this.daysInMonth(); d++) {
let className = (d == this.currentDay() ? "day current-day" : "day");
let selectedClass = (d == this.state.selectedDay ? " selected-day " : "")
daysInMonth.push(
<td key={d} className={className + selectedClass} >
<span onClick={(e) => { this.onDayClick(e, this.xxx())}}>{d}</span>
</td>
);
}
console.log("days: ", daysInMonth);
var totalSlots = [...blanks, ...daysInMonth];
let rows = [];
let cells = [];
totalSlots.forEach((row, i) => {
if ((i % 7) !== 0) {
cells.push(row);
} else {
let insertRow = cells.slice();
rows.push(insertRow);
cells = [];
cells.push(row);
}
if (i === totalSlots.length - 1) {
let insertRow = cells.slice();
rows.push(insertRow);
}
});
let trElems = rows.map((d, i) => {
return (
<tr key={i * 100}>
{d}
</tr>
);
})
return (
<div className="calender-container" style={this.style}>
<table className="calender">
<tbody>
<tr>
{weekdays}
</tr>
{trElems}
</tbody>
</table>
</div>
);
}
}