Vue Js Month Picker Example

<!DOCTYPE html>
<html>

<body>

<div id="app">
    <h3>Vue Js Month Picker Example</h3>
    <div class="chips" v-if="formattedMonth">
      <div class="chip">{{formattedMonth}}</div>
    </div>
    <input type="month" v-model="selectedMonth" @change="handleMonthChange" />

</div>

};
      },
      methods: {
        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}`;
          this.formattedMonth = formattedMonth;
        },

}
    });
    app.mount('#app');
  </script>

.chips {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 10px;
    }

.chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 8px 12px;
      background-color: #00796B;
      border-radius: 16px;
      font-size: 14px;
      color: #fff;
      font-weight: bold;
      cursor: pointer;
      transition: background-color 0.3s;
    }

.chip:hover {
      background-color: #d6d6d6;
    }

input[type="month"] {
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 4px;
      outline-color: #B388FF;
    }
  </style>
</body>

</html>