如何通过单击日历中的任何日期来获取日期(星期一,星期二...)的名称

时间:2019-05-25 09:24:35

标签: reactjs

我有一个使用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>

        );
    }
}

0 个答案:

没有答案