微信小程序时间控件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 相关文章推荐
jquery ui dialog实现弹窗特效的思路及代码
Aug 03 Javascript
原始的js代码和jquery对比体会
Sep 10 Javascript
JavaScript中数据结构与算法(二):队列
Jun 19 Javascript
jQuery根据元素值删除数组元素的方法
Jun 24 Javascript
jQuery zclip插件实现跨浏览器复制功能
Nov 02 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
Jul 17 Javascript
微信小程序实现左滑修改、删除功能
Oct 19 Javascript
微信 jssdk 签名错误invalid signature的解决方法
Jan 14 Javascript
JS实现的类似微信聊天效果示例
Jan 29 Javascript
原生js实现贪食蛇小游戏的思路详解
Nov 26 Javascript
js生成1到100的随机数最简单的实现方法
Feb 07 Javascript
JSONObject与JSONArray使用方法解析
Sep 28 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
检查url链接是否已经有参数的php代码 添加 ? 或 &amp;
2010/02/09 PHP
php引用地址改变变量值的问题
2012/03/23 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
PHP开发之用微信远程遥控服务器
2018/01/25 PHP
PHP生成短网址的思路以及实现方法的详解
2019/03/25 PHP
laravel实现登录时监听事件,添加登录用户的记录方法
2019/09/30 PHP
JavaScript 空位补零实现代码
2010/02/26 Javascript
THREE.JS入门教程(5)你应当知道的十件事
2013/01/24 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
2013/05/30 Javascript
JQuery.Ajax之错误调试帮助信息介绍
2013/07/04 Javascript
js中settimeout方法加参数的使用实例
2014/02/27 Javascript
js判断iframe内的网页是否滚动到底部触发事件
2014/03/18 Javascript
js仿微博动态栏功能
2017/02/22 Javascript
JavaScript实现选中文字提示新浪微博分享效果
2017/06/15 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
2017/08/21 Javascript
ztree实现左边动态生成树右边为内容详情功能
2017/11/03 Javascript
微信小程序使用wxParse解析html的方法示例
2019/01/17 Javascript
Element-UI+Vue模式使用总结
2020/01/02 Javascript
JQuery复选框全选效果如何实现
2020/05/08 jQuery
微信小程序报错: thirdScriptError的错误问题
2020/06/19 Javascript
[01:48]DOTA2 2015国际邀请赛中国区预选赛第二日战报
2015/05/27 DOTA
[01:08]DOTA2“血战之命”预告片
2017/08/12 DOTA
[01:14]英雄,所敬略同——2018完美盛典宣传视频4K
2018/12/05 DOTA
Python使用metaclass实现Singleton模式的方法
2015/05/05 Python
Python爬取qq空间说说的实例代码
2018/08/17 Python
Python Learning 列表的更多操作及示例代码
2018/08/22 Python
详解Python Matplot中文显示完美解决方案
2019/03/07 Python
python批量爬取下载抖音视频
2019/06/17 Python
django项目登录中使用图片验证码的实现方法
2019/08/15 Python
Python制作简易版小工具之计算天数的实现思路
2020/02/13 Python
Python Selenium异常处理的实例分析
2021/02/28 Python
长安大学毕业生自我鉴定
2014/01/17 职场文书
自立自强的名人事例
2014/02/10 职场文书
我读书我快乐演讲稿
2014/05/07 职场文书
副总经理岗位职责范本
2014/09/30 职场文书
2015年城管个人工作总结
2015/05/15 职场文书