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
Daily Recommendation