How to use flatpickr to only choose month and day, but not year

Question

To use Flatpickr in Vue.js and configure it to only allow selection of the month and day (without the year), you can follow the example below. Note that you need to use the monthSelect plugin for Flatpickr and set the noCalendar option to true. Also, make sure to include the necessary styles for the monthSelect plugin.

import React, { useState } from "react";
import ReactDOM from "react-dom";
import monthSelectPlugin from "flatpickr/dist/plugins/monthSelect";
import "flatpickr/dist/flatpickr.min.css";
import "flatpickr/dist/plugins/monthSelect/style.css";



import Flatpickr from "react-flatpickr";
function App() {
  const [date, setDate] = useState(new Date());
  const onCloseHandle = (date) => {
    setDate(date[0]);
  };
  return (

    <div className="App">
      <span>Selected Date : {JSON.stringify(date)}</span>
      <br />
      <Flatpickr
        options={{
          plugins: [
            new monthSelectPlugin({
              shorthand: true,
              dateFormat: "m/Y",
              altInput: true,
              altFormat: "m/Y",
              theme: "light"
            })
          ],
          static: true
        }}
        value={date}
        onClose={onCloseHandle}
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

In this example:

1 We import the necessary Flatpickr components and styles.

2 We define the selectedDate data property to store the selected date.

3 We configure the Flatpickr component with the flatpickrConfig

4 object, which includes the monthSelect plugin and other options. The noCalendar option is set to true to disable the calendar, allowing only the selection of the month and day.

5 The v-model directive is used to bind the selected date to the selectedDate property. https://codesandbox.io/s/flatpickr-react-kcp2mq