微信小程序日期选择器控件xxxx-xx-xx格式
这个时间选择器,不用在util里面写,直接在js里面写就好啦。这个是2022-08-09格式的,和上一个不太一样,看自己需求选择合适的选择器。
1.indx.js文件
const date = new Date();
const years = [];
const months = [];
const days = [];
//获取年
for (let i = 2022; i <= date.getFullYear() + 5; i++) {years.push("" + i);
}
//获取月份
for (let i = 1; i <= 12; i++) {if (i < 10) {i = "0" + i;}months.push("" + i);
}
//获取日期
for (let i = 1; i <= 31; i++) {if (i < 10) {i = "0" + i;}days.push("" + i);
}Page({/*** 页面的初始数据*/data: {time: '',multiArray: [years, months, days ],multiIndex: [0, 0, 0, 0, 0],choose_year: "",},/*** 生命周期函数--监听页面加载*/onLoad:function(options) {this.setData({choose_year: this.data.multiArray[0][0]})},bindMultiPickerChange: function (e) {this.setData({multiIndex: e.detail.value})const index = this.data.multiIndex;const year = this.data.multiArray[0][index[0]];const month = this.data.multiArray[1][index[1]];const day = this.data.multiArray[2][index[2]];this.setData({time: year + '-' + month + '-' + day })},//当时间选择器呈现并进行滚动选择时间时调用该函数。bindMultiPickerColumnChange: function (e) {///获取年份if (e.detail.column == 0) {let choose_year = this.data.multiArray[e.detail.column][e.detail.value];this.setData({choose_year})}if (e.detail.column == 1) {let num = parseInt(this.data.multiArray[e.detail.column][e.detail.value]);let temp = [];if (num == 1 || num == 3 || num == 5 || num == 7 || num == 8 || num == 10 || num == 12) { //判断31天的月份for (let i = 1; i <= 31; i++) {if (i < 10) {i = "0" + i;}temp.push("" + i);}this.setData({['multiArray[2]']: temp});} else if (num == 4 || num == 6 || num == 9 || num == 11) { //判断30天的月份for (let i = 1; i <= 30; i++) {if (i < 10) {i = "0" + i;}temp.push("" + i);}this.setData({['multiArray[2]']: temp});} else if (num == 2) { //判断2月份天数let year = parseInt(this.data.choose_year);if (((year % 400 == 0) || (year % 100 != 0)) && (year % 4 == 0)) {for (let i = 1; i <= 29; i++) {if (i < 10) {i = "0" + i;}temp.push("" + i);}this.setData({['multiArray[2]']: temp});} else {for (let i = 1; i <= 28; i++) {if (i < 10) {i = "0" + i;}temp.push("" + i);}this.setData({['multiArray[2]']: temp});}}}var data = {multiArray: this.data.multiArray,multiIndex: this.data.multiIndex};data.multiIndex[e.detail.column] = e.detail.value;this.setData(data);},
2.index.wxml文件
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}" ><input value='{{time}}' placeholder='办结时间' placeholder-class="placeholderStyle" /></picker>
微信小程序日期选择器控件xxxx-xx-xx格式相关推荐
- wxss 点击样式_微信小程序点击控件修改样式实例详解
微信小程序点击控件修改样式实例详解 现在要在微信小程序中实现点击控件修改样式,如下: 微信小程序中不支持直接操作dom,要实现这种效果,我们需要通过设置data,然后利用数据和界面的双向绑定来实现它. ...
- 微信小程序 音乐播放控件,监听播放事件, 音乐播放的基本实现
下面我将会为大家初步讲解利用微信小程序的音乐控件制作音乐播放器,以及会遇到的一些问题,最后会附上源码包喔! 图片以及音乐都必须使用网络链接体 播放器 播放之后闪退,是因为音乐的链接失效了所以 闪退 监 ...
- 微信小程序 加减控件
微信小程序 加减控件 <!--index.wxml--> <view class='stepper'><text class='{{minusStatus}}' type ...
- 微信小程序 input 输入框控件 bindinput 没有响应
微信小程序 input 输入框控件 bindinput 没有响应 问题: 微信小程序 input 输入框控件 bindinput 没有响应 原因: 我以为是我这边的问题,检查很多遍检查不出来,最后换个 ...
- 微信小程序的滑块控件Slider
第一步的创建我们的页面的文件: 然后的话就是我们的wxml文件: 详细的页面布局代码: <!-- todo 在我们的这个位置的话就是设置和创建我们的相关的滑块控件 --> <view ...
- 微信小程序 view 内控件位置问题、以及定位问题(column(显示为多行) 和 row (显示为一行))
一.首先需要知道: 小程序的page中的.wxml中有一个默认的最外层布局"page"(在wxml中并未显示出来),默认的width和height是适应内容大小的.可以在.wxss ...
- 微信小程序日期选择器
1 /* JS代码部分 */ 2 3 const date = new Date() 4 const years = [] 5 const months = [] 6 const days = [] ...
- 微信小程序日期时分组件(年月日时分)--复制即用
微信小程序日期组件(年月日时分)–复制即用 如图所示效果 第一步新建picker组件文件 1,pickerTime.js组件代码内容 // component/pickerTime/pickerTim ...
- 【微信小程序】选择器组件picker
文章目录 [微信小程序]选择器组件picker picker组件的定义 picker组件的类型 picker属性 共同的属性 时间选择器time 参考 [微信小程序]选择器组件picker picke ...
最新文章
- sqlplus登录时遇到的ORA-12560: TNS: 协议适配器错误解决办法
- 浅谈Python http库 httplib2
- 集合-2(Set(HashSet、TreeSet、LinkedHashSet)、List(ArrayList、LinkedList、Vector)、Map(HashMap、TreeMap...))
- CTime,Systemtime的比较还有转换成日期格式。
- Python的GUI框架PySide
- hyper服务器虚拟网卡和实际网卡,Hyper-V 3 虚拟网卡带宽应用限制
- GCC弱符号的一个应用示例
- 查找某组织下子库存与物料信息
- 6.程序员的自我修养---可执行文件的装载与进程
- WPS显示无法创建对象,请确认对象已在系统注册表中注册
- Linux下Intel网卡固件烧写工具
- 金税盘显示frm000013_开票软件(金税盘版)2020年4月征期抄报方法/季报方法!
- 旋转式光电编码器的设计动向
- java struts2教程_Struts2教程--第一章 搭建Struts2开发环境
- 2021-2027全球与中国锁模激光器市场现状及未来发展趋势
- java绘制铁路线_铁路站场简图绘制软件源码
- 9.NBA球员数据分析
- 一个硬盘的感人爱情故事
- Android 自定义view 实现点击 展示下拉选项效果
- 线段树(详细注释—pushdown写法)
热门文章
- 【看表情包学Linux】缓冲区的概念 | Git 三板斧 | 实现简易进度条
- 更改计算机网络密码,宽带密码修改后断网,怎样修改路由器密码
- 前端canvas画海报
- C++-queue:queue基本用法【q.push(x)、q.front()、q.back()、q.pop()、q.size()、q.empty()】
- 专题|从智能家居的“精智生活”谈谈边缘计算的落地生根
- 蚌埠、黄石乐高授权专卖店开业;保乐力加中国积极助力2021全国理性饮酒宣传周 | 知消...
- 学计算机高中该做些什么准备,准备事项
- 台湾最大IC封装厂近三成员工停工14天,安世半导体宣布今日起调涨价格!
- Hbuilder 连接夜神模拟器
- live2d 3行代码 为网站添加萌萌哒看板娘