uniapp-uView表单中如何添加日期控件?
2021-12-18 16:02
776 查看
环境: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>
相关文章推荐
- uni-app中如何使用5+的原生界面控件(包括map、video、livepusher、barcode、nview)
- uni-app Vue 如何给组件添加点击事件
- C# 如何向Excel添加、删除表单控件
- uni-app中如何使用5+的原生界面控件(包括map、video、livepusher、barcode、nview)
- 关于Web项目里的给表单验证控件添加结束时间不得小于开始时间的验证方法,日期转换和前台显示格式之间,还有JSON取日期数据格式转换成标准日期格式的问题
- 用gradlew编译打包的app,如何添加进Android源码做build
- 如何为现有控件的DependencyProperty添加Value Changed事件?
- ajax 提交表单 日期字符串后台怎么接收 或者请求404 如何解决
- CheckBoxList控件基本用法 如何给DropDownList控件添加边框[整理]
- android launcher添加一个app,如何知道classname
- 如何把日期控件,导入jqgrid的编辑form
- kivy前三节代码-添加控件按钮屏幕(app)
- Antd Form表单输入控件如何清空
- 如何在控件上添加右键菜单
- ASPNET-控件-Calendar-如何:在 Calendar 控件中显示数据库中的选定日期
- 扫描识别控件Dynamic .NET TWAIN使用教程:如何将事件添加到应用程序中
- (javascript)动态添加的控件如何设置其属性
- 如何在VS工具箱中添加DevExpress控件
- PDF管理控件Spire.PDF使用教程:如何创建PDF表格并添加图片到表格
- 如何应用日期,时间控件