vue Mint UI 选择日期

原创 sosojie 随笔 vue.js 156阅读 2018-09-10 16:33:53 举报

<template>
<section id="aboutM">
<header-section title="上传头像"></header-section>
<div class="birth">
<span @click="openPicker">出生日期</span>
<div>{{birthday}}</div>
</div>
<div class="datePicker">
<mt-datetime-picker
type="date"
ref="picker"
year-format="{value} 年"
month-format="{value} 月"
date-format="{value} 日"
@confirm="handleConfirm">
</mt-datetime-picker>
</div>

</section>

</template>
<script>
import headerSection from '@/components/headerSection';
// import {getCustomerOrderList,orderPayH5} from './service.js';f
export default {
data() {
return {
// openPicker:false, //选择器的显示与影藏
birthday:"", //出生日期
}
},
components: {
headerSection,
},
methods: {
openPicker () {
this.$refs.picker.open()
},
// 格式化获取的时间
getDate(date) {
const y = date.getFullYear()
let m = date.getMonth() + 1
m = m < 10 ? '0' + m : m
let d = date.getDate()
d = d < 10 ? ('0' + d) : d
return y + ' ' + m + ' ' + d
},
handleConfirm (data) {
console.log('@@@@@',data);
this.birthday = this.getDate(data); //获取的时间为时间戳,getdata是自己写的一个转换时间的方法
},
},

mounted() {

}

}
</script>

<style lang="scss" scoped="scoped">
sexPicker{

}
.mint-popup-bottom{
     width:90%;
     border-radius: 10px;
     margin-bottom: 20px; 
}

/deep/ .picker-slot{
    font-size: 36px;
}
/deep/ .picker-toolbar{
    height: 84px;

}
/deep/ .mint-datetime-action{
    font-size: 32px;
    line-height: 84px;
}

</style>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复