CODEWITHSUNDEEP
javascriptreactjssemantic-ui
Chopnut
Chopnut

Reputation: 647

How do I get the current displayed month and year of semantic-ui-calendar?

I'm using https://www.npmjs.com/package/semantic-ui-calendar-react as an inline date picker.

If I want the current displayed month and year, the calendar is showing. How would I do that in JavaScript/React?

Note: Without using the onChange property. For eg. DateInput inline calendar. Normally when you click on a particular date, onChange gets triggered. I would like to get the month and year its currently displaying.

Upvotes: 1

Views: 1230

Answers (1)

Nishith Patel
Nishith Patel

Reputation: 203

Try below code 

import {
    YearInput,
    MonthInput
} from 'semantic-ui-calendar-react';


class MonthYearForm extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            year: '',
            month: '',
        }
    }

    handleChange = (event, { name, value }) => {
        if (this.state.hasOwnProperty(name)) {
            this.setState({ [name]: value });
        }
    }
    render() {
        return (
            <>
                <YearInput
                    inline
                    className='example-calendar-input'
                    value={this.state.year}
                    name='year'
                    onChange={this.handleChange}
                />
                <br />
                <MonthInput
                    inline
                    className='example-calendar-input'
                    value={this.state.month}
                    name='month'
                    onChange={this.handleChange}
                />
            </>
        )
    }
}

You will get current month and year value in this.state.year and this.state.month

Upvotes: 1

Related Questions