【转】微信小程序日期时间选择器（年月日时分秒）

公司需要用到秒
但是小程序提供的只到分钟
vantui也只到分钟，真的是有问题啊
从网上找了一个试了试可以用如下：

<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
}

【转】微信小程序日期时间选择器（年月日时分秒）相关推荐

微信小程序 - 日期时间选择器（年月日时分秒）
前言您只需要跟着步骤一路复制粘贴,最后看一下使用示例即可. 由于微信官方的 <picker> 组件不支持同时选择年月日时分, 所以在此官方组件上再次封装,可靠性毋庸置疑. 您将获得一个 ...
微信小程序----日期时间选择器（自定义精确到分秒或时段）
声明 bug:由于此篇博客是在bindcolumnchange事件中做的值的改变处理,因此会出现当你选择时,没有点击确定,直接取消返回后,会发现选择框的值依然改变. 造成原因:这一点就是由于在bind ...
微信小程序----日期时间选择器（自定义精确到分秒或时段）（MUI日期时间）
效果体验二维码(外联图片失效了) 如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢! 声明 bug:由于此篇博客是在bindcolumnchange事件中做的值的改变处 ...
微信小程序-日期时间选择器
我在官方表单组件的基础上改出了几种比较常用的日期(时间)选择器,为了更清晰,我没给任何样式,wxss可根据个人喜好添加. 一.picker-view (嵌入页面的滚动选择器) 注意:其中只可放置组件, ...
微信小程序显示当前系统年月日时分秒
需求:在小程序的界面显示一下当前系统里面的年月日时分秒 1:打开微信开发者工具,填写自己的appid和项目名称,新建一个项目. 2:打开项目里面默认生成的util.js 这里可以看到,代码已经写好了 ...
微信小程序日期时分组件(年月日时分)--复制即用
微信小程序日期组件(年月日时分)–复制即用如图所示效果第一步新建picker组件文件 1,pickerTime.js组件代码内容 // component/pickerTime/pickerTim ...
js 微信小程序日期时间转时间戳
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 微信小程序开发交流qq群 173683895 日期转换成时间戳:new Date('2018-09-03 ...
微信小程序时间加法_微信小程序-日期时间计算
//new Date():系统当前时间,先将当前时间转化为时间戳的形式 var timestamp = Date.parse(new Date()); //想在系统当前时间基础上,想加的天数或小时 v ...
小程序日期时间选择器
从底部弹起的滚动选择器.类型有普通选择器 . 多列选择器 . 时间选择器 .日期选择器 . 省市区选择器. 没有现成的时间和日期合并在一起的,从demo里面可以看到可以用多列选择器来实现. wxml ...

【转】微信小程序日期时间选择器（年月日时分秒）

【转】微信小程序日期时间选择器（年月日时分秒）相关推荐

最新文章

热门文章