vant 日期组件，弹出的时候让手机自带软键盘弹出了

依赖vant-ui框架做个日期弹框，用到DatetimePicker插件，DatetimePicker插件没有自带弹框效果，所以也得嵌套在van-popup组件里进行弹出。

日期初始化的时候，显示的值为时间流 如下图！

我们得把时间格式化，借助moment.js插件进行日期格式化。moment(value).format("YYYY-MM-DD")！

bug!!!!!!!!!

因为我们在手机上面点击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">状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态:</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">
            确&nbsp;&nbsp;定
        </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>