使用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. laravel后台扩展包

    https://github.com/the-control-group/voyager

  2. 【JZOJ4771】【NOIP2016提高A组模拟9.9】爬山

    题目描述 国家一级爬山运动员h10今天获得了一张有着密密麻麻标记的地图,在好奇心的驱使下,他又踏上了去爬山的路. 对于爬山,h10有一个原则,那就是不走回头路,于是他把地图上的所有边都标记成了有向边. ...

  3. java中的volatile和synchronized

    关于volatile和同步相关的东西,网上有太多错误和解释不清的东西, 所以查阅相关书籍和文章后总结如下, 如果还是也存在不正确的内容,请一定要指出来, 以免误人子弟:) 1. 原子性与可视性 原子性 ...

  4. Balanced Binary Tree 判断平衡二叉树

    Given a binary tree, determine if it is height-balanced. For this problem, a height-balanced binary ...

  5. java返回结果集封装

    1.返回消息统一定义文件CodeMsg.java public class CodeMsg { private int retCode; private String message; // 按照模块 ...

  6. Java练习 SDUT-2787_加密术

    加密术 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 加密技术是一种常用的安全保密手段,利用加密技术可以把重要的数据变 ...

  7. tensorflow兼容处理 tensorflow.compat.v1

    https://www.wandouip.com/t5i183316/ 引言 原来引用过一个段子,这里还要再引用一次.是关于苹果的.大意是,苹果发布了新的开发语言Swift,有非常多优秀的特征,于是很 ...

  8. javascript简介 标签: javascript 2015-11-13 12:13 1712人阅读 评论(39)

    JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果.通常JavaScript脚本是通过嵌入在HTML中来实现 ...

  9. 设置select和option的文字居中

    select{ width: auto;      padding: 0 1%; //左右一定要设置      margin: 0; } option{ text-align:center; }

  10. 05Redis入门指南笔记(持久化)

    Redis的强劲性能很大程度上是由于将所有数据都存储在了内存中,然而当Redis重启后,所有存储在内存中的数据就会丢失.在一些情况下,希望Redis能将数据从内存中以某种形式同步到硬盘中,使得重启后可 ...