uni-app——picker组件的用法、时间、日期选择器等
2023-09-14 09:04:08 时间
一、简介
相信大家在写项目的时候会遇见时间选择器的效果,如下:
二、实现步骤
uni自带选择器组件。类型有好几种。这里以日期案例讲解。
1.找到picker组件,找到日期选择器的案例,找到案例,复制出来。
2、整体代码
<template>
<view class="content">
<view class="uni-list-cell-db">
<picker mode="date" :value="date" @change="bindDateChange" fields="month">
<view class="uni-input">
<!-- 日期 -->
{{date}}
<!-- 小三角的图片 -->
<image src="/static/images/select.png" mode="aspectFill"></image>
</view>
</picker>
</view>
</view>
</template>
<script>
export default {
data() {
const currentDate = this.getDate({
format: true
})
return {
date: currentDate,
}
},
onLoad() {
},
computed: {
},
methods: {
bindDateChange: function(e) {
console.log(e);
let str = e.detail.value;
let t = str.replace("-", "年") + '月';
console.log(t);
this.date = t
},
getDate(type) {
const date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
month = month > 9 ? month : '0' + month;
return `${year}年${month}月`;
}
}
}
</script>
<style lang="scss">
.uni-input image {
width: 25rpx;
height: 18rpx;
margin-left: 20rpx;
}
picker {
display: flex;
}
</style>
let str = e.detail.value;
let t = str.split('-');
console.log(t);
this.date =t[0]+'年'+t[1]+'月'+t[2]+'日'
三、总结
相关文章
- [android]android自动化测试十三之JavaMonkey跨APP操作
- 第三百七十六节,Django+Xadmin打造上线标准的在线教育平台—创建用户操作app,在models.py文件生成5张表,用户咨询表、课程评论表、用户收藏表、用户消息表、用户学习表
- uni-app: 使用自定义字体文件(hbuilderx 3.6.18)
- [APP] Android 开发笔记 004-Android常用基本控件使用说明
- [APP] Android 开发笔记 001-环境搭建与命令行创建项目
- Android特效专辑(四)——APP主页框架TabHost绑定ViewPager的替换者TabLayout
- [React] Override webpack config for create-react-app without ejection
- wx.getUserProfile is not a function;at App onError function;at api showModal
- Android报错: exposed beyond app through Intent.getData()
- Android 12.0 根据app包名授予app监听系统通知权限
- Android 9.0 系统settings app详情页控制开启关闭流量数据的开关
- 不root的情况下 查看App的数据表
- Appium自动化测试基础 — APP模拟手势高级操作(一)
- 【uni-app高级实战】手把手带你学习一个纯实战复杂项目的开发2/100