微信小程序时间控件picker view使用详解


Posted in Javascript onDecember 28, 2018

本文实例为大家分享了微信小程序时间控件的具体实现代码,供大家参考,具体内容如下

在原来基础上改了点,由于项目需要按照功能需求自己在原有的组件上改写的选择日期时间插件,但后来这个功能取消,所以整理下写下来

微信小程序时间控件picker view使用详解

wxml:

<view class="time_screens">
 <view style="text-align:center;color:#45BCE8">{{year}}-{{month}}-{{day}} {{hour}}:{{minute}}<label style="float:right;margin-right:10px;">确定</label></view>
 <view style="border-top:1px solid #45BCE8;height:25px;font-size:14px;">
 <view class="time-title">年</view>
 <view class="time-title">月</view>
 <view class="time-title">日</view>
 <view class="time-title">时</view>
 <view class="time-title">分</view>
 </view>
 <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange">
  <picker-view-column class="picker-text">
   <view wx:for="{{years}}" style="line-height: 50px">{{item}}</view>
  </picker-view-column>
  <picker-view-column class="picker-text">
   <view wx:for="{{months}}" style="line-height: 50px">{{item}}</view>
  </picker-view-column>
  <picker-view-column class="picker-text">
   <view wx:for="{{days}}" style="line-height: 50px">{{item}}</view>
  </picker-view-column>
   <picker-view-column class="picker-text">
   <view wx:for="{{hours}}" style="line-height: 50px">{{item}}</view>
  </picker-view-column>
   <picker-view-column class="picker-text">
   <view wx:for="{{minutes}}" style="line-height: 50px">{{item}}</view>
  </picker-view-column>
 </picker-view>
</view>

wxss:

.time-title{
 float:left;width:20%;text-align:center;color:#45BCE8
}
.picker-text{
 text-align:center;
}
/*mask*/
.time_screens {
 
 width: 100%;
 
 position: fixed;
bottom: 0;
 left: 0;
 z-index: 1000;
 opacity: 0.5;
 overflow: hidden;
}

js:

const date = new Date()
const years = []
const months = []
const days = []
const hours = []
const minutes = []
var thisMon = date.getMonth();
var thisDay = date.getDate();
 
for (let i = 2017; i <= date.getFullYear()+1; i++) {
 years.push(i)
}
 
for (let i = date.getMonth(); i <= 11; i++) {
 var k = i;
 if (0 <= i && i < 9) {
  k = "0" + (i+1);
 }else{
  k = (i + 1);
 }
 months.push(k)
}
if (0 <= thisMon && thisMon<9){
 thisMon = "0" + (thisMon + 1);
}else{
 thisMon = (thisMon + 1);
}
if (0 <= thisDay && thisDay<10){
 thisDay ="0"+thisDay;
}
 
var totalDay = mGetDate(date.getFullYear(), thisMon); 
for (let i = 1; i <= 31; i++) {
 var k = i;
 if (0 <= i && i < 10) {
  k = "0" + i
 }
 days.push(k)
}
 
