uniapp-uView表单中如何添加日期控件?
日期 如何 添加 控件 表单 uniapp
2023-09-27 14:26:59 时间
环境: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>
相关文章
- 【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
- 日期类型如何格式化?字符串如何转日期?
- PostgreSQL--如何计算2个日期的秒数差值
- Pandas dataframe画柱状图时,如何设置X轴日期的显示格式
- Java经典实例:纪元秒和本地日期时间互换
- SwiftUI 2 Text 显示日期和计时器时文本如何避免被截断 (教程含源码)
- mysql获取日期(将时间戳转换成短日期格式)
- 《数据科学:R语言实现》——3.4 使用日期格式
- 4.有关日期格式属性改动常识,v$nls_parameters,between and,查询指定部门的员工信息,in和null,like模糊查询,order by后面能够跟:列名、表达式、别名、序号
- echarts 解决 X轴与Y轴数据不对应问题;X轴日期显示顺序错误问题
- bootstrap日期选择器(datepicker)