依赖vant-ui框架做个日期弹框,用到DatetimePicker插件,DatetimePicker插件没有自带弹框效果,所以也得嵌套在van-popup组件里进行弹出。
我们得把时间格式化,借助moment.js插件进行日期格式化。moment(value).format("YYYY-MM-DD")
因为我们在手机上面点击input框的时候会自动弹出手机软键盘,现在点击开始时间也会把日期组件和手机自带软键盘一起弹出!如下图
这是很不美好的。
怎么解决这个问题呢!在input加个@focus="forbid"事件就能解决了.
forbid(){
//禁止软键盘弹出
document.activeElement.blur();
}
完美解决!页面代码如下!
<template>
<div>
<Header :headerName="headerName"></Header>
<div class="content">
<div class="from">
<span class="title">借款单号:</span>
<input class="order" v-model="loanRecordNum" placeholder="请输入借款单号查询"/>
</div>
<div class="from">
<span class="title">状 态:</span>
<van-dropdown-menu>
<van-dropdown-item v-model="state" :options="option1" />
</van-dropdown-menu>
</div>
<div class="from">
<span class="title">开始时间:</span>
<input class="order" v-model='startDateInput' @focus="forbid" @click="startShow=!startShow"/>
</div>
<div class="from">
<span class="title">结束时间:</span>
<input class="order" @focus="forbid" v-model='endDateInput' @click="endShow=!endShow"/>
</div>
<div class="data">
<van-popup v-model="startShow"
closeable
position="bottom"
:style="{ height: '50%' }"
>
<van-datetime-picker
v-model="startDate"
type="date"
:min-date="minDate"
@confirm="startConfirm"
@cancel="startCancel"
/>
</van-popup>
<van-popup v-model="endShow"
closeable
position="bottom"
:style="{ height: '50%' }"
>
<van-datetime-picker
v-model="endDate"
type="date"
:min-date="minDate"
@confirm="endConfirm"
@cancel="endCancel"
/>
</van-popup>
</div>
<div class="footer" @click="toRepayment">
确 定
</div>
</div>
</div>
</template>
<script>
import Header from '@/components/Header.vue'
import { getLoanListStateSearch } from '@/service/app_main_service'
import moment from 'moment';
export default {
name: 'index',
components: {
Header
},
data () {
return {
startShow:false,
endShow:false,
headerName:'筛选查询',
state: 0,
option1: getLoanListStateSearch(),
startDate:'',
endDate:'',
startDateInput:'请选择时间',
endDateInput:'请选择时间',
minDate:new Date(),
loanRecordNum:''
}
},
created () {
},
mounted(){
},
methods: {
forbid(){
//禁止软键盘弹出
document.activeElement.blur();
},
startConfirm(value){
this.startDateInput=moment(value).format("YYYY-MM-DD");
this.startShow= false;
},
startCancel(){
this.startShow= false;
},
endConfirm(value){
this.endDateInput=moment(value).format("YYYY-MM-DD");
this.endShow= false;
},
endCancel(){
this.endShow= false;
},
toRepayment(){
console.log(this.startDateInput,this.endDateInput,'aaa')
return;
this.$router.push({
path:'/',
query:{
loanRecordNum:this.loanRecordNum,
state:this.state,
startDateInput:this.startDateInput,
endDateInput:this.endDateInput
}
})
}
}
}
</script>
<style scoped lang="scss">
.content{
position:fixed;
top:92px;
background:#fff;
width:100%;
// height:100vh;
padding-bottom:50px;
.from{
font-size:28px;
color:#858689;
font-weight:bold;
padding:45px 0px 0 68px;
.title{
font-size:28px;
color:#858689;
font-weight:bold;
padding-right:30px;
}
.van-dropdown-menu,.van-hairline--top-bottom{
display:inline-block;
width:495px;
height:75px;
line-height:75px;
background:#f4f4f4;
border-radius:5px;
.van-dropdown-menu__item{
justify-content: left !important;
.van-ellipsis{
padding-left:38px !important; ;
}
}
}
.order{
background:#f4f4f4;
height:75px;
border-radius:5px;
width:495px;
padding-left:38px;
}
}
.footer{
height:86px;
margin:120px 50px;
background:linear-gradient(top, #68e0cf 0%, #2ad7dc 100%);
line-height:86px;
text-align:center;
font-size:32px;
font-weight:bold;
color:#fff;
border-radius:6px;
}
}
</style>