for (let i = 0; i <= 23; i++) {
 var k=i;
 if(0<=i&&i<10){
  k="0"+i
 }
 hours.push(k)
}
for (let i = 0; i <= 59; i++) {
 var k = i;
 if (0 <= i && i < 10) {
  k = "0" + i
 }
 minutes.push(k)
}
function mGetDate(year, month) {
 var d = new Date(year, month, 0);
 return d.getDate();
}
Page({
 data: {
  years: years,
  year: date.getFullYear(),
  months: months,
  month: thisMon,
  days: days,
  day: thisDay,
  value: [1,thisMon-1,thisDay-1,0,0],
  hours: hours,
  hour: "00",
  minutes: minutes,
  minute: "00",
 },
 bindChange: function (e) {
  const val = e.detail.value
  this.setData({
   year: this.data.years[val[0]],
   month: this.data.months[val[1]],
   day: this.data.days[val[2]],
   hour: this.data.hours[val[3]],
   minute: this.data.minutes[val[4]],
  })
  var totalDay = mGetDate(this.data.year, this.data.month); 
  var changeDate=[];
  for (let i = 1; i <= totalDay; i++) {
   var k = i;
   if (0 <= i && i < 10) {
    k = "0" + i
   }
   changeDate.push(k)
  }
  this.setData({
   days: changeDate
  })
 },
 
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
nicejforms——美化表单不用愁
Feb 20 Javascript
一段效率很高的for循环语句使用方法
Aug 13 Javascript
jquery星级插件、支持页面中多次使用
Mar 25 Javascript
js实现上传图片之上传前预览图片
Mar 25 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
Nov 07 Javascript
JavaScript避免内存泄露及内存管理技巧
Sep 05 Javascript
微信小程序 教程之事件
Oct 18 Javascript
JS排序之快速排序详解
Apr 08 Javascript
浅谈如何使用webpack构建多页面应用
May 30 Javascript
深入理解JavaScript 中的执行上下文和执行栈
Oct 23 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
Apr 19 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
Aug 26 Javascript
微信小程序时间选择插件使用详解
Dec 28 #Javascript
微信小程序当前时间时段选择器插件使用方法详解
Dec 28 #Javascript
Angular6新特性之Angular Material
Dec 28 #Javascript
关于微信公众号开发无法支付的问题解决
Dec 28 #Javascript
小程序实现抽奖动画
Apr 16 #Javascript
微信小程序实现文字从右向左无限滚动
Nov 18 #Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
Dec 28 #Javascript
You might like
虹吸壶煮咖啡26个注意事项
2021/03/03 冲泡冲煮
虹吸壶是谁发明的?煮出来的咖啡好喝吗
2021/03/04 冲泡冲煮
PHP文件上传原理简单分析
2011/05/29 PHP
Php无限级栏目分类读取的实现代码
2014/02/19 PHP
PHP中使用strpos函数实现屏蔽敏感关键字功能
2014/08/21 PHP
php5与php7的区别点总结
2019/10/11 PHP
JavaScript String.replace函数参数实例说明
2013/06/06 Javascript
js确认删除对话框适用于a标签及submit
2014/07/10 Javascript
javascript实现禁止鼠标滚轮事件
2015/07/24 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
2020/12/01 Javascript
基于JavaScript实现飘落星星特效
2017/08/10 Javascript
基于input动态模糊查询的实现方法
2017/12/12 Javascript
Vue.js 十五分钟入门图文教程
2018/09/12 Javascript
服务端预渲染之Nuxt(使用篇)
2019/04/08 Javascript
浅谈对于react-thunk中间件的简单理解
2019/05/01 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
2020/02/26 Javascript
node.js如何操作MySQL数据库
2020/10/29 Javascript
[05:29]2014DOTA2国际邀请赛 赛后专访:LGDNewbee顺利过关
2014/07/13 DOTA
Python写的Socks5协议代理服务器
2014/08/06 Python
Python异常学习笔记
2015/02/03 Python
在Django的通用视图中处理Context的方法
2015/07/21 Python
Python入门之后再看点什么好?
2018/03/05 Python
Python3中_(下划线)和__(双下划线)的用途和区别
2019/04/26 Python
关于python字符串方法分类详解
2019/08/20 Python
python 实现dict转json并保存文件
2019/12/05 Python
python3.6使用SMTP协议发送邮件
2020/05/20 Python
python安装cx_Oracle和wxPython的方法
2020/09/14 Python
详解HTML5 data-* 自定义属性
2018/01/24 HTML / CSS
IGK Hair官网:喷雾、洗发水、护发素等
2020/11/03 全球购物
酒店端午节促销方案
2014/02/18 职场文书
医学院毕业生自荐信范文
2014/03/06 职场文书
大龄毕业生求职别忘职业规划
2014/03/11 职场文书
工作表扬信范文
2015/01/17 职场文书
故意杀人案辩护词
2015/05/21 职场文书
大学生入党群众意见书
2015/06/02 职场文书
小学记事作文之200字
2019/08/06 职场文书