小程序中vant的DatetimePicker会自己滑动,跳来跳去。原生日期,时间选择器
网上找了一下,很多人遇到这个问题,一般都是用 将bind:input 换成 bind:change 事件 解决的
<van-datetime-picker type="datetime" value="{{ currentDate }}" bind:change="onchange" bind:confirm="confirm_plan" bind:cancel="cancel_plan" /> //选择时间 onchange(event: any) { let temp = event.detail.getValues(); let time = `${temp[0]}-${temp[1]}-${temp[2]} ${temp[3]}:${temp[4]}`; this.setData({ currentDate: moment(time).valueOf(), }); },
但是这样修改之后会出现延迟,这次确认的值还是上次选择的结果。
所以后面根据原生小程序自己写了一个日期时间选择的功能
下面是基础js
1 function withData(param) { 2 return param < 10 ? '0' + param : '' + param; 3 } 4 function getLoopArray(start, end) { 5 var start = start || 0; 6 var end = end || 1; 7 var array = []; 8 for (var i = start; i <= end; i++) { 9 array.push(withData(i)); 10 } 11 return array; 12 } 13 function getMonthDay(year, month) { 14 var flag = year % 400 == 0 || (year % 4 == 0 && year % 100 != 0), array = null; 15 16 switch (month) { 17 case '01': 18 case '03': 19 case '05': 20 case '07': 21 case '08': 22 case '10': 23 case '12': 24 array = getLoopArray(1, 31) 25 break; 26 case '04': 27 case '06': 28 case '09': 29 case '11': 30 array = getLoopArray(1, 30) 31 break; 32 case '02': 33 array = flag ? getLoopArray(1, 29) : getLoopArray(1, 28) 34 break; 35 default: 36 array = '月份格式不正确,请重新输入!' 37 } 38 return array; 39 } 40 function getNewDateArry() { 41 // 当前时间的处理 42 var newDate = new Date(); 43 var year = withData(newDate.getFullYear()), 44 mont = withData(newDate.getMonth() + 1), 45 date = withData(newDate.getDate()), 46 hour = withData(newDate.getHours()), 47 minu = withData(newDate.getMinutes()), 48 seco = withData(newDate.getSeconds()); 49 50 return [year, mont, date, hour, minu, seco]; 51 } 52 function dateTimePicker(startYear, endYear, date) { 53 // 返回默认显示的数组和联动数组的声明 54 var dateTime = [], dateTimeArray = [[], [], [], [], [], []]; 55 var start = startYear || 1978; 56 var end = endYear || 2100; 57 // 默认开始显示数据 58 var defaultDate = date ? [...date.split(' ')[0].split('-'), ...date.split(' ')[1].split(':')] : getNewDateArry(); 59 // 处理联动列表数据 60 /*年月日 时分秒*/ 61 dateTimeArray[0] = getLoopArray(start, end); 62 dateTimeArray[1] = getLoopArray(1, 12); 63 dateTimeArray[2] = getMonthDay(defaultDate[0], defaultDate[1]); 64 dateTimeArray[3] = getLoopArray(0, 23); 65 dateTimeArray[4] = getLoopArray(0, 59); 66 dateTimeArray[5] = getLoopArray(0, 59); 67 68 dateTimeArray.forEach((current, index) => { 69 dateTime.push(current.indexOf(defaultDate[index])); 70 }); 71 72 return { 73 dateTimeArray: dateTimeArray, 74 dateTime: dateTime 75 } 76 } 77 //根据类型返回 78 function dateTimePickertype(type, startYear, endYear, date) { 79 // 返回默认显示的数组和联动数组的声明 80 var dateTime = []; 81 var dateTimeArray = []; 82 var start = startYear || 1978; 83 var end = endYear || 2100; 84 // 默认开始显示数据 85 var defaultDate = date ? [...date.split(' ')[0].split('-'), ...date.split(' ')[1].split(':')] : getNewDateArry(); 86 // 处理联动列表数据 87 /*年月日 时分秒*/ 88 switch (type) { 89 case "year": 90 dateTimeArray[0] = getLoopArray(start, end); 91 break; 92 case "month": 93 dateTimeArray[0] = getLoopArray(start, end); 94 dateTimeArray[1] = getLoopArray(1, 12); 95 break; 96 case "day": 97 dateTimeArray[0] = getLoopArray(start, end); 98 dateTimeArray[1] = getLoopArray(1, 12); 99 dateTimeArray[2] = getMonthDay(defaultDate[0], defaultDate[1]); 100 break; 101 case "minute": 102 dateTimeArray[0] = getLoopArray(start, end); 103 dateTimeArray[1] = getLoopArray(1, 12); 104 dateTimeArray[2] = getMonthDay(defaultDate[0], defaultDate[1]); 105 dateTimeArray[3] = getLoopArray(0, 23); 106 dateTimeArray[4] = getLoopArray(0, 59); 107 break; 108 case "second": 109 dateTimeArray[0] = getLoopArray(start, end); 110 dateTimeArray[1] = getLoopArray(1, 12); 111 dateTimeArray[2] = getMonthDay(defaultDate[0], defaultDate[1]); 112 dateTimeArray[3] = getLoopArray(0, 23); 113 dateTimeArray[4] = getLoopArray(0, 59); 114 dateTimeArray[5] = getLoopArray(0, 59); 115 break; 116 default: 117 break; 118 } 119 120 dateTimeArray.forEach((current, index) => { 121 dateTime.push(current.indexOf(defaultDate[index])); 122 }); 123 124 return { 125 dateTimeArray: dateTimeArray, 126 dateTime: dateTime 127 } 128 129 } 130 module.exports = { 131 dateTimePicker: dateTimePicker, 132 getMonthDay: getMonthDay, 133 dateTimePickertype, 134 }
使用时用原生的picker,同时支持年,月,日,分,秒选择器
<picker mode="multiSelector" value="{{dateTime1}}" bindchange="changeDate" range="{{dateArray}}"> <view class="picker"> 时间 </view> </picker> /** * 生命周期函数--监听页面加载 */ onLoad() { let date = dateTimePicker.dateTimePickertype('minute'); this.setData({ dateArray: date.dateTimeArray, dateTime1: date.dateTime }) }, changeDate(e: any) { let time = e.detail.value; let strtime = `${this.data.dateArray[0][time[0]]}-${this.data.dateArray[1][time[1]]}-${this.data.dateArray[2][time[2]]} ${this.data.dateArray[3][time[3]]}:${this.data.dateArray[4][time[4]]}`; this.setData({ dateTime1: e.detail.value, }); },