<picker mode="multiSelector" value="{{dateTime1}}" bindchange="changeDateTime1" bindcolumnchange="changeDateTimeColumn1" range="{{dateTimeArray1}}">
<view class="text">
{{dateTimeArray1[0][dateTime1[0]]}}-{{dateTimeArray1[1][dateTime1[1]]}}-{{dateTimeArray1[2][dateTime1[2]]}} {{dateTimeArray1[3][dateTime1[3]]}}:{{dateTimeArray1[4][dateTime1[4]]}}:{{dateTimeArray1[5][dateTime1[5]]}}
</view>
</picker>
data: {
dateTimeArray1: null,
dateTime1: null,
startYear: null,
endYear: null,
},
onLoad: function(options) {
let that = this; // 获取完整的年月日 时分秒,以及默认显示的数组
var obj = dateTimePicker.dateTimePicker(this.data.startYear, this.data.endYear);
var obj1 = dateTimePicker.dateTimePicker(this.data.startYear, this.data.endYear);
// 精确到分的处理,将数组的秒去掉
//var lastArray = obj1.dateTimeArray.pop();
//var lastTime = obj1.dateTime.pop(); this.setData({
dateTimeArray1: obj1.dateTimeArray,
dateTime1: obj1.dateTime
});
},
// 选择日期时间
changeDateTime1(e) {
this.setData({
dateTime1: e.detail.value
});
},
changeDateTimeColumn1(e) {
var arr = this.data.dateTime1,
dateArr = this.data.dateTimeArray1; arr[e.detail.column] = e.detail.value;
dateArr[2] = dateTimePicker.getMonthDay(dateArr[0][arr[0]], dateArr[1][arr[1]]); this.setData({
dateTimeArray1: dateArr,
dateTime1: arr });
},

引入文件

var dateTimePicker = require('../../utils/dateTimePicker.js');
function withData(param) {
return param < 10 ? '0' + param : '' + param;
}
function getLoopArray(start, end) {
var start = start || 0;
var end = end || 1;
var array = [];
for (var i = start; i <= end; i++) {
array.push(withData(i));
}
return array;
}
function getMonthDay(year, month) {
var flag = year % 400 == 0 || (year % 4 == 0 && year % 100 != 0), array = null; switch (month) {
case '01':
case '03':
case '05':
case '07':
case '08':
case '10':
case '12':
array = getLoopArray(1, 31)
break;
case '04':
case '06':
case '09':
case '11':
array = getLoopArray(1, 30)
break;
case '02':
array = flag ? getLoopArray(1, 29) : getLoopArray(1, 28)
break;
default:
array = '月份格式不正确,请重新输入!'
}
return array;
}
function getNewDateArry() {
// 当前时间的处理
var newDate = new Date();
var year = withData(newDate.getFullYear()),
mont = withData(newDate.getMonth() + 1),
date = withData(newDate.getDate()),
hour = withData(newDate.getHours()),
minu = withData(newDate.getMinutes()),
seco = withData(newDate.getSeconds()); return [year, mont, date, hour, minu, seco];
}
function dateTimePicker(startYear, endYear, date) {
// 返回默认显示的数组和联动数组的声明
var dateTime = [], dateTimeArray = [[], [], [], [], [], []];
var start = startYear || 1978;
var end = endYear || 2100;
// 默认开始显示数据
var defaultDate = date ? [...date.split(' ')[0].split('-'), ...date.split(' ')[1].split(':')] : getNewDateArry();
// 处理联动列表数据
/*年月日 时分秒*/
dateTimeArray[0] = getLoopArray(start, end);
dateTimeArray[1] = getLoopArray(1, 12);
dateTimeArray[2] = getMonthDay(defaultDate[0], defaultDate[1]);
dateTimeArray[3] = getLoopArray(0, 23);
dateTimeArray[4] = getLoopArray(0, 59);
dateTimeArray[5] = getLoopArray(0, 59); dateTimeArray.forEach((current, index) => {
dateTime.push(current.indexOf(defaultDate[index]));
}); return {
dateTimeArray: dateTimeArray,
dateTime: dateTime
}
}
module.exports = {
dateTimePicker: dateTimePicker,
getMonthDay: getMonthDay
}

效果:

