使用Vant input框时有时需要调用时间选择,时间选择框要结合弹出层使用

<div class="van-cell van-field">
<span class="van-cell__title van-field__label righ">到期日:</span>
<div class="van-cell__value"><!--输入框-->
<input type="text" class="van-field__control" readonly="readonly" @click="dete()" placeholder="请选择到期日" v-model="duedate"/>
</div>
<van-popup v-model="show" position='bottom'><!--弹出层-->
<van-datetime-picker
@confirm="confirm"
@cancel="cancel"
v-model="currentDate"
type="date"
/>
</van-popup>
</div>

需要注意的是,使用自定义弹出层会触发手机自带的软键盘,可以加上 readonly="readonly"阻止软键盘

 readonly="readonly"

Vant-UI移动端时间选择框的更多相关文章

  1. 自定义vant ui steps组件效果实现

    记录个问题,当作笔记吧:因为vue项目的移动端vant ui 的step组件跟ui设计图有差别,研究了半天还是没法使用step组件,只能手动设置一个 先上效果图和代码: (1)HTML部分 <d ...

  2. android弹出时间选择框

    时间选择框: new DatePickerDialog(this, new OnDateSetListener() { @Override public void onDateSet(DatePick ...

  3. amazeui学习笔记--js插件(UI增强)--警告框Alert

    amazeui学习笔记--js插件(UI增强)--警告框Alert 一.总结 1.警告框基本样式:用am-alert声明div容器, <div class="am-alert" ...

  4. 关于iChartjs在移动端提示框tip显示不正常的解决方法

    最近项目需要使用手机图表,但是找了很久都没找到专门为移动端开发的图表,只能找一些能兼容移动端的图表控件,今天就讲讲关于iChartjs这个图形库的一点问题. 问题 iChartjs的提示框tip的显示 ...

  5. vue移动端弹框组件,vue-layer-mobile

    最近做一个移动端项目,弹框写的比较麻烦,查找资料,找到了这个组件,但是说明文档比较少,自己研究了下,把我碰到的错,和详细用法分享给大家!有疑问可以打开组件看一看,这个组件是仿layer-mobile的 ...

  6. 基于vue-cli,sass,vant的移动端项目

    项目架构 开始 vue init webpack    项目名称         //新建项目,cd进入新项目 npm install axios                    //先安装! ...

  7. pc端弹框

    pc弹框插件:http://aui.github.io/artDialog/doc/index.html#quickref-bubble PC端,手机端,layui很好用,分页啥的:http://ww ...

  8. UI高端课程

    目后佐道IT教育正在打架报名中,欢迎高中生.大学生前来学习编程技术和UI设计,招生面向全国. 石破天惊 前100个报名者免费提供高级公寓居住(里面有空调,暖气,热水器,洗衣机). 赠送神秘课程价值29 ...

  9. Vant ui

    轻量.可靠的移动端 Vue 组件库 https://youzan.github.io/vant/#/zh-CN/intro postcss-pxtorem vue:将px转化为rem,适配移动端van ...

随机推荐

  1. [idea]idea配置tomcat 标签: tomcatidea 2017-03-12 22:12 402人阅读 评论(19)

    我们在使用idea的时候,一定会遇到的一步,就是使用tomcat来发布我们的项目,那么,如何在idea中设置tomcat呢?下面就随小编来一起学习一下吧. 设置tomcat 打开设置界面 Run-&g ...

  2. 基于OSS+DataLakeAnalytics+QuickBI的Serverless的查询分析和可视化BI

    基于OSS的数据查询分析和可视化BI报表 数据存储在OSS后,有多种查询分析的方法,包括阿里云MaxCompute.DataLakeAnalytics产品等Severless查询分析服务,也可以自建S ...

  3. 【JZOJ4877】【NOIP2016提高A组集训第10场11.8】力场护盾

    题目描述 ZMiG成功粉碎了707的基因突变计划,为了人类的安全,他决定向707的科学实验室发起进攻!707并没有想到有人敢攻击她的实验室,一时间不知所措,决定牺牲电力来换取自己实验室的平安. 在实验 ...

  4. iOS 警告收录及科学快速的消除方法

    http://www.cocoachina.com/ios/20150914/13287.html 作者:董铂然 授权本站转载. 前言:现在你维护的项目有多少警告?看着几百条警告觉得心里烦么?你真的觉 ...

  5. 正则表达式问题:如何理解/href\s*=\s*(?:"(?<1>[^"]*)"|(?<1>\S+))/(转载)

    ms-help://MS.VSCC/MS.MSDNVS.2052/jscript7/html/jsjsgrpregexpsyntax.htm 该文虽有解释, 但没有样例,对我这样的初学者来说很难理解 ...

  6. jq获取浏览器可视窗口的高度

    <script> var window_height = $(window).height(); </script>

  7. 2018-8-9-win10-uwp-装机必备应用-含源代码

    title author date CreateTime categories win10 uwp 装机必备应用 含源代码 lindexi 2018-8-9 9:7:31 +0800 2018-8-9 ...

  8. [linux]vmware中linux虚拟机扩容 标签: vmware虚拟机linux 2016-09-05 08:03 315人阅读 评

    扩容原因 现阶段,虚拟机的标配都是1G内存和20G硬盘,大部分时候是够用的,但是也会出现虚拟机里面东西放多了硬盘不够用的情况,这种情况下,除了清理垃圾,另外就只能给虚拟机扩容了.因为window扩容相 ...

  9. 【NS2】NS2修改MAC协议(转载)

    NS2版本:2.34   涉及NS2代码文件: ns-2.34/mac/channel.h ns-2.34/mac/channel.cc ns-2.34/mac/wireless-phyExt.h n ...

  10. ping的使用

    ping -t cnblogs.com 可以一直ping网址显示对应的响应时间