Vue Js Month Picker: A Vue js Month Picker example is a user interface component that allows users to select a specific month from a dropdown menu. It is built using the Vue.js framework, which provides a reactive and component-based approach to building web applications. The Vue Js Month Picker example utilizes Vue.js directives, event handling, and data binding to dynamically update the selected month based on user interactions. 

How can I implement Vue Js Month Picker with Chips Ui?

This code snippet for creating Vue Js Month Picker. It consists of an input field of type “month” and a div element to display the selected month. The selected month is stored in the “selectedMonth” variable using the v-model directive.

When the value of the input field changes, the “handleMonthChange” method is triggered. It extracts the year and month from the selected value, creates a Date object, and formats the month name and year. The formatted month is then stored in the “formattedMonth” variable and displayed in the div element.

In summary, this code allows users to select a month using an input field and displays the selected month in a formatted way.

Vue Js Month Picker Example

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

  </div>
  <script type="module">
    const app = Vue.createApp({
      data() {
        return {
          selectedMonth: '',
          formattedMonth: '',

        };
      },
      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>

Ouput of Vue Js Month Picker Example

CSS Code for Vue js Month Picker with Chips UI

The CSS code for a Vue js month picker with chips UI involves styling the different components to achieve the desired visual appearance.

This includes setting the display properties, defining the padding and background color for the chips, adjusting the border radius, font size, and font weight. Additionally, hover effects and transitions can be applied to enhance the user experience.

It’s important to consider the overall design scheme, such as color schemes, shadows, and other visual elements, to ensure a cohesive and visually appealing Vue Js month picker with chips user interface in Vue.js.

Vue Js Month Picker – CSS Code

#app {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

.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;
}