使用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. ChaosBlade 发布对 C++ 应用混沌实验的支持

    前言 为满足 C++ 应用系统故障演练,阿里妈妈安全生产团队开源了 C++ 混沌实验执行器,填补了 C++ 应用混沌工程实验的空白,其遵循<混沌实验模型>,可通过 ChaosBlade 工 ...

  2. Wireshark 基本使用方法

    学习于: http://www.cnblogs.com/TankXiao/archive/2012/10/10/2711777.html

  3. LintCode_408 二进制求和

    给定两个二进制字符串,返回他们的和(用二进制表示). 思路 string s = ""; 目标字符串 cp 存储进位;取 0或1 sum = a[i] + b[i] + cp;分为 ...

  4. Android书架实现

    转自http://blog.csdn.net/wangkuifeng0118/article/details/7944215 书架效果: 下面先看一下书架的实现原理吧! 首先看一下layout下的布局 ...

  5. day5 from 金角大王

    Python 之路 Day5 - 常用模块学习   本节大纲: 模块介绍 time &datetime模块 random os sys shutil json & picle shel ...

  6. C​#​字​符​串​与​ ​b​y​t​e​数​据​的​互​相​转​换

    string和byte[]的转换 (C#) string类型转成byte[]: byte[] byteArray = System.Text.Encoding.Default.GetBytes ( s ...

  7. 浅谈JavaScript的面向对象和它的封装、继承、多态

    写在前面 既然是浅谈,就不会从原理上深度分析,只是帮助我们更好地理解... 面向对象与面向过程 面向对象和面向过程是两种不同的编程思想,刚开始接触编程的时候,我们大都是从面向过程起步的,毕竟像我一样, ...

  8. 前端规范1-HTML规范

    HTML规范 1代码风格(参1,) 使用Tab字符(四个空格长度) 层级关系太多时尽量写在一行,但保证每行代码不宜过长  例,代码不宜过长 例,尽量写在一行 2命名(参1,) class必须使用小写, ...

  9. Hibernate中的配置对象

    数据库连接:由 Hibernate 支持的一个或多个配置文件处理.这些文件是 hibernate.properties 和 hibernate.cfg.xml. 类映射设置:这个组件创造了 Java ...

  10. 小爬爬5:重点回顾&&移动端数据爬取1

    1. ()什么是selenium - 基于浏览器自动化的一个模块 ()在爬虫中为什么使用selenium及其和爬虫之间的关联 - 可以便捷的获取动态加载的数据 - 实现模拟登陆 ()列举常见的sele ...