because vant There are only days selected in the calendar, not months , So I encapsulated another component myself .

Code up :
This is the encapsulated sub component :
<template> <div> <div @click="showPopup"> {{ yesr }}-<span v-show="actived <
10 ? true : false">0</span >{{ actived }} </div> <van-popup v-model="show"
position="top" :style="{ height: '50%' }" @click-overlay="close" > <main> <!--
Selection year --> <div class="yesr"> <van-icon name="arrow-left" @click="last" /> <span >{{
yesr}} year <span v-show="actived < 10 ? true : false">0</span >{{ actived }} month </span
> <van-icon name="arrow" @click="next" /> </div> <section> <div> <span v-for=
"(item, index) in 12" :key="index" :class="actived === item ? 'spanBGd' : false"
@click="spanmouth(item)" > {{ item }} month </span> </div> </section> <footer> </
footer> </main> <div class="button" @click="button"> determine </div> </van-popup> </div>
</template> <script> import Vue from "vue"; import { Icon } from "vant"; import
{ Popup } from "vant"; Vue.use(Icon); Vue.use(Popup); export default { data() {
return { yesr: 1970, // year actived: 1, // month show: false }; }, mounted() { // Set default year
var date = new Date(); this.yesr = date.getFullYear(); this.actived = date.
getMonth() + 1; }, methods: { // Last year last() { this.yesr = this.yesr - 1; }, //
Next year next() { this.yesr = this.yesr + 1; }, // Select month spanmouth(item) { this.actived
= item; }, // Popup showPopup() { this.show = true; }, // Close pop-up layer close() { // Set default year
var date = new Date(); this.yesr = date.getFullYear(); this.actived = date.
getMonth() + 1; }, // determine button() { this.show = false; var Datenum=`${this.yesr}
${this.actived}` this.$emit('datebutton',Datenum) console.log(Datenum); } } }; <
/script> <style scoped> main > .yesr { display: flex; justify-content: space-
around; align-items: center; height: 50px; width: 100%; background: #ffc02e; }
section{ width: 100%; height: 150px; display: flex; justify-content: center;
align-items: center; border-bottom: 1px solid rgb(207, 205, 205); } section >
div{ width: 74%; height: 100px; display: flex; justify-content: space-between;
align-items: center; flex-wrap: wrap; } section > div > span { width: 40px;
height: 40px; line-height: 40px; text-align: center; } .spanBGd { background:
#ffc02e; color: #fff; border-radius: 10px; } .button { width: 80%; height: 50px;
margin: 20px auto; line-height: 50px; background: linear-gradient(270deg,
#fec2080%, #ffd337 100%); outline: none; border-radius: 2px; text-align: center;
} </style>
Parent component call :
Import
import datecomponent from "@/views/achievement/components/date.vue";
register
components: { datecomponent },
Labels and events :
<datecomponent @datebutton="datebutton" /> methods:{ datebutton(Datenum) {
console.log(Datenum) }, }
Components pass through this.$emit('datebutton',Datenum) Pass in the parameters .
The final time format : as 202011

Look at the effect picture :( The results are printed on the console )

Technology
©2020 ioDraw All rights reserved
Tiktok Java Three aspects of post technology sharing :Java Basics + network HashMap+JVM+ database There's rubbish in the veins Regular infusion is necessary ? You didn't discuss it Cambridge university refused to obey the British government Continue with Huawei 5G cooperation Django Of defer and only Detailed explanation of methods Where do programmers go when they are over 40 Why do you need computer major after graduation java What about training ? Common logic questions and pen questions for programmers JAVA Interview questions -Mysql database Out 6 The University of Nobel laureates Made one “ Cell phone killer ”App5G Base station power consumption , How terrible is it ?