微信小程序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 ...
随机推荐
- 算法问题实战策略 GALLERY
地址 https://algospot.com/judge/problem/read/GALLERY 分析 如图 显然是需要在 0 1 2三个点进行监控即可.(0 2 3 也可) 根据题意,不存在回路 ...
- vue中简单的数据请求 fetch axios
fetch 不需要额外的安装什么东西,直接就可以使用 fetch(url, { method:'post', headers: { 'Content-Type': 'application/x-www ...
- WPF 精修篇 数据触发器
原文:WPF 精修篇 数据触发器 数据触发器 可以使用Binding 来绑定控件 或者数据源 来触发相关动作 举栗子 <Window.Resources> <Style Target ...
- webpack打包优化实践
事情缘由 近段时间在做基于scratch3.0的改造项目.基于scratch-gui改造,项目本身已经很大了,然后里面还要用到scratch-blocks,scratch-vm,scratch-ren ...
- Python程序中的线程操作-守护线程
目录 一.守护线程 1.1 详细解释 1.2 守护线程例1 1.3 守护线程例2 一.守护线程 无论是进程还是线程,都遵循:守护xx会等待主xx运行完毕后被销毁.需要强调的是:运行完毕并非终止运行. ...
- html公用头部和尾部
这个方式比较简单,样式和js也有效果,还有object和iframe方式 效果图,可以看出公共的样式对于引入的文件也有效果,在加载完文件后js也是有效果的 index.html header.html ...
- 《细说PHP》第四版 样章 第23章 自定义PHP接口规范 1
如今的项目开发中,接口是很普遍的应用技术.现在好多项目组都单独设有接口开发人员.像腾讯.微博.淘宝等开放平台,其所谓的开放,就是提供一些可调用的接口,用于获取相关的信息.例如,微信用户基本信息.淘宝店 ...
- PVANET: Deep but Lightweight Neural Networks for Real-time Object Detection
URL: https://arxiv.org/abs/1608.08021 year: 2016 TL;DR PVANet 一个轻量级多物体目标检测架构, 遵循 "less channels ...
- laravel中的表单请求类型和CSRF防护(六)
laravel中为我们提供了绑定不同http请求类型的函数. Route::get('/test', function () {}); Route::post('/test', function () ...
- 在windows实现nginx滚动日志
nginx自身并不能够切分或滚动日志,因此只能用一个bat脚本按天切割日志,并删除三天前的日志 @echo off rem nginx滚动日志 rem nginx工作目录 set workspace= ...