function YearMonthForm({ date, localeUtils, onChange, fromMonth, toMonth }) {
    const months = localeUtils.getMonths();

    const years = [];
    for (let i = fromMonth.getFullYear(); i <= toMonth.getFullYear(); i += 1) {
        years.push(i);
    }

    const handleChange = function handleChange(e) {
        const { year, month } = e.target.form;
        onChange(new Date(year.value, month.value));
    };

    return (
        <form className="DayPicker-Caption">
            <select name="month" onChange={handleChange} value={date.getMonth()}>
                {months.map((month, i) => <option key={i} value={i}>{month}</option>)}
            </select>
            <select name="year" onChange={handleChange} value={date.getFullYear()}>
                {years.map((year, i) =>
                    <option key={i} value={year}>
                        {year}
                    </option>
                )}
            </select>
        </form>
    );
}
function YearMonthForm({ date, localeUtils, onChange, fromMonth, toMonth }) {
    const months = localeUtils.getMonths();

    const years = [];
    for (let i = fromMonth.getFullYear(); i <= toMonth.getFullYear(); i += 1) {
        years.push(i);
    }

    const handleChange = function handleChange(e) {
        const { year, month } = e.target.form;
        onChange(new Date(year.value, month.value));
    };

    return (
        <form className="DayPicker-Caption">
            <select name="month" onChange={handleChange} value={date.getMonth()}>
                {months.map((month, i) => <option key={i} value={i}>{month}</option>)}
            </select>
            <select name="year" onChange={handleChange} value={date.getFullYear()}>
                {years.map((year, i) =>
                    <option key={i} value={year}>
                        {year}
                    </option>
                )}
            </select>
        </form>
    );
}
function YearMonthForm ( { date , localeUtils , onChange , fromMonth , toMonth } ) { const months = localeUtils . getMonths ( ) ; const years = [ ] ; for ( let i = fromMonth . getFullYear ( ) ; i <= toMonth . getFullYear ( ) ; i += 1 ) { years . push ( i ) ; } const handleChange = function handleChange ( e ) { const { year , month } = e . target . form ; onChange ( new Date ( year . value , month . value ) ) ; } ; return ( < form className = "DayPicker-Caption" > < select name = "month" onChange = { handleChange } value = { date . getMonth ( ) } > { months . map ( ( month , i ) => < option key = { i } value = { i } > { month } < / option > ) } < / select > < select name = "year" onChange = { handleChange } value = { date . getFullYear ( ) } > { years . map ( ( year , i ) => < option key = { i } value = { year } > { year } < / option > ) } < / select > < / form > ) ; }
Component will receive date, locale and localeUtils props
Component will receive date locale and localeUtils props