微信小程序时间控件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 相关文章推荐
json数据与字符串的相互转化示例
Sep 18 Javascript
jQuery动画特效实例教程
Aug 29 Javascript
js实现数字每三位加逗号的方法
Feb 05 Javascript
JavaScript前补零操作实例
Mar 11 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
Jun 15 Javascript
移动端脚本框架Hammer.js
Dec 15 Javascript
微信小程序图表插件(wx-charts)实例代码
Jan 17 Javascript
vue2.0实现导航菜单切换效果
May 08 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
Mar 06 Javascript
vue实现商品加减计算总价的实例代码
Aug 12 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
Sep 03 Javascript
AJAX实现指定部分页面刷新效果
Oct 16 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
PHP学习笔记之一
2011/01/17 PHP
从康盛产品(discuz)提取出来的模板类
2011/06/28 PHP
PHP面向对象程序设计之接口用法
2014/08/20 PHP
Yii框架调试心得--在页面输出执行sql语句
2014/12/25 PHP
PHP使用Nginx实现反向代理
2017/09/20 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
使用TextRange获取输入框中光标的位
2006/10/14 Javascript
表单切换,用回车键替换Tab健(不支持IE)
2011/07/20 Javascript
JavaScript中创建对象和继承示例解读
2014/02/12 Javascript
Jquery获得控件值的三种方法总结
2014/02/13 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
2014/03/05 Javascript
jQuery中last()方法用法实例
2015/01/06 Javascript
Bootstrap每天必学之导航条(二)
2016/03/01 Javascript
基于Javascript实现文件实时加载进度的方法
2016/10/12 Javascript
Vue计算属性的学习笔记
2017/03/22 Javascript
AngularJS ionic手势事件的使用总结
2017/08/09 Javascript
nodejs中安装ghost出错的原因及解决方法
2017/10/23 NodeJs
JavaScript代码实现txt文件的上传预览功能
2018/03/27 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
2020/02/10 Javascript
Python文件及目录操作实例详解
2015/06/04 Python
Python循环语句之break与continue的用法
2015/10/14 Python
Python-嵌套列表list的全面解析
2016/06/08 Python
Python端口扫描简单程序
2016/11/10 Python
Python使用arrow库优雅地处理时间数据详解
2017/10/10 Python
python逆向入门教程
2018/01/15 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
python里的单引号和双引号的有什么作用
2020/06/17 Python
使用Python实现NBA球员数据查询小程序功能
2020/11/09 Python
Draper James官网:知名演员瑞茜·威瑟斯彭所创品牌
2017/10/25 全球购物
计算机软件个人的自荐信范文
2013/12/01 职场文书
模特大赛策划方案
2014/05/28 职场文书
运动会报道稿300字
2014/10/02 职场文书
年会主持人开场白台词
2015/05/29 职场文书
运动会广播稿50字
2015/08/19 职场文书
详解python的内存分配机制
2021/05/10 Python
vue实现滑动解锁功能
2022/03/03 Vue.js