入坑微信小程序必经之路(三)日期选择组件
1 2 3 4 5 6 7 8 9 10 11 | <view class = "pro-section" > <text style= "float:left;margin-left:-30rpx;" >申请日期:</text> <view class = "section" style= "float:left;width:70%;" > <picker mode= "date" value= "{{date}}" start= "2021-1-1" end= "2030-1-1" bindchange= "binddateChange1" id= 'dateTime' > <!-- 在js中判断所选picker的id为startTime时,将value赋值给startTime,放在input内 --> <view class = "picker" style= "margin-top:-2rpx;" > <input placeholder= '申请时间' value= '{{ApplyForTime}}' name= "dateTime" ></input> </view> </picker> </view> </view> |
1 2 3 4 5 6 7 8 9 | data:{ ApplyForTime: '' , }, binddateChange1:function(e){ //获取当前选择日期 if (e.currentTarget.id== "dateTime" ) { this .setData({ApplyForTime:e.detail.value}); } }, |
在utils文件夹里添加dateTimePicker.js,
1 | const util = require( "../../../utils/dateTimePicker" ); |
下方:dateTimePicker.js,
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | 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 } |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构