uniapp时间选择器_uniapp时间范围选择器

下载地址https://ext.dcloud.net.cn/plugin?id=5458

<template>
	<view class="container">
		<view class="fenlei">
			<view class="mb-20">
				时间筛选
			</view>
			<DateSelector
			  :mode="selectDateType"
			  @onChange="onDateSelectorChange"
			/>
		</view>
		<view class="">
		</view>
		<view class="nextbox">
			<button type="default" class='nextbtn' hover-class="login-hover" @click="tobackasset()">确定</button>
		</view>
	</view>
</template>

<script>
	import { ref, reactive, getCurrentInstance, watch, computed } from 'vue'
	import DateTimePicker from '@/components/dateTimePicker/index.vue';
	import DateSelector from '@/components/dateSelector/index.vue';
	
	export default {
		data() {
			return {
				selectDateType:1,
				starttime:'',
				endtime:''
			}
		},
		components: {
		    DateTimePicker,
			DateSelector
		  },
		onLoad(options) {
			this.id=options.id
		},
		methods: {
			onDateSelectorChange({ startDate, endDate }) {
			  // console.log('11111', startDate, endDate);
			  this.starttime=startDate
			  this.endtime=endDate
			},
			tobackasset(){
				uni.navigateTo({
					url: '/pages/checknum/aseetdetail?id='+this.id+'&starttime='+this.starttime+'&endtime='+this.endtime
				})
			}
			
		}
	}
</script>

<style>
	.container{
		height: 100%;
		background: #fff;
		.fenlei{
			padding: 30rpx;
		}
		.mb-20{
			margin-bottom: 20rpx;
		}
		.nextbox{
			width:100%;
			position:fixed;
			bottom:0px;
		}
		.chognzhibtn{
			float: left;
			display: inline-block;
			width: 150rpx;
			height: 50rpx;
			line-height: 50rpx;
			margin-bottom: 30rpx;
			margin-left: 30rpx;
			color: #4690FE;
			font-size: 22rpx;
			border-radius: 50rpx;
			background: linear-gradient(90deg, #fff, #fff);
			box-shadow: 0px 3px 12px 0px rgba(146, 146, 146, 0.25);
			border: 0;
			&::after {
				display: none;
			}
			
		}
		.nextbtn{
			float: right;
			display: inline-block;
			width: 150rpx;
			height: 50rpx;
			line-height: 50rpx;
			margin-bottom: 30rpx;
			margin-right: 30rpx;
			color: #fff;
			font-size: 22rpx;
			border-radius: 50rpx;
			box-shadow: 0px 3px 12px 0px rgba(146, 146, 146, 0.25);
			background: linear-gradient(90deg, #4690FE, #4690FE);
			border: 0;
			&::after {
				display: none;
			}
		}
		.login-hover {
			background: linear-gradient(90deg, #1d479b, #0f2186);
			border: 0;
			transform: translate(0);
			&::after {
				display: none;
			}
		}
	}
</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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118