微信小程序picker重写,精确到时分秒
https://developers.weixin.qq.com/miniprogram/dev/component/picker.html
微信小程序提供的picker组件,只精确到分,项目中需要秒,就重写一个
项目例子地址:https://github.com/zhaobao1830/ylzs.git 体征信息录入页面 sign-input.wxml
timePicker.js
const formatNumber = n => {
n = n.toString()
return n[] ? n : '' + n
}
function getLoopArray(start, end) {
var start = start || ;
var end = end || ;
var array = [];
for (var i = start; i <= end; i++) {
array.push(formatNumber(i));
}
return array;
}
function getNewTimeArry() {
// 当前时间的处理
var newDate = new Date();
var hour = formatNumber(newDate.getHours()),
minu = formatNumber(newDate.getMinutes()),
seco = formatNumber(newDate.getSeconds());
return [hour, minu, seco];
}
function timePicker(date) {
// 返回默认显示的数组和联动数组的声明
var time = [];
var timeArray = [[], [], []];
// 默认开始显示数据
var defaultTime = date ? [...date.split(':')] : getNewTimeArry();
// 处理联动列表数据
/*时分秒*/
timeArray[] = getLoopArray(, );
timeArray[] = getLoopArray(, );
timeArray[] = getLoopArray(, );
timeArray.forEach((current, index) => {
time.push(current.indexOf(defaultTime[index]));
});
return {
timeArray: timeArray,
time:time,
}
}
module.exports = {
timePicker: timePicker
}
util.js
const formatTime = date => {
const year = date.getFullYear()
const month = date.getMonth() +
const day = date.getDate()
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
const formatDay = date => {
const year = date.getFullYear()
const month = date.getMonth() +
const day = date.getDate()
return [year, month, day].map(formatNumber).join('-')
}
// 时分秒
const formatTimeN = date => {
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
return [hour, minute, second].map(formatNumber).join(':')
}
const formatNumber = n => {
n = n.toString()
return n[] ? n : '' + n
}
module.exports = {
formatTime: formatTime,
formatDay: formatDay,
formatTimeN: formatTimeN,
formatNumber: formatNumber
}
sign-input.wxml:
<view class="dateM item-con">
<text>时间:</text>
<picker mode="multiSelector" value="{{startTime}}" bindchange="startTimeChange" bindcolumnchange="startTimeColumn" range="{{startTimeArray}}">
<view class="picker">
{{startTimeArray[][startTime[]]}}:{{startTimeArray[][startTime[]]}}:{{startTimeArray[][startTime[]]}}
</view>
</picker>
</view>
sign-input.js
// pages/sign-input/sign-input.js
var util = require("../../utils/util");
var timePicker = require('../../utils/timePicker.js');
var nowDate = new Date();
Page({ /**
* 页面的初始数据
*/
data: {
dateY: util.formatDay(nowDate), // 日期
startTime: util.formatTimeN(nowDate),
dateM: '', // 时间
temperature: '',
bloodSugar: '',
bloodPressure: '',
urineVolume: '',
intakeVolume: '',
liquidOutput: '',
stoolFrequency: ''
},
formSubmit: function (e) {
var submitSign = e.detail.value
submitSign.dateY = this.data.dateY
var startTime = this.data.startTime
for (var i = ; i < startTime.length; i++) {
startTime[i] = util.formatNumber(startTime[i])
}
submitSign.dateM = startTime.join(":")
var storageSignList = wx.getStorageSync('signList');
storageSignList.push(submitSign)
wx.setStorageSync('signList', storageSignList)
this.toastShow()
this.formReset()
},
formReset: function () {
var dataY = util.formatDay(nowDate)
var obj = timePicker.timePicker(util.formatTimeN(nowDate));
this.setData({
dateY: dataY,
startTime: obj.time,
startTimeArray: obj.timeArray,
temperature: '',
bloodSugar: '',
bloodPressure: '',
urineVolume: '',
intakeVolume: '',
liquidOutput: '',
stoolFrequency: ''
})
},
// 选择时间的时候触发
startTimeColumn(e) {
var startTimeArr = this.data.startTime;
startTimeArr[e.detail.column] = e.detail.value
this.setData({
startTime: startTimeArr
});
},
// 确定的时候触发
startTimeChange: function (e) {
var startTimeArr = this.data.startTime;
startTimeArr[e.detail.column] = e.detail.value;
this.setData({
startTime: startTimeArr
}); },
// 提示信息
toastShow () {
wx.lin.showToast({
title: '添加成功~',
icon: 'success',
iconStyle: 'color:#7ec699; size: 60',
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log(util.formatTimeN(nowDate))
// 获取时分秒数组,在页面中显示
var obj = timePicker.timePicker(util.formatTimeN(nowDate));
this.setData({
startTimeArray: obj.timeArray,
startTime: obj.time
});
}
})
微信小程序picker重写,精确到时分秒的更多相关文章
- 微信小程序picker组件两列关联使用方式
在使用微信小程序picker组件时候,可以设置属性 mode = multiSelector 意为多列选择,关联选择,当第一列发生改变时侯,第二列甚至第三列发生相应的改变.但是官方文档上给的只 ...
- 微信小程序picker组件关于objectArray数据类型绑定
一.前言: 我发现很多的同学都在抱怨说微信小程序的picker的mode = selector/mode = multiSelector 无法实现Object Array数据类型的绑定,其实很多人就想 ...
- 微信小程序——picker通过value返回你想获取的值
关于微信小程序中的picker使用方法可以访问:picker-小程序 从它的官方文档中,可以看出它返回的value值是它range的下标: 在项目中,我们大多数时候传的值并不是需要这个下标,而是其他的 ...
- mpvue + 微信小程序 picker 实现自定义多级联动 超简洁
微信小程序官网只提供了省市区的三级联动,实际开发中更多的是自定义的多级联动: 依照微信小程序官网提供的自定义多级联动,需要使用到picker 的多列选择器,即设置 mode = multiSelect ...
- 微信小程序—picker(滚动选择器)
官方api:https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html 上边是官网的api.小程序中,底部下拉滚动选择主要有这几种 ...
- 微信小程序如何重写Page方法?以及重写Page方法给开发者带来的好处
17,18年的时候,我当时主要开发小程序,那时候领导想看一下小程序的访问量,还有一些埋点的需求,于是我们的小程序就接入了阿拉丁统计. 阿拉丁的接入方式除了配置以外,主要就一行引入代码.官方要求将以下代 ...
- 微信小程序picker的坑
js文件: Companyarr: [{ id: '公司id1', companyname: "公司1的名字" }, { id: '公司id2', companyname: &qu ...
- 微信小程序picker下拉绑定数据
页面部分 <picker mode = "selector" bindchange="bindPickerChange" value="{{pr ...
- 微信小程序 picker 中range-key的坑
<picker class='fr' bindchange="onChangeBuild" range-key="{{'num'}}" value=&qu ...
随机推荐
- Linux第三章-Linux搭建Java环境
本文安装系统是基于 CentOS 7 版本及以上 一.安装JDK 1.先去 Oracle官网 下载Linux1.8的版本以 .tar.gz 为后缀的文件,我这里用的是 jdk-8u181-linux- ...
- ref的使用
参考地址https://www.cnblogs.com/goloving/p/9404099.html <img src="./01.jpg" ref="img&q ...
- Educational Codeforces Round 71 (Rated for Div. 2)
传送门 A.There Are Two Types Of Burgers 签到. B.Square Filling 签到 C.Gas Pipeline 每个位置只有"高.低"两种状 ...
- shell基础概念, if+命令, shell中引用python, shell脚本的几种执行方式
说明: 虚拟机中shell_test目录用来练习shell, 其中有个test.log文件用来存放日志 #!/usr/bin/bash # shell文件开头, 用来指定该文件使用哪个解释器 ...
- Nacos集群搭建过程详解
Nacos的单节点,也就是我们最开始使用的standalone模式,配置的数据是默认存储到内嵌的数据库derby中. 如果我们要搭建集群的话,那么肯定是不能用内嵌的数据库,不然数据无法共享.集群搭建的 ...
- Kettle在windows上安装
Kettle是一款国外开源的ETL工具,纯java编写,可以在Windows.Linux.Unix上运行,数据抽取高效稳定. 因为有个日常提数,工作日每天都要从数据库中提取数据,转换为excel,再以 ...
- H3C DRNI学习
DRNI:Distributed Resilient Network Interconnect,分布式弹性网络互连.DR:分布式聚合接口IPP:内部控制链路端口IPL:内部控制链路DRCP报文:分布式 ...
- idea设置类注释和方法注释
类注释 1.file-->setting-->editor-->file and code templates-->includes--> file header 2.在 ...
- SEH hook 的一种方法
Windows内核分析索引目录:https://www.cnblogs.com/onetrainee/p/11675224.html 技术学习来源:火哥(QQ:471194425) 该方法的一些原理暂 ...
- C#排序案例
using System; namespace 排序案例 { class Program { static void Main(string[] args) { //定义随机数列 int a, b, ...