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重写,精确到时分秒的更多相关文章

  1. 微信小程序picker组件两列关联使用方式

    在使用微信小程序picker组件时候,可以设置属性   mode = multiSelector   意为多列选择,关联选择,当第一列发生改变时侯,第二列甚至第三列发生相应的改变.但是官方文档上给的只 ...

  2. 微信小程序picker组件关于objectArray数据类型绑定

    一.前言: 我发现很多的同学都在抱怨说微信小程序的picker的mode = selector/mode = multiSelector 无法实现Object Array数据类型的绑定,其实很多人就想 ...

  3. 微信小程序——picker通过value返回你想获取的值

    关于微信小程序中的picker使用方法可以访问:picker-小程序 从它的官方文档中,可以看出它返回的value值是它range的下标: 在项目中,我们大多数时候传的值并不是需要这个下标,而是其他的 ...

  4. mpvue + 微信小程序 picker 实现自定义多级联动 超简洁

    微信小程序官网只提供了省市区的三级联动,实际开发中更多的是自定义的多级联动: 依照微信小程序官网提供的自定义多级联动,需要使用到picker 的多列选择器,即设置 mode = multiSelect ...

  5. 微信小程序—picker(滚动选择器)

    官方api:https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html 上边是官网的api.小程序中,底部下拉滚动选择主要有这几种 ...

  6. 微信小程序如何重写Page方法?以及重写Page方法给开发者带来的好处

    17,18年的时候,我当时主要开发小程序,那时候领导想看一下小程序的访问量,还有一些埋点的需求,于是我们的小程序就接入了阿拉丁统计. 阿拉丁的接入方式除了配置以外,主要就一行引入代码.官方要求将以下代 ...

  7. 微信小程序picker的坑

    js文件: Companyarr: [{ id: '公司id1', companyname: "公司1的名字" }, { id: '公司id2', companyname: &qu ...

  8. 微信小程序picker下拉绑定数据

    页面部分 <picker mode = "selector" bindchange="bindPickerChange" value="{{pr ...

  9. 微信小程序 picker 中range-key的坑

    <picker class='fr' bindchange="onChangeBuild" range-key="{{'num'}}" value=&qu ...

随机推荐

  1. 高通平台:USB充电【转】

    USB Battery Charging V1.2 Specification 定义了USB充电器的类型或者叫做充电源. 1. 支持的充电器类型 1.1 Standard Downstream Por ...

  2. git集成idea

    1.Git Gui的使用 2.Ssh key 介绍及使用 3.Idea配置使用并使用git Git Gui的使用 Ssh key 介绍及使用 Ssh key介绍 我理解的就是每台电脑上会产生出一个ss ...

  3. 0. gitlab 一些常用知识

    Monitor 但是有反映  提交慢的情况时候.  可以查看一下队列 使用root账号 gitlab最多可以同时25个队列.  多了需要排队. 可以查看一下原因.

  4. Java之Scanner类

    Scanner类概述 一个可以解析基本类型和字符串的简单文本扫描器.简而言之,Scanner类的功能:可以实现键盘输入数据,到程序当中. 例如,以下代码使用户能够从 System.in 中读取一个数. ...

  5. Java成员变量和局部变量区别

    成员变量和局部变量区别 变量根据定义位置的不同,我们给变量起了不同的名字.如下图所示: 区别 在类中的位置不同  (重点) 成员变量:类中,方法外 局部变量:方法中或者方法声明上(形式参数) 作用范围 ...

  6. 基于Docker的Consul服务发现集群搭建

    在去年的.NET Core微服务系列文章中,初步学习了一下Consul服务发现,总结了两篇文章.本次基于Docker部署的方式,以一个Demo示例来搭建一个Consul的示例集群,最后给出一个HA的架 ...

  7. iOS:捋一遍View的生命周期

    一.介绍 前面介绍了VC的生命周期,闲着没事也来捋一捋View的生命周期,简单用两个类型的View来监测.一个View纯代码创建,另一个View使用Xib创建. 二 .代码 MyCodeView:  ...

  8. linux与ubuntu下vsftp的安装使用

    vsftp工具是linux与类linux系统上常用的ftp传输工具,按百度上的说法,它的不同点与好处有九点,不明觉厉,有兴趣的可以深入验证: 一.它是一个安全.高速.稳定的FTP服务器: 二.它可以做 ...

  9. Oracle - 如何查找指定字符串所出现的表

    需求:举个例子,oracle测试库的scott用户下面的有张emp表,emp表的ename列中有一行数据为'CLARK'.红色标记部分. SQL> select * from scott.emp ...

  10. Java自定义注解(1)

    Java注解简介 1. Java注解(Annotation) Java注解是附加在代码中的一些元信息,用于一些工具在编译. 运行时进行解析和使用,起到说明.配置的功能. 注解相关类都包含在java.l ...