效果图
组件参数说明
column参数说明：
年年月年月日年月日时年月日时分年月日时分秒
startYear： 开始年份
annual：开始年份向后annual 年
组件代码
<template><picker style="width: 100%;":style="{'line-height':lineHeight,'text-align':textAlign}"mode="multiSelector"@change="bindMultiPickerChange"@columnchange="bindMultiPickerColumnChange":value="multiIndex":range="multiArray">{{time}}<text v-if="time == ''" style="color: #888888;">选择时间</text></picker></template><script>const years = [];const months = [];const days = [];const hours = [];const minutes = [];const miao = [];export default {name: 'sun-pickerDateTime',props: {/*** 1~6*/column: {type: Number,default: () => 6},/*** center left right*/textAlign: {type: String,default: 'center'},/*** 所有像素单位*/lineHeight: {type: String,default: '60rpx'},/*** 开始年份*/startYear: {type: Number,default: () => new Date().getFullYear()},/*** 总年度*/annual: {type: Number,default: () => 10},},data() {return {multiIndex: [0, 0, 0, 0, 0, 0],multiArray: [years, months, days, hours, minutes, miao],time: '',choose_year: '',default_column: 6}},/*** 实例初始化完成 最早可操作 data 中数据 和 methods 中方法的地方*/created() {const date = new Date();console.log(this.startYear)if (this.default_column !== this.column) {this.multiArray.splice(this.column, this.default_column - this.column);this.multiIndex.splice(this.column, this.default_column - this.column);}//获取年for (let i = this.startYear; i <= this.startYear + this.annual; i++) {years.push("" + i);}this.choose_year = this.multiArray[0][0]if (this.column === 1) return false;//获取月份for (let i = 1; i <= 12; i++) {if (i < 10) {i = "0" + i;}months.push("" + i);}if (this.column === 2) return false;//获取日期for (let i = 1; i <= 31; i++) {if (i < 10) {i = "0" + i;}days.push("" + i);}if (this.column === 3) return false;//获取小时for (let i = 0; i < 24; i++) {if (i < 10) {i = "0" + i;}hours.push("" + i);}if (this.column === 4) return false;//获取分钟for (let i = 0; i < 60; i++) {if (i < 10) {i = "0" + i;}minutes.push("" + i);}if (this.column === 5) return false;//获取秒for (let i = 0; i < 60; i++) {if (i < 10) {i = "0" + i;}miao.push("" + i);}},/*** 方法函数*/methods: {//获取时间日期bindMultiPickerChange: function(e) {const _that = this;_that.multiIndex = e.detail.value;const index = _that.multiIndex;const year = _that.multiArray[0][index[0]];_that.time = yearif (_that.column === 1) return false;const month = _that.multiArray[1][index[1]];_that.time = _that.time + '-' + monthif (_that.column === 2) return false;const day = _that.multiArray[2][index[2]];_that.time = _that.time + '-' + dayif (_that.column === 3) return false;const hour = _that.multiArray[3][index[3]];_that.time = _that.time + ' ' + hourif (_that.column === 4) return false;const minute = _that.multiArray[4][index[4]];_that.time = _that.time + ':' + minuteif (_that.column === 5) return false;const miao = _that.multiArray[5][index[5]];_that.time = _that.time + ':' + miao},//监听picker的滚动事件bindMultiPickerColumnChange: function(e) {const _that = this;//获取年份if (e.detail.column == 0) {_that.choose_year = _that.multiArray[e.detail.column][e.detail.value];}if (_that.column < 3) return false;if (e.detail.column == 1) {let num = parseInt(_that.multiArray[e.detail.column][e.detail.value]);let temp = [];if (num == 1 || num == 3 || num == 5 || num == 7 || num == 8 || num == 10 || num == 12) { //判断31天的月份// for (let i = 1; i <= 31; i++) {// if (i < 10) {// i = "0" + i;// }// temp.push("" + i);// }return false;} else if (num == 4 || num == 6 || num == 9 || num == 11) { //判断30天的月份for (let i = 1; i <= 30; i++) {if (i < 10) {i = "0" + i;}temp.push("" + i);}} else if (num == 2) { //判断2月份天数let year = parseInt(_that.choose_year);if (((year % 400 == 0) || (year % 100 != 0)) && (year % 4 == 0)) {for (let i = 1; i <= 29; i++) {if (i < 10) {i = "0" + i;}temp.push("" + i);}} else {for (let i = 1; i <= 28; i++) {if (i < 10) {i = "0" + i;}temp.push("" + i);}}}_that.multiArray[2] = temp_that.$forceUpdate();}}},}</script>
使用案例
<uni-pickerDateTime :column="6" :startYear="" :annual="5"></uni-pickerDateTime>
