uniapp实现出生日期/时间选择效果

 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>

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值