React Js Month Picker

    const { useState } = React;

​

    function App() {

      const [selectedMonth, setSelectedMonth] = useState('');

      const [formattedMonth, setFormattedMonth] = useState('');

​

      const handleMonthChange = (event) => {

        const selectedMonth = event.target.value;

        const [year, month] = selectedMonth.split('-');

        const date = new Date(year, month - 1);

        const monthName = date.toLocaleString('default', { month: 'long' });

        const formattedMonth = `${monthName} ${year}`;

        setFormattedMonth(formattedMonth);

      };

​

      return (

        <div className='container'>

          <h3>React Js Month Picker Example</h3>

          <div className="chips">

            {formattedMonth && <div className="chip">{formattedMonth}</div>}

          </div>

          <input

            type="month"

            onChange={handleMonthChange}

            className='input-field'

          />

        </div>

      );

    }

    ReactDOM.render(<App />, document.getElementById("app"));

  </script>

    const { useState } = React;

    function App() {

      const months = [

        'January', 'February', 'March', 'April', 'May', 'June',

        'July', 'August', 'September', 'October', 'November', 'December'

      ];

      const [selectedMonth, setSelectedMonth] = useState('');

      const handleMonthChange = (e) => {

        const selected = e.target.value;

        setSelectedMonth(selected);

      };

      return (

        <div className='container'>

          <h3 className='heading'>React Js Month Picker</h3>

          <select className='select-box' value={selectedMonth} onChange={handleMonthChange}>

            <option className='option' value="">Select Month</option>

            {months.map((month, index) => (

              <option key={index} className='option' value={month}>

                {month}

              </option>

            ))}

          </select>

          <p className='selected-month'>Selected Month : {selectedMonth}</p>

        </div>

​

​

      );

    }

​

    ReactDOM.render(<App />, document.getElementById('app'));

  </script>