使用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. 利用Factory-boy和sqlalchemy来批量生成数据库表数据

    测试过程中免不了要构造测试数据,如果是单条数据,还比较简单,但如果是批量数据,就比较麻烦了. 最近看到Factory_boy这个python第三方库,它通过SQLAlchemyModelFactory ...

  2. IO-01. 表格输出

    本题要求编写程序,按照规定格式输出表格. 输入格式: 本题目没有输入. 输出格式: 要求严格按照给出的格式输出下列表格: ------------------------------------Pro ...

  3. 【转载】遗传算法及matlab实现

    摘自https://www.cnblogs.com/LoganChen/p/7509702.html 1.遗传算法介绍 遗传算法,模拟达尔文进化论的自然选择和遗产学机理的生物进化构成的计算模型,一种不 ...

  4. PHPCMS快速建站系列之pc:get标签的应用

    GET标签使用方式如下: {pc:get sql="SELECT * FROM phpcms_member" cache="3600" page="$ ...

  5. PHPCMS快速建站系列之类别调用及类别显示页面

    在需要调用类别的地方,比如列表页,首先写循环前面写上一句: <?php $TYPE = getcache('type_content','commons');?> 这句就是把类别缓存加载进 ...

  6. Inno Setup 设置开机启动

    案1: 将快捷方式添加到“启动”文件夹 [Tasks] Name: "startupicon"; Description: "{cm:CreateQuickLaunchI ...

  7. nodeJs学习-13 router

    const express=require('express'); var server=express(); //目录1:/user/ var routeUser=express.Router(); ...

  8. Mybatis通过工具类根据用户名查找用户列表

    抽取SqlSessionFactoryUtils工具类,共享SqlSessionFactory创建过程 /** * SqlSessionFactory工具类 * @author:Mr.Tan * @C ...

  9. 巨蟒python全栈开发-第11阶段 ansible_project6

    今日大纲: 1.计划任务前端页面 2.计划任务新增实现 3.计划任务编辑 4.项目详情 5.文件上传 6.replace模块介绍 1.计划任务前端页面 2.计划任务新增实现 3.计划任务编辑 4.项目 ...

  10. c++ 对象池的创建

    template <class T> class ObjectPool { public: using DeleterType = std::function<void(T*)> ...