?uniapp官网关于日期选择器:picker | uni-app官网
?van-cell是vant里一个组件
<!-- 出生日期 -->
<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange" v-show="isShow">
<van-cell is-link title="出生日期" mode="date" :value="date" :start="startDate" :end="endDate" />
</picker>
? 如果不用vant组件 可以这样写
<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
<view class="uni-input">{{date}}</view>
</picker>
<script>
//出生日期
function getDate(type) {
const date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
if (type === 'start') {
year = year - 10;
} else if (type === 'end') {
year = year + 10;
}
month = month > 9 ? month : '0' + month;
day = day > 9 ? day : '0' + day;
return `${year}-${month}-${day}`;
}
export default {
data() {
return {
//出生日期
date: getDate({
format: true
}),
startDate: getDate('start'),
endDate: getDate('end'),
};
},
methods: {
//出生日期
bindDateChange: function(e) {
this.date = e.detail.value;
}
},
};
</script>
?
|