微信小程序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 ...
随机推荐
- 高通平台:USB充电【转】
USB Battery Charging V1.2 Specification 定义了USB充电器的类型或者叫做充电源. 1. 支持的充电器类型 1.1 Standard Downstream Por ...
- git集成idea
1.Git Gui的使用 2.Ssh key 介绍及使用 3.Idea配置使用并使用git Git Gui的使用 Ssh key 介绍及使用 Ssh key介绍 我理解的就是每台电脑上会产生出一个ss ...
- 0. gitlab 一些常用知识
Monitor 但是有反映 提交慢的情况时候. 可以查看一下队列 使用root账号 gitlab最多可以同时25个队列. 多了需要排队. 可以查看一下原因.
- Java之Scanner类
Scanner类概述 一个可以解析基本类型和字符串的简单文本扫描器.简而言之,Scanner类的功能:可以实现键盘输入数据,到程序当中. 例如,以下代码使用户能够从 System.in 中读取一个数. ...
- Java成员变量和局部变量区别
成员变量和局部变量区别 变量根据定义位置的不同,我们给变量起了不同的名字.如下图所示: 区别 在类中的位置不同 (重点) 成员变量:类中,方法外 局部变量:方法中或者方法声明上(形式参数) 作用范围 ...
- 基于Docker的Consul服务发现集群搭建
在去年的.NET Core微服务系列文章中,初步学习了一下Consul服务发现,总结了两篇文章.本次基于Docker部署的方式,以一个Demo示例来搭建一个Consul的示例集群,最后给出一个HA的架 ...
- iOS:捋一遍View的生命周期
一.介绍 前面介绍了VC的生命周期,闲着没事也来捋一捋View的生命周期,简单用两个类型的View来监测.一个View纯代码创建,另一个View使用Xib创建. 二 .代码 MyCodeView: ...
- linux与ubuntu下vsftp的安装使用
vsftp工具是linux与类linux系统上常用的ftp传输工具,按百度上的说法,它的不同点与好处有九点,不明觉厉,有兴趣的可以深入验证: 一.它是一个安全.高速.稳定的FTP服务器: 二.它可以做 ...
- Oracle - 如何查找指定字符串所出现的表
需求:举个例子,oracle测试库的scott用户下面的有张emp表,emp表的ename列中有一行数据为'CLARK'.红色标记部分. SQL> select * from scott.emp ...
- Java自定义注解(1)
Java注解简介 1. Java注解(Annotation) Java注解是附加在代码中的一些元信息,用于一些工具在编译. 运行时进行解析和使用,起到说明.配置的功能. 注解相关类都包含在java.l ...