React Js Month Picker

React Month Picker | Reactjs Month Picker Format :The ReactJS Month Picker simplifies the process of selecting months and years. Its user-friendly interface and seamless integration make it an ideal choice for developers aiming to enhance their date-related functionalities. Utilizing the popular JavaScript library React.js, developers can create dynamic and responsive web applications effortlessly.

written

reviewed

updated

Implementation 1: Input Field-Based Month Picker

The first implementation utilizes an input field of type "month" to enable users to select a specific month. The underlying code employs React’s useState hook, a powerful tool for managing state within functional components. When a user selects a month, the component extracts the year and month, converting it into a formatted string (e.g., "January 2023"). This formatted month is then displayed as a chip below the input field, enhancing the user experience.

React Js Month Picker Example

  <script type="text/babel">
    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>

Run

Output of React Js Month Picker Example

Implementation 2: Dropdown-Based Month Picker

The second implementation offers an alternative approach by employing a dropdown menu. Users can select a month from the dropdown, triggering the handleMonthChange function. This function updates the selectedMonth state, reflecting the chosen month in the UI. The dropdown-based approach provides a classic and widely recognized method for users to pick their desired month

React Js Month Picker Example 2

  <script type="text/babel">
    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>

Run

Output of React Month Picker in Dropdown

Pasted Image

Summary

In this post, we examined two different implementations of the ReactJS Month Picker. You can choose between an elegant input field-based approach or a familiar dropdown-based method to enhance date selection in your web applications.

React JS Tutorial