uniapp自定义时间选择器

uniapp的组件进行的重新编写,可直接使用。

功能主要效果为,不可以选择当前日期之前的日期

html部分代码

<view class="content">
		<button @click="getuser"> 获取</button>
		  <view class="uni-title">日期:{{year}}年{{month}}月{{day}}日</view>
		<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
			<picker-view-column>
				<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
			</picker-view-column>
		</picker-view>
	</view> 

js部分代码,其中可以在这基础上去更改限制的范围,只需要更改对应年份或月份的for循环中 i 的范围即可。

export default {
			 data() {
				  const date = new Date()
					 const years = []
					 const year = date.getFullYear()
					 const months = []
					 const month = date.getMonth() + 1
					 const days = []
					 const day = date.getDate()
					 var lastDate = new Date(year, month, 0).getDate();//每个月最后一天
					 for (let i = year; i <= year+4; i++) {
						 years.push(i)
					 }
					 for (let i = month; i <= 12; i++) {
						 months.push(i)
					 }
					 for (let i = day; i <= lastDate; i++) {
						 days.push(i)
					 }
			 	return {
			 		title: 'picker-view',
					visible: false,
					indicatorStyle: `height: 50px;`,
			 		years,
			 		year,
			 		months,
			 		month,
			 		days,
			 		day,
					value: [0,0,0],
			 	}
			 },
			        methods: {
						getuser(){
							this.visible=true
						},
			            bindChange: function (e) {
			                const val = e.detail.value
							const year=new Date().getFullYear()
							const month=new Date().getMonth()+1
							const day = new Date().getDate()
							// 非当前年
							if(this.years[val[0]]>year){
								this.months=[]
								for (let i = 1; i <= 12; i++) {
								    this.months.push(i)
								}
								var lastDate = new Date(this.years[val[0]], this.months[val[1]], 0).getDate();
								this.days=[]
								for (let i =1; i <= lastDate; i++) {
									this.days.push(i)
								}
								this.year = this.years[val[0]]
								this.month = this.months[val[1]]
								this.day = this.days[val[2]]
							}else if(this.years[val[0]]==year)
							//当前年
							 {
								 // 月份限制
								this.months=[]
								for (let i =month; i <= 12; i++) {
								    this.months.push(i)
								}
								//获取月份的最后一天
								var lastDate = new Date(year, this.months[val[1]], 0).getDate();
								//当前月的剩余日期
								if(this.months[val[1]]== month){
									this.days=[]
									for (let i =day; i <= lastDate; i++) {
									    this.days.push(i)
									}
								}else if(this.months[val[1]]>month)
								//非当前月的剩余日期
								{
									this.days=[]
									for (let i =1; i <= lastDate; i++) {
										this.days.push(i)
									}
								}
								this.year = year
								this.month = this.months[val[1]]
								this.day = this.days[val[2]]
							}
			            }
			        }
	}

css部分

.picker-view {
            width: 750rpx;
            height: 600rpx;
            margin-top: 20rpx;
        }
        .item {
            line-height: 100rpx;
            text-align: center;
        }

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
UniApp 是一个基于 Vue.js 的跨平台开发框架,可以用于开发iOS、Android、H5等多个平台的应用程序。如果你想自定义滑动选择器,可以使用 UniApp 提供的组件和功能进行实现。 一种常见的实现方式是使用 `<picker>` 组件来创建滑动选择器。你可以在 `<template>` 中定义 `<picker>` 组件,然后在 `<script>` 中编写逻辑来处理选择器的数据和事件。 以下是一个简单的示例代码: ```html <template> <view> <picker :value="selectedValue" @change="handleChange"> <view class="picker-item" v-for="(item, index) in pickerData" :key="index"> {{ item }} </view> </picker> </view> </template> <script> export default { data() { return { pickerData: ['选项1', '选项2', '选项3'], selectedValue: 0 } }, methods: { handleChange(event) { this.selectedValue = event.mp.detail.value; // 处理选择变化的逻辑 } } } </script> <style> .picker-item { height: 50px; line-height: 50px; text-align: center; } </style> ``` 在上面的代码中,我们通过 `picker` 组件创建了一个滑动选择器,`pickerData` 数组中存放了选择器的选项数据。`selectedValue` 保存了当前选中的值。 当选择器的值发生变化时,会触发 `change` 事件,我们可以通过 `@change` 监听事件并调用 `handleChange` 方法来处理选择变化的逻辑。 在 `handleChange` 方法中,我们更新了 `selectedValue` 的值,并可以根据需要进行其他逻辑的处理。 通过这种方式,你可以自定义滑动选择器的外观和功能,根据实际需求进行调整和扩展。希望对你有所帮助!如果还有其他问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值