【uni-app 时间选择器，任意选择器】_uniapp时间时分秒范围选择器

uni-app 时间选择器，任意选择器

因为是原生的，所以挺好理解

1.一个简单的选择器是这么写的

可以用来选择优先级

<template>
	<view>
		选择器:
		<picker  @change="Change" :value="index" :range="array">
			<view class="uni-input">{{array[index]}} </view>
		</picker>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				array: ['香蕉', '苹果', '水蜜桃', '五十块一斤'],
				index: 0
			}
		},
		methods: {
			Change: function(e) {
				this.index = e.target.value
			},
		}
	}
</script>

<style>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

2.选择两个

可以用来写时间，需要注意的是要给标签写上mode=“multiSelector”，不然不生效

<template>
	<view>
		进阶选择器
		<picker mode="multiSelector" @change="Change" :value="index" :range="array2">
			<view class="uni-input">{{array2[0][index[0]]}}...{{array2[1][index[1]]}}</view>
		</picker>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				array: ['1', '2', '3', '4'],
				array2: [
					['早餐', '午餐', '晚餐'],
					['不吃', '外卖', '下楼吃']
				],
				index: [0, 0]
			}
		},
		methods: {
			Change: function(e) {
				this.index = e.target.value
				console.log(this.index)
			},
		}
	}
</script>

<style>

</style>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

3.官方的时间选择器

start就是设置了早上九点，但是选择了早上八点，最早只能选到早上九点
end就是设置了晚上九点，但是你选择了晚上十点，他最迟只能选到九点

添加了获取当前时间的方法

<template>
	<view>
		时间选择器：
		<picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
			<view class="uni-input">{{time}}</view>
		</picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				time: ''
			}
		},
		onShow() {
			this.time = this.yearTime()
		},
		methods: {
			bindTimeChange: function(e) {
				this.time = e.detail.value
			},
			yearTime(e){
				var a = new Date();
				var y=a.getFullYear();
				var m=a.getMonth()+1;
				m = m<10? "0"+m:m;
				var d=a.getDate();
				d = d<10? "0"+d:d;
				
				var h=a.getHours();
				h = h<10? "0"+h:h;
				var mm=a.getMinutes();
				mm = mm<10? "0"+mm:mm;
				var s=a.getSeconds();
				s = s<10? "0"+s:s;
				
				if(e == 'year'){
					return y + '/' + m + '/' + d;
				}
				if(e == 'time'){
					return h + ':' + mm + ':' + s;
				}
				if(e == 'yearTime'){
					return y + '/' + m + '/' + d + '  ' + h + ':' + mm + ':' + s;
				}
				return h + ':' + mm;
			}

		}
	}
</script>

<style>

</style>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

4.如果你是想像选择收货地址的那种，选了市后给你选县的话

那说明你很有想法了，但是实力没跟上
还没写完但是能用的地址选择器