全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[南昌百度seo优化公司]微信小程序日期时间选择器的使用方法

  这篇文章主要为大家详细介绍了微信小程序日期时间选择器的使用方法,自定义精确到分秒或时段,具有一定的参考价值▲-,感兴趣的小伙伴们可以参考一下

  本文实例为大家分享了精确到秒的微信小程序日期时间选择器,供大家参考▽○,21 2020.10 [沙田SEO优化公司]微信小程序怎么实现蓝牙连接?(代码示例) 微信小程序如何实现蓝牙连接★▪?本篇文章给大家带来的内容是介绍微信小程序实现蓝牙连接的方法(步骤)。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助具体内容如下

  效果图

  

 

  实现原理

  利用微信小程序的picker组件的多列选择器实现!

  WXML

  

 

  

<view class="tui-picker-content"▼-●;>…▼▲■;
 <view class="▪▷…;tui-picker-name">时间选择器(选择时分)<◁◇;/view>
 <picker mode="time" value="{{time}}"●▪; start="…★▪◇;09:00" end="17:30"▲=•; bindchange="changeTime">
 <view class="□★◁□;tui-picker-detail"★☆;>▼○▲★;
 午饭时间: {{time}} 
 </view>
 </picker>
<▷■▼☆;/view>
<•●▲▷;view class="□…▷●;tui-picker-content">
 <◇★-;view class="tui-picker-name"=☆•;>-▽▲-;日期选择器(选择年月日)</view>
 <picker mode="date"▲•; value="□▽☆;{{date}}" start="2017-10-01" end="2017-10-08" bindchange="changeDate"◇▪•…;>-■▪;
 <view class="tui-picker-detail"•▪;>◁••;
 国庆出游: {{date}}
 </view>
 </picker>
<☆-○;/view>-●=◇;
<view class="tui-picker-content">■□;
 <□△…;view class="tui-picker-name">-☆;日期时间选择器(精确到秒)<•○▲;/view>
 <picker mode="multiSelector"▽☆◆◇; value="▽○▪;{{dateTime}}"•▽; bindchange="◆◁★;changeDateTime"◇▼; bindcolumnchange="changeDateTimeColumn" range="{{dateTimeArray}}">
 <view class="tui-picker-detail">
 选择日期时间△●•: {{dateTimeArray[0][dateTime[0]]}}-{{dateTimeArray[1][dateTime[1]]}}-{{dateTimeArray[2][dateTime[2]]}} {{dateTimeArray[3][dateTime[3]]}}:{{dateTimeArray[4][dateTime[4]]}}:{{dateTimeArray[5][dateTime[5]]}}
 <★★=;/view>•●;
 <▷△◇•;/picker>
<□▪▲◁;/view>
<view class="★◁◆…;tui-picker-content">
 <view class="-▲▷;tui-picker-name">日期时间选择器(精确到分)<•…;/view>
 <picker mode="multiSelector" value="□◆;{{dateTime1}}" bindchange="○•■;changeDateTime1" bindcolumnchange="○◆•=;changeDateTimeColumn1" range="{{dateTimeArray1}}">
 <view class="tui-picker-detail">
 选择日期时间: {{dateTimeArray1[0][dateTime1[0]]}}-{{dateTimeArray1[1][dateTime1[1]]}}-{{dateTimeArray1[2][dateTime1[2]]}} {{dateTimeArray1[3][dateTime1[3]]}}:{{dateTimeArray1[4][dateTime1[4]]}}
 <◆☆;/view>
 <◁…;/picker>○●=-;
</view>

 

  WXSS

  

 

  

@import "●…▼;.▽▪./picker/picker.wxss"■◇▷=;

 

  使用的是三级联动选择器的样式=◆◆,所以直接 import 引入…●!
 

  JS

  

 

  

var dateTimePicker = require('□△….△•./../utils/dateTimePicker.js');
Page({
 data: {
 date-■: '2018-10-01'◁-=,
 time•★: '12:00',
 dateTimeArray: null,
 dateTime: null,
 dateTimeArray1: null,
 dateTime1: null,
 startYear…▷△: 2000,
 endYear: 2050
 },
 onLoad(){
 // 获取完整的年月日 时分秒,以及默认显示的数组
 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({
 dateTime: obj.dateTime☆◁■★,
 dateTimeArray: obj◁….dateTimeArray★▼☆•,
 dateTimeArray1•■=: obj1●★=●.dateTimeArray,
 dateTime1: obj1.dateTime
 });
 },
 changeDate(e){
 this▪••.setData({ date:e★◇•=.detail▪▼•….value});
 }△◆•,
 changeTime(e){
 this.setData({ time▽=◇●: e■☆.detail.value });
 }◇•◇,
 changeDateTime(e){
 this.setData({ dateTime: e.detail.value });
 },
 changeDateTime1(e) {
 this.setData({ dateTime1■•: e◇△.detail.value })●▽☆;
 },
 changeDateTimeColumn(e){
 var arr = this.data.dateTime★◁□, dateArr = this.data△=▪□.dateTimeArray=■◁★;
 arr[e◁◇▲▲.detail▲•.column] = e.detail▼○.value;
 dateArr[2] = dateTimePicker.getMonthDay(dateArr[0][arr[0]], dateArr[1][arr[1]]);
 this.setData({
 dateTimeArray: dateArr,
 dateTime: arr
 });
 },
 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
 })-◆;
 }
})

 

  外部JS,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 }

 

  总结

  

  •  

      将初始化列表以及初始化默认显示的数组放到dateTimePicker■◆….js•△★○,防止页面逻辑太乱,而且可以多处使用;

      

  •  

      判断是否为闰年=●▽,在三木表达式中,必须将能别400整除放在前边,因为或运算只要一个条件满足◇▪△,就会返回true,不会执行后续表达式;

      

  •  

      switch case的合并方法需要注意格式☆•…◆;

      

  •  

      如果只需要联动列表更新,二结果展示栏不更新,伊春市小程序开发哪家好则在changeDateTimeColumn函数中只更新dateTimeArray的值•△○▲。

      

 

  以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

  相关推荐=-■•:

  微信小程序获取手机网络状态的方法【附源码】

  微信小程序模拟cookie的实现

  

 

  以上就是微信小程序日期时间选择器的使用方法的详细内容,扬中市小程序制作公司[南昌百度seo优化公司]更多请关注久澳传媒编程栏目其它相关文章!

[南昌百度seo优化公司]微信小程序日期时间选择器的使用方法

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。