环境:uniapp,uview-ui,Picker 选择器,

本次我们用uview中的Picker 选择器来写一个日期功能

此选择器有四种弹出模式

一是时间模式,可以配置年,日,月,时,分,秒参数
二是地区模式,可以配置省,市,区参数
三是单列模式
四是多列模式

基本使用:

通过mode参数设置为time、region、selector、multiSelector,区分时间、地区、单列,多列模式。
通过v-model双向绑定一个值为布尔值的变量,来打开或者收起picker。

<template>
<view>
<u-picker v-model="show" mode="time"></u-picker>
<u-button @click="show = true">打开</u-button>
</view>
</template> <script>
export default {
data() {
return {
show: false
}
}
}
</script>

案例使用:

//数据渲染
<u-form-item :label-position="labelPosition" label="日期" prop="time">
<u-input :border="border" placeholder="请输入日期" v-model="model.birthdate" type="select" :select-open="pickerTime" @click="pickerTime = true"></u-input>
</u-form-item> //日期控件
<u-picker mode="time" v-model="pickerTime" @confirm="timeConfirm"></u-picker> <script>
pickerTime: false,//控制日期显示 methods: {
//日期数据回调
timeConfirm(e){
console.log(e);
this.model.birthdate = e.year + '-' + e.month + '-' + e.day;
},
}
</script>

uniapp-uView表单中如何添加日期控件?的更多相关文章

  1. BarTender 2016表单中的“秤显示”控件

    BarTender 2016中的表单是一个非常实用的工具,它可以实现数据输出提示,查询提示和同一表单的记录选择.这些都离开可供添加的控件,“秤显示”控件也是我们打印尝尝需要涉及的,今天我们就来看看什么 ...

  2. layui table 表格上添加日期控件

    方法一: var tableInit = table.render({ elem: '#tbtxrz' , method: 'post' , data: jsonData , height: &quo ...

  3. DataGrid的列上添加日期控件

    今天的使用EasyUI datagrid的时候,遇到了如下问题,如下图:

  4. 在工作表左侧中添加TreeView控件

    开发环境基于VSTO:visual studio 2010,VB .Net,excel 2007,文档级别的定制程序. 需求是在sheet的左侧停靠System.Windows.Forms.TreeV ...

  5. 日期控件My97 DatePicker 的使用

    1.解压后添加My97DatePicker文件夹 2.引入WdatePicker.js文件 日期控件My97DatePicker的使用.html <!DOCTYPE html> <h ...

  6. TWaver初学实战——如何在TWaver属性表中添加日历控件?

    在日期输入框中添加日历控件,是一种非常流行和实用的做法.临渊羡鱼不如退而写代码,今天就看看在TWaver中是如何实现的.   资源准备   TWaver的在线使用文档中,就有TWaver Proper ...

  7. jquery datepicker-强大的日期控件

    在web开发中,总会遇到需要用户输入日期的情况.一般都是提供一个text类型的input供用户输入日期.然而,这种方式,开发人员必须对用户输入的日期进行验证,判断其合法性.除此之外,让用户输入日期也是 ...

  8. jsp日期插件My97DatePicker 强大的日期控件 使用方便简单

    本文属转载(希望对编程爱好者有所帮助)详情请访问官方网站 http://www.my97.net/dp/index.asp 一. 简介 1. 简介 目前的版本是:4.7 2. 注意事项 My97Dat ...

  9. 日期控件My97DatePicker的使用

    一. 简介 1. 简介 目前的版本是:4.8 2. 注意事项 My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名 My97DatePicker.h ...

随机推荐

  1. [loj2049]网络

    考虑整体二分,假设二分到区间$[l,r]$,即要对若干个询问,判断这些询问的答案与$mid=\lfloor\frac{l+r}{2}\rfloor$的关系 根据题意,答案$\le mid$等价于重要度 ...

  2. [loj3272]汉堡肉

    当$k\le 3$,这是一个经典的问题 设所有矩形左下角横纵坐标的最大值为$(x_{1},y_{1})$,右上角横纵坐标的最小值为$(x_{2},y_{2})$,那么必然存在一组合法解满足其中一点为$ ...

  3. mysql注入绕过information_schema过滤

    1.利用mysql5.7新增的sys.schema_auto_increment_columns 这是sys数据库下的一个视图,基础数据来自与information_schema,他的作用是对表的自增 ...

  4. 【JAVA】笔记(12)---集合(1)-概述篇

    楔子: 1.集合相当于一个容器,数组虽然也相当于一个容器,但是集合的特性更符合我们日常开发的需求,所以集合的使用更加频繁: 2.集合特性: 1)集合的长度可变,数组一经初始化,长度固定: 2)集合可以 ...

  5. idea明明设置了utf-8, 但是提交的配置文件到远程中文乱码

    IDEA中编辑的.properties配置文件提交到Git后显示乱码 解决方法:

  6. Codeforces 1175G - Yet Another Partiton Problem(李超线段树)

    Codeforces 题面传送门 & 洛谷题面传送门 这是一道李超线段树的毒瘤题. 首先我们可以想到一个非常 trivial 的 DP:\(dp_{i,j}\)​ 表示前 \(i\)​ 个数划 ...

  7. R语言与医学统计图形-【26】ggplot2主题函数

    ggplot2绘图系统--主题函数 1. theme函数 theme_*系列函数提供了9种不同的风格. theme_grey/gray/bw/linedraw/light/minimal/classi ...

  8. MariaDB——数据库登录

    登录MariaDB数据库,用root账户和密码: 显示所有数据库列表:其中,information_schema.performance_schema.test.mysql,这4个库表是数据库系统自带 ...

  9. php5.6升级7

    1. 检查当前安装的 PHP查看当前 PHP 版本 php -v查看当前 PHP 相关的安装包 yum list installed | grep php2. 更换 RPM 源#Centos 5.X: ...

  10. 内网穿透—使用 frp 实现内外网互通

    前言 什么是内网穿透? 内网穿透,又叫 NET 穿透,是计算机用语.用通俗的说法就是你家里的个人电脑,可以直接被外网的人访问.例如你在公司,不通过远程工具,直接也可以访问到家里的电脑(本文章特指 we ...