用mint ui去實現滾動選擇日期並能夠關閉拾取器

轉發要備註出處哈，麼麼噠

註釋的那些部分都是我在嘗試的時候寫得，留給本身看得，刪除不影響效果哈，但願對大家有幫助，比較忙可能寫得很粗糙，很差意思，有空再改了

實例一：

 

<template>
<div class="date">
<span><input type="text" :value="format" @click="openPicker"></span>
<mt-datetime-picker
ref="picker"
type="date"
cancelText="取消"
confirmText="肯定"
:startDate="startDate"
:endDate="endDate"
v-model="pickerValue"
@cancel="cancel">
</mt-datetime-picker>
</div>
</template>
<script>
import Vue from 'vue';
import { DatetimePicker } from 'mint-ui'

Vue.component(DatetimePicker.name, DatetimePicker);
export default {
data(){
var start = new Date();
var end = new Date();
var getDate = end.getDate();
end.setDate(getDate+4);
return{
pickerValue: start,
startDate: start,
endDate: end,
}
},

methods: {
openPicker() {
this.$refs.picker.open();
},

cancel(){
this.$refs.picker.close();
this.pickerValue = new Date();
}
},
computed:{
format:function(){
let time = new Date(this.pickerValue);
let y = time.getFullYear();
let m = time.getMonth() + 1;
let d = time.getDate();
m = m < 10 ? ('0' + m) : m;
d = d <10 ? ('0' + d) : d;
return y + '-' + m + '-' +d;

}
}
}
</script>
<style>
.picker-toolbar{
height: 1rem;
}
.mint-datetime-action{
line-height: 1rem;
font-size: 30px;
}
.picker-slot{
font-size: 30px;
}
.picker-center-highlight{
height: .8rem !important;
margin-top: -0.4rem !important;
}
</style>

 實例二：結果以下