微信小程序日期时间选择器(精确到秒)的更多相关文章

  1. 微信小程序----日期时间选择器(自定义精确到分秒或时段)

    声明 bug:由于此篇博客是在bindcolumnchange事件中做的值的改变处理,因此会出现当你选择时,没有点击确定,直接取消返回后,会发现选择框的值依然改变.造成原因:这一点就是由于在bindc ...

  2. picker-view、微信小程序自定义时间选择器(非官方)

    picker-view自定义时间选择器 官网的自定义时间选择器比较简陋.日期不准 下面是我自己写的一个demo <view class="baseList"> < ...

  3. mpvue开发微信小程序之时间+日期选择器

    最近在做微信小程序,技术栈为mpvue+iview weapp组件库. 因项目需求,要用到日期+时间选择器,iview组件库目前还未提供时间日期选择器的组件,小程序官方组件日期时间也是分开的,在简书上 ...

  4. 微信小程序picker重写,精确到时分秒

    https://developers.weixin.qq.com/miniprogram/dev/component/picker.html 微信小程序提供的picker组件,只精确到分,项目中需要秒 ...

  5. 微信小程序 — 自定义picker选择器弹窗内容+textarea穿透bug

    微信小程序中定义好的几种picker选择器,不管是日期选择器还是地区选择器,或是其他的都只有定死的样式和内容. 但是大多数开发程序的情况下还是需要自己写样式的,或是内容的. 例如: 代码如下: < ...

  6. 自定义省市选择器 微信小程序多列选择器

    由于微信小程序的选择器为省市区选择器共3列 如我仅需要省市2列的选择器 就需要我们另寻他法找来找去没有合适的 只能自己写了 1. 首先我们把所需要的省数据 市县数据放在一个 p_c.js 文件里面,使 ...

  7. mpvue微信小程序多列选择器用法:实现省份城市选择

    前言 微信小程序默认给我们提供了一个省市区的picker选择器,只需将mode设置为region即可 <picker mode="region" bindchange=&qu ...

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

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

  9. [BUG]微信小程序ios时间转换

    描述 小程序ios   new Date('2019-08-14T08:00:00.000+0000')   显示为  <Date: null>. '2019-08-14T08:00:00 ...

随机推荐

  1. Codeforces Round #651 (Div. 2) E. Binary Subsequence Rotation(dp)

    题目链接:https://codeforces.com/contest/1370/problem/E 题意 给出两个长为 $n$ 的 $01$ 串 $s$ 和 $t$,每次可以选择 $s$ 的一些下标 ...

  2. GPLT L2-010 排座位 (并查集)

    Tips: 数据范围较小时可把二维数组当做map<pair<int,int>,int>使用. #include <bits/stdc++.h> using name ...

  3. 【51nod1674】区间的价值 V2(算法效率--位运算合并优化+链表实现)

    题目链接:  51nod1674 题意:规定一个区间的价值为这个区间中所有数and起来的值与这个区间所有数or起来的值的乘积.现在l有一个 N 个数的序列,问所有n*(n+1)/2个区间的贡献的和对1 ...

  4. CF-gym/101810 J、T-Shirts Dilemma

    题目链接:点我 题意: 给你一个区间[a,b],让你从里面选一个连续子区间[x,y](子区间可以为[a,b]),把这个区间的所有数或起来x|x+1|x+2|...|y 你要使得区间[x,y]异或起来的 ...

  5. Codeforces Round #171 (Div. 2) B. Books (模拟队列)

    题意:有一组数,问子数组和最大不超过\(t\)的最多元素个数. 题解:用数组模拟队列,不断的往里面放,队列中的元素之和大于\(t\),就不断地从队头弹出直到满足条件,维护一个最大值即可. 代码: in ...

  6. rabbitmq常见面试题

    1.使用RabbitMQ有什么好处?1.解耦,系统A在代码中直接调用系统B和系统C的代码,如果将来D系统接入,系统A还需要修改代码,过于麻烦! 2.异步,将消息写入消息队列,非必要的业务逻辑以异步的方 ...

  7. log4net GetLogger(source).IsInfoEnabled = false

    GetLogger(source).IsInfoEnabled = false解决办法 在.net core中需要把log4net.config放到 ITCP.Web\ITCP.Web\obj\Rel ...

  8. Ubuntu第一次使用注意点

    第一次装完Ubuntu登录,打开命令行,登录的不是root权限,切换root不成功: 这个问题产生的原因是由于Ubuntu系统默认是没有激活root用户的,需要我们手工进行操作,在命令行界面下,或者在 ...

  9. Dyno-queues 分布式延迟队列 之 基本功能

    Dyno-queues 分布式延迟队列 之 基本功能 目录 Dyno-queues 分布式延迟队列 之 基本功能 0x00 摘要 0x01 Dyno-queues分布式延迟队列 1.1 设计目标 1. ...

  10. Python+OpenCV+图片旋转并用原底色填充新四角

    import cv2 from math import fabs, sin, cos, radians import numpy as np from scipy.stats import mode ...