入坑微信小程序必经之路(三)日期选择组件
2021/9/4 17:07:31
本文主要是介绍入坑微信小程序必经之路(三)日期选择组件,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
<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>
data:{ ApplyForTime:'', }, binddateChange1:function(e){ //获取当前选择日期 if (e.currentTarget.id=="dateTime") { this.setData({ApplyForTime:e.detail.value}); } },
在utils文件夹里添加dateTimePicker.js,
const util = require("../../../utils/dateTimePicker");
下方: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 }
这篇关于入坑微信小程序必经之路(三)日期选择组件的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-302024年最新版云开发cms开通步骤,开始开发微信小程序前的准备工作,认真看完奥!
- 2024-03-30微信小程序的网络设置,及网络请求:wx.request(OBJECT)
- 2024-01-22基于taro搭建小程序多项目框架
- 2024-01-13小程序开发:在插件市场寻找步骤条组件并二开
- 2024-01-05钉钉小程序生态—企业机器人加互动卡片,改善用户体验的开始!
- 2023-12-29【UniApp】-uni-app-打包成小程序
- 2023-12-26性能翻倍!京东亿级体量小程序优化实践
- 2023-12-25小程序优化:第三方SDK过大解决方案
- 2023-11-26微信小程序文件预览和下载-文件系统
- 2023-11-2652天学习微信小程序计划No.2:注册小程序账号&安装开发者工具