uni-app使用picker底部弹起的滚动选择器（日期选择器）

叁歲伎倆 2023-05-29 03:20 17阅读 0赞

### picker从底部弹起的滚动选择器，现支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。 ###

html部分：
    <view class="">日期选择器</view>
    		<view class="">
    			<view class="">
    				<view class="">
    					当前选择
    				</view>
    				<view class="">
    					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
    						<view class="">{
       {date}}</view>
    					</picker>
    				</view>
    			</view>
    		</view>

script部分：
    <script>
    	export default {
    		data() {
    			const currentDate = this.getDate({
    				format: true
    			})
    			return {
    				date: currentDate,
    				time: '12:01'
    			}
    		},
    		methods: {
    			bindDateChange: function(e) {
    				this.date = e.target.value
    			},
    			getDate(type) {
    				const date = new Date();
    				let year = date.getFullYear();
    				let month = date.getMonth() + 1;
    				let day = date.getDate();
    
    				if (type === 'start') {
    					year = year - 60;
    				} else if (type === 'end') {
    					year = year + 2;
    				}
    				month = month > 9 ? month : '0' + month;;
    				day = day > 9 ? day : '0' + day;
    				return `${year}-${month}-${day}`;
    			}
    		}
    	}
    </script>

### 详细picker属性介绍，官方地址链接：[https://uniapp.dcloud.io/component/picker][https_uniapp.dcloud.io_component_picker] ###

[https_uniapp.dcloud.io_component_picker]: https://uniapp.dcloud.io/component/picker