3
van-field的input事件，会影响van-datetime-picker的input事件
Q
[youzan/vant-weapp]van-field会影响van-datetime-picker
A
回答
7
issue格式不规范，补充一下代码片段或者代码
5
两个组件是不会发生互相影响的，应该还是你的使用问题
2
wxml:
//入离时间 部分
<view class="h2_box">
<view class="left_h2" data-id="1" bindtap="onShowPop">
<view class="color_999 fz26 lh60">入住日期</view>
<view class="color_007bff lh50">{{filter.getDateC(checkInOut.date1)}}<text class="padl5">{{checkInOut.checkinWeek}}</text></view>
<view class="color_007bff fz24">{{filter.getMinite2(checkInOut.hour1)}}后</view>
</view>
<view class="center_h2"><view class="long">共{{checkInOut.long}}晚</view></view>
<view class="right_h2" data-id="2" bindtap="onShowPop">
<view class="color_999 fz26 lh60">离店日期</view>
<view class="color_007bff lh50">{{filter.getDateC(checkInOut.date2)}}<text class="padl5">{{checkInOut.checkoutWeek}}</text></view>
<view class="color_007bff fz24">{{filter.getMinite2(checkInOut.hour2)}}前</view>
</view>
</view>
//入住人信息部分：
<view class="loginBox bg_ffffff padlr30 bor_rad12 mart20">
<view class="border_bot">
<view class="label1">入住人真实姓名<text class="snow_ padl5">*</text></view>
<van-field class="input1" border="{{false}}" type="text" value="{{people.name}}" bindchange="onChangeName" maxlength="10" clearable="{{true}}" />
</view>
<view class="border_bot">
<view class="label1">入住人手机号<text class="snow_ padl5">*</text></view>
<van-field class="input1" border="{{false}}" type="tel" value="{{people.phone}}" bindchange="onChangePhone" maxlength="11" clearable="{{true}}" />
</view>
<view class="">
<view class="label1">入住人身份证</view>
<van-field class="input1" border="{{false}}" type="text" value="{{people.idCard}}" bindchange="onChangeId" maxlength="18" clearable="{{true}}" />
</view>
</view>
//弹层是：时间控件
<van-popup show="{{checkInOut.showPop}}" bind:close="onClosePop" safe-area-inset-bottom="true" position="bottom" custom-style="height:45%">
<view wx:if="{{checkInOut.flag==1}}">
<van-datetime-picker type="datetime" value="{{checkInOut.currentDate}}" formatter="{{formatter}}" min-date="{{checkInOut.minDate}}" max-date="{{checkInOut.maxDate}}" bindconfirm="onInput" bindcancel="onClosePop" />
</view>
<view wx:if="{{checkInOut.flag==2}}">
<van-datetime-picker type="datetime" value="{{checkInOut.currentDate2}}" formatter="{{formatter}}" min-date="{{checkInOut.minDate2}}" max-date="{{checkInOut.maxDate}}" bindconfirm="onInput2" bindcancel="onClosePop" />
</view>
</van-popup>
++++++++++++++++++++++++++++++++++
js部分：
data部分
data: {
imgObj: imgObj,
theHousestay:{},
deleteIds:[],
theMaxPeople:3,
house: {
showPop: false,
rooms: [],
theRoomName:'',
searName: ''
},
checkInOut: { //入离时间
showPop: false,
flag: 0,
date1: '2019-00-00', //页面显示的日期和时间
hour1: '14:00:00',
date2: '2019-00-00',
hour2: '12:00:00',
long:'1',
currentDate: '',//时间控件的时间
currentDate2: '',
minDate: new Date().getTime(),
maxDate: new Date().getTime() + 90 * 24 * 60 * 60 * 1000,//最多入住天数，90天
minDate2:new Date().getTime() + 24 * 60 * 60 * 1000,
},
people: { //入住人信息
id:'',
name: '',
phone: '',
idCard: ''
},
addPeople: [],// 同住人列表
order: { //订单金额和订单来源
showPop:false,
money: '',
source: '',
sourceList:[]
},
formatter (type, value) {
if (type === 'year') {
return `${value}年`
} else if (type === 'month') {
return `${value}月`
} else if (type === 'day') {
return `${value}日`
} else if (type === 'hour') {
return `${value}时`
} else if (type === 'minute') {
return `${value}分`
}
return value
},
btnText:'确认添加'
},
修改入住人信息部分：
onChangeName: function (e) {
this.setData({
['people.name']:e.detail
})
},
onChangePhone: function (e) {
this.setData({
['people.phone']:e.detail
})
},
onChangeId: function (e) {
this.setData({
['people.idCard']:e.detail
})
},
时间控件部分，修改入离时间
onInput: function (e) {
console.log('改变了van-datetime-picker');
let value=e.detail;//时间戳
let {checkInOut}=this.data;
var obj = this.formatDate(value);
let sDate1=obj.date+' '+'00:00:00';
let sDate2=checkInOut.date2.slice(0,10)+' '+'00:00:00';
sDate1 = sDate1.substring(0,19);
sDate1 = sDate1.replace(/-/g,'/');
sDate1 = new Date(sDate1).getTime();
sDate2 = sDate2.substring(0,19);
sDate2 = sDate2.replace(/-/g,'/');
sDate2 = new Date(sDate2).getTime();
let dateSpan = sDate2 - sDate1;
if(dateSpan< 24 * 3600 * 1000){ //离店日期，小于1天的时候，自动给离店日期顺延一天
let iDays = 1;//Math.ceil向上取整
let theCheckinHour=obj.hour.slice(0,2);
if(Number(theCheckinHour)<6 ){ //如果入住时间，在6点之前，多加一天
iDays+=1
}
//console.log('1.1是'+iDays);
let obj2 = this.formatDate(value+24 * 3600 * 1000); //自动给离店日期顺延一天
this.setData({
['checkInOut.currentDate']:value,
['checkInOut.date1']:obj.date,
['checkInOut.hour1']:obj.hour,
['checkInOut.long']:iDays,
['checkInOut.checkinWeek']:getWeek(obj.date),
['checkInOut.currentDate2']:value + 24 * 3600 * 1000,
['checkInOut.minDate2']:value + 24 * 3600 * 1000,
['checkInOut.date2']:obj2.date,
['checkInOut.checkoutWeek']:getWeek(obj2.date),
})
}else{
dateSpan = Math.abs(dateSpan);
let iDays = parseInt(dateSpan / (24 * 3600 * 1000));//Math.ceil向上取整
let theCheckinHour=obj.hour.slice(0,2);
if(Number(theCheckinHour)<6){ //如果入住时间，在6点之前，多加一天
iDays+=1
}
//console.log('1.2是'+iDays);
this.setData({
['checkInOut.currentDate']:value,
['checkInOut.date1']:obj.date,
['checkInOut.hour1']:obj.hour,
['checkInOut.long']:iDays,
['checkInOut.checkinWeek']:getWeek(obj.date),
})
}
this.onClosePop();
},
onInput2: function (e) {
let value=e.detail;
let {checkInOut}=this.data;
var obj = this.formatDate(value);
let sDate1=obj.date+' '+'00:00:00';
let sDate2=checkInOut.date1.slice(0,10)+' '+'00:00:00';
sDate1 = sDate1.substring(0,19);
sDate1 = sDate1.replace(/-/g,'/');
sDate1 = new Date(sDate1).getTime();
sDate2 = sDate2.substring(0,19);
sDate2 = sDate2.replace(/-/g,'/');
sDate2 = new Date(sDate2).getTime();
let dateSpan = sDate2 - value;
dateSpan = Math.abs(dateSpan);
let iDays = parseInt(dateSpan / (24 * 3600 * 1000));
//console.log('2是'+iDays);
let theCheckinHour=checkInOut.hour1.slice(0,2);
if(Number(theCheckinHour)<6 || iDays==0){ //如果入住时间，在6点之前，多加一天
iDays+=1
}
this.setData({
['checkInOut.currentDate2']:value,
['checkInOut.date2']:obj.date,
['checkInOut.hour2']:obj.hour,
['checkInOut.long']:iDays,
['checkInOut.checkoutWeek']:getWeek(obj.date),
})
this.searchFn();
this.onClosePop();
},
1
没看出跟 datetime-picker 有什么关系，是你在 van-field 组件的 input 事件回调里修改了checkInOut的各种数据导致的。
7
没看出跟 datetime-picker 有什么关系，是你在 van-field 组件的 input 事件回调里修改了
checkInOut的各种数据导致的。
van-field的input事件，就是下面这几个，没有改checkInOut啊 onChangeName: function (e) { this.setData({
})
},
onChangePhone: function (e) {
this.setData({
['people.phone']:e.detail
})
},
onChangeId: function (e) {
this.setData({
['people.idCard']:e.detail
})
},
2
没看出跟 datetime-picker 有什么关系，是你在 van-field 组件的 input 事件回调里修改了
checkInOut的各种数据导致的。
没明白，van-filed的input怎么会改到checkInOut的数据