想用vant组件实现选择出生日期,主要是不能直接选择年-月选择,自己太笨实现不了,就用vue-mobile-calendar实现了
vue-mobile-calendar是一个移动端的日期选择器,蛮好用的
1.npm安装
npm install vue-mobile-calendar
2.引入vue-mobile-calendar 在main.js 全局引入和单个页面局部引入都可
import Calendar from 'vue-mobile-calendar'
Vue.use(Calendar);
3.直接上代码
(我是加了一个表单,点击出生日期组件显示,根据自己的需求进行修改)
<template>
<div class="addChild">
<van-field
readonly
clickable
name="calendar"
:value="value"
label="出生日期"
required
placeholder="点击选择出生日期"
@click="showCalendar = true"
/>
<calendar :show.sync="showCalendar" @change="onChange"/>
</div>
</template>
<script>
//日期组件
import calendar from 'vue-mobile-calendar'
Vue.use(calendar);
export default {
name: "addChild",
data() {
return {
value: '',
showCalendar: false,
}
},
methods: {
onChange(time) {
this.value = time.format('YYYY-MM-DD');
this.showCalendar=false
},
}
}
</script>