VUE的picker时间日期选择
Posted xuran1216
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VUE的picker时间日期选择相关的知识，希望对你有一定的参考价值。
一开始用别人封装好的W-picker进行时间日期选择，后来测试的时候发现ios系统不兼容，后改成原生picker去选择
完整代码
<template>
<view class="container">
<view class="uni-padding-wrap uni-common-mt">
<form @submit="formSubmit">
<!-- 车辆信息 -->
<view v-for="(item, indexItem) in truckIdArray" :key=‘indexItem‘>
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-list-cell-left">
车辆信息
</view>
<view class="uni-list-cell-db">
<view class="uni-input">
<view v-if="truckIdArray.length > 1">
<button style="float: right;" type="default" size="mini" @click="removeTruck(indexItem)">删除</button>
</view>
</view>
</view>
</view>
<view class="uni-list-cell">
<view class="uni-list-cell-left">
车牌号码：
</view>
<view class="uni-list-cell-db">
<picker @change="bindPickerChange(indexItem, $event)" :value="indexArray[indexItem]" :range="truckList"
range-key="licensePlateNumber" @click="getTruckList(1)">
<view class="uni-input">{{truckList[indexArray[indexItem]].licensePlateNumber}}</view>
</picker>
</view>
</view>
<view class="uni-list-cell">
<view class="uni-list-cell-left">
车辆类型：
</view>
<view class="uni-list-cell-db">
<view class="uni-input">{{truckList[indexArray[indexItem]].truckType}}</view>
</view>
</view>
<view class="uni-list-cell">
<view class="uni-list-cell-left">
车主姓名：
</view>
<view class="uni-list-cell-db">
<view class="uni-input">{{truckList[indexArray[indexItem]].truckOwner}}</view>
</view>
</view>
<view class="uni-list-cell">
<view class="uni-list-cell-left">
车主电话：
</view>
<view class="uni-list-cell-db">
<view class="uni-input">{{truckList[indexArray[indexItem]].telephone}}</view>
</view>
</view>
<view class="uni-list-cell">
<view class="uni-list-cell-left">
行驶证照片：
</view>
<view class="uni-center" style="background:#FFFFFF; font-size:0;">
<image class="image" mode="widthFix" :src="truckList[indexArray[indexItem]].vehicleLicenseImage" :data-src="truckList[indexArray[indexItem]].vehicleLicenseImage"
@tap="previewImage" />
</image>
</view>
</view>
</view>
</view>
<view style="margin-top: 10rpx; margin-bottom: 10rpx;">
<button type="primary" plain="true" @click="addTruck()">添加车辆</button>
</view>
<!-- 申请信息 -->
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-list-cell-left">
项目建设单位：
</view>
<view class="uni-list-cell-db">
<input class="uni-input" name="projectConstructionUnit" placeholder="请输入项目建设单位" />
</view>
</view>
<view class="uni-list-cell">
<view class="uni-list-cell-left">
负责人：
</view>
<view class="uni-list-cell-db">
<input class="uni-input" name="personInCharge" placeholder="请输入负责人" />
</view>
</view>
<view class="uni-list-cell">
<view class="uni-list-cell-left">
负责人电话：
</view>
<view class="uni-list-cell-db">
<input class="uni-input" name="phone" placeholder="请输入负责人电话" />
</view>
</view>
<view class="uni-list-cell">
<view class="uni-list-cell-left">
运载物料类型：
</view>
<view class="uni-list-cell-db">
<picker @change="bindPickerChangeType" :value="indexType" :range="materialsTypeList" range-key="itemText" name="materialsType"
@click="getMaterialsTypeList">
<view class="uni-input">{{materialsTypeList[indexType].itemText}}</view>
</picker>
</view>
</view>
<view class="uni-list-cell">
<view class="uni-list-cell-left">
申请人：
</view>
<view class="uni-list-cell-db">
<input class="uni-input" name="applicant" placeholder="请输入申请人" />
</view>
</view>
<view class="uni-list-cell">
<view class="uni-list-cell-left">
申请人电话：
</view>
<view class="uni-list-cell-db">
<input class="uni-input" name="telephone" placeholder="请输入申请人电话" />
</view>
</view>
<view class="uni-list-cell">
<view class="uni-list-cell-left">
开始时间：
</view>
<picker class="uni-list-cell-db" mode="multiSelector" @change="bindMultiPickerChange" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
<input class="uni-input" :value="startTime" placeholder=‘请选择开始时间‘/>
</picker>
</view>
<view class="uni-list-cell">
<view class="uni-list-cell-left">
结束时间：
</view>
<picker class="uni-list-cell-db" mode="multiSelector" @change="bindMultiPickerChange1" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
<input class="uni-input" :value="endTime" placeholder=‘请选择结束时间‘/>
</picker>
</view>
<view class="uni-list-cell">
<view class="uni-list-cell-left">
起点路线：
</view>
<view class="uni-list-cell-db">
<input class="uni-input" name="startPoint" disabled="true" placeholder="请输入起点路线" @tap="chooseStartPoint" v-model="startPoint" />
</view>
</view>
<view class="uni-list-cell">
<view class="uni-list-cell-left">
终点路线：
</view>
<view class="uni-list-cell-db">
<input class="uni-input" name="endPoint" disabled="true" placeholder="请输入终点路线" @tap="chooseEndPoint" v-model="endPoint" />
</view>
</view>
<view class="uni-list-cell">
<view class="uni-list-cell-left" >
申请理由：
</view>
<view class="uni-list-cell-db">
<textarea class="textarea-content" name="applicationReason" placeholder="请输入申请理由及上传证明材料"></textarea>
</view>
</view>
</view>
<view class="uni-btn-v" v-if="buttonFlag == false">
<button form-type="submit" type="primary">保存</button>
</view>
</form>
</view>
</view>
</template>
<script>
import { postAction } from ‘../../common/request.js‘;
import wPicker from "@/components/w-picker/w-picker.vue";
var util = require(‘../../common/util.js‘);
var graceChecker = require("../../common/graceChecker.js");
const date = new Date();
const years = [];
const months = [];
const days = [];
const hours = [];
const minutes = [];
//获取年
for (let i = 2020; i <= date.getFullYear() + 5; i++) {
years.push("" + i);
}
//获取月份
for (let i = 1; i <= 12; i++) {
if (i < 10) {
i = "0" + i;
}
months.push("" + i);
}
//获取日期
for (let i = 1; i <= 31; i++) {
if (i < 10) {
i = "0" + i;
}
days.push("" + i);
}
//获取小时
for (let i = 0; i < 24; i++) {
if (i < 10) {
i = "0" + i;
}
hours.push("" + i);
}
//获取分钟
for (let i = 0; i < 60; i++) {
if (i < 10) {
i = "0" + i;
}
minutes.push("" + i);
}
export default {
components: {
wPicker
},
data() {
return {
truckList: [{
licensePlateNumber: ‘请选择车辆‘
}],
url: {
getDictTypeList: "truck/wxApp/getDictTypeList",
add: ‘truck/wxApp/truckApplication/addOrEdit‘,
getTruckList: ‘truck/wxApp/truck/getTruckList‘,
},
truckIdArray: [],
truckNumberArray: [],
indexArray: [],
materialsTypeList: [{
itemText: ‘请选择运载物料类型‘
}],
indexType: 0,
startTime: ‘‘,
endTime: ‘‘,
startPoint: ‘‘,
endPoint: ‘‘,
startPointLongitude: ‘‘,
endPointLongitude: ‘‘,
startPointLatitude: ‘‘,
endPointLatitude: ‘‘,
buttonFlag: false,
multiArray: [years, months, days, hours, minutes],
multiIndex: [0, 0, 0, 10, 0],
choose_year: ‘‘,
}
},
onLoad() {
this.getTruckList(0);
this.getMaterialsTypeList();
//this.choose_year = this.data.multiArray[0][0]
var date = new Date();
this.multiIndex = [date.getFullYear() - 2020,date.getMonth(),date.getDate() - 1,0,0]
},
methods: {
bindMultiPickerChange(e) {
/* console.log(‘picker发送选择改变，携带值为‘, e.detail.value) */
this.multiIndex = e.detail.value
const index = this.multiIndex;
const year = this.multiArray[0][index[0]];
const month = this.multiArray[1][index[1]];
const day = this.multiArray[2][index[2]];
const hour = this.multiArray[3][index[3]];
const minute = this.multiArray[4][index[4]];
// console.log(`${year}-${month}-${day}-${hour}-${minute}`);
this.startTime = year + ‘-‘ + month + ‘-‘ + day + ‘ ‘ + hour + ‘:‘ + minute
// console.log(this.data.time);
},
bindMultiPickerChange1(e){
this.multiIndex = e.detail.value
const index = this.multiIndex;
const year = this.multiArray[0][index[0]];
const month = this.multiArray[1][index[1]];
const day = this.multiArray[2][index[2]];
const hour = this.multiArray[3][index[3]];
const minute = this.multiArray[4][index[4]];
// console.log(`${year}-${month}-${day}-${hour}-${minute}`);
this.endTime = year + ‘-‘ + month + ‘-‘ + day + ‘ ‘ + hour + ‘:‘ + minute
},
//监听picker的滚动事件
bindMultiPickerColumnChange(e) {
/* console.log(‘修改的列为‘, e.detail.column, ‘，值为‘, e.detail.value); */
if (e.detail.column == 0) {
let choose_year = this.multiArray[e.detail.column][e.detail.value];
/* this.setData({
}) */
this.choose_year = choose_year;
}
if (e.detail.column == 1) {
let num = parseInt(this.multiArray[e.detail.column][e.detail.value]);
let temp = [];
if (num == 1 || num == 3 || num == 5 || num == 7 || num == 8 || num == 10 || num == 12) { //判断31天的月份
for (let i = 1; i <= 31; i++) {
if (i < 10) {
i = "0" + i;
}
temp.push("" + i);
}
this.multiArray[2] = temp
;
} else if (num == 4 || num == 6 || num == 9 || num == 11) { //判断30天的月份
for (let i = 1; i <= 30; i++) {
if (i < 10) {
i = "0" + i;
}
temp.push("" + i);
}
this.multiArray[2] = temp
;
} else if (num == 2) { //判断2月份天数
let year = parseInt(this.choose_year);
if (((year % 400 == 0) || (year % 100 != 0)) && (year % 4 == 0)) {
for (let i = 1; i <= 29; i++) {
if (i < 10) {
i = "0" + i;
}
temp.push("" + i);
}
this.multiArray[2] = temp
} else {
for (let i = 1; i <= 28; i++) {
if (i < 10) {
i = "0" + i;
}
temp.push("" + i);
}
this.multiArray[2] = temp
;
}
}
}
var data = {
multiArray: this.multiArray,
multiIndex: this.multiIndex
};
data.multiIndex[e.detail.column] = e.detail.value;
},
//查询车辆列表
getTruckList(value) {
let _this = this;
let parms = {
wxUserId: ‘123‘,
};
postAction(this.url.getTruckList, parms).then(function(res) {
if (value == 0) {
if (res.records.length > 0) {
_this.truckList = res.records;
for (let i = 0; i < _this.truckList.length; i++) {
_this.truckList[i].vehicleLicenseImage = util.getImgFullUrl(_this.truckList[i].vehicleLicenseImage);
}
_this.truckIdArray.push(_this.truckList[0].id);
_this.truckNumberArray.push(_this.truckList[0].licensePlateNumber);
_this.indexArray.push(0);
} else {
uni.showModal({
content: ‘当前用户暂无车辆，请前往添加‘,
showCancel: false,
success: (res) => {
if (res.confirm) {
uni.navigateTo({
url: ‘/pages/userInfo/myTruck‘
})
}
}
})
}
} else if (value == 1) {
_this.truckList = res.records;
for (let i = 0; i < _this.truckList.length; i++) {
_this.truckList[i].vehicleLicenseImage = util.getImgFullUrl(_this.truckList[i].vehicleLicenseImage);
}
}
})
},
//点击切换选择车辆
bindPickerChange: function(index, e) {
if (this.truckIdArray.length > 1 && this.truckIdArray.indexOf(this.truckList[e.detail.value].id) != -1) {
uni.showToast({
title: "车辆已选，请重新选择",
icon: "none"
})
} else {
this.truckIdArray.splice(index, 1, this.truckList[e.detail.value].id);
this.truckNumberArray.splice(index, 1, this.truckList[e.detail.value].licensePlateNumber);
this.indexArray.splice(index, 1, e.detail.value);
}
},
//预览行驶证照片
previewImage: function(e) {
var current = e.target.dataset.src
uni.previewImage({
current: current,
urls: [current]
})
},
//继续添加车辆信息
addTruck: function() {
if (this.truckIdArray.length >= this.truckList.length) {
return false;
}
this.truckIdArray.push(this.truckList[this.indexArray.length].id);
this.truckNumberArray.push(this.truckList[this.indexArray.length].licensePlateNumber);
this.indexArray.push(this.indexArray[this.indexArray.length - 1] + 1);
},
//移除车辆信息
removeTruck: function(indexItem) {
this.truckIdArray.splice(indexItem, 1);
this.truckNumberArray.splice(indexItem, 1);
this.indexArray.splice(indexItem, 1);
},
//条件查询运载物料类型
getMaterialsTypeList() {
var params = {
dictCode: ‘materials_type‘
}
postAction(this.url.getDictTypeList, params).then((res) => {
this.materialsTypeList = res;
})
},
//点击切换运载物料类型
bindPickerChangeType: function(e) {
this.indexType = e.detail.value
},
onCancel() {
},
//比较开始时间、结束时间
comparedTime: function(startTime, endTime){
if (startTime != "" && endTime != ""){
let startDate = this.transferDate(this.transferDate(startTime)).getTime();
let endDate = this.transferDate(this.transferDate(endTime)).getTime();
return startDate < endDate ? true : false;
}
},
transferDate: function(date) {
if(typeof date == "string") {
return new Date(date.replace(/-/ig, "/"));
} else {
return date;
}
},
//选择起点地图
chooseStartPoint: function() {
uni.chooseLocation({
success: (res) => {
this.startPointLongitude = res.longitude,
this.startPointLatitude = res.latitude,
this.startPoint = res.address + res.name
}
})
},
//选择终点地图
chooseEndPoint: function() {
uni.chooseLocation({
success: (res) => {
this.endPointLongitude = res.longitude,
this.endPointLatitude = res.latitude,
this.endPoint = res.address + res.name
}
})
},
//表单提交
formSubmit: function(e) {
//定义表单规则
var rule = [
{ name: "projectConstructionUnit", checkType: "string", checkRule: "2,20", errorMsg: "项目建设单位应为2-20字符" },
{ name: "personInCharge", checkType: "string", checkRule: "2,4", errorMsg: "负责人姓名应为2-4字符" },
{ name: "phone", checkType: "phoneno", checkRule: "11", errorMsg: "负责人电话应为11位数字" },
{ name: "applicant", checkType: "string", checkRule: "2,4", errorMsg: "申请人姓名应为2-4字符" },
{ name: "telephone", checkType: "phoneno", checkRule: "11", errorMsg: "申请人电话应为11位数字" },
];
//进行表单检查
var formData = e.detail.value;
formData.createdBy = ‘123‘;//从本地缓存中获取关注用户微信openId
formData.truckId = this.truckIdArray.join(‘,‘); //车辆id
formData.licensePlateNumber = this.truckNumberArray.join(‘,‘); //车牌号码
formData.materialsType = this.materialsTypeList[formData.materialsType].itemValue; //字典值
formData.startPointLongitude = this.startPointLongitude;
formData.startPointLatitude = this.startPointLatitude;
formData.endPointLongitude = this.endPointLongitude;
formData.endPointLatitude = this.endPointLatitude;
formData.passRoute = this.startPoint + ‘ → ‘ + this.endPoint;
formData.correctPassRoute = this.startPoint + ‘ → ‘ + this.endPoint;
formData.correctStartTime = this.startTime;
formData.correctEndTime = this.endTime;
var checkRes = graceChecker.check(formData, rule);
if (checkRes) {
if (this.startTime == "") {
uni.showToast({
title: "请选择开始时间!",
icon: "none"
});
return false;
}
if (this.endTime == "") {
uni.showToast({
title: "请选择结束时间!",
icon: "none"
});
return false;
}
if(!this.comparedTime(this.startTime, this.endTime)){
uni.showToast({
title: "开始时间不大于结束时间!",
icon: "none"
});
return false;
}
if (this.startPoint == "") {
uni.showToast({
title: "请选择起点路线!",
icon: "none"
});
return false;
}
if (this.endPoint == "") {
uni.showToast({
title: "请选择路线!",
icon: "none"
});
return false;
}
this.buttonFlag = true;
postAction(this.url.add, formData).then((res) => {
uni.showToast({
title: "提交成功!"
})
setTimeout(function() {
uni.navigateTo({
url: ‘/pages/application/myApplication?status=0‘
})
}, 2000)
})
} else {
uni.showToast({
title: graceChecker.error,
icon: "none"
});
}
},
}
}
</script>
<style>
.image {
margin-right: 200rpx;
margin-bottom: 40rpx;
width: 200rpx;
height: 200rpx;
margin-top: 20px;
}
.textarea-content {
height: 180rpx;
width: 490rpx;
margin-top: 130rpx;
}
</style>
以上是关于VUE的picker时间日期选择的主要内容，如果未能解决你的问题，请参考以下文章
vue知识点----element UI+vue关于日期范围选择的操作，picker-options属性的使用