微信小程序时间控件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的为attr添加id title等效果的实现代码
Apr 20 Javascript
js简易namespace管理器 实例代码
Jun 21 Javascript
DIV始终居中的js代码
Feb 17 Javascript
JS解析XML文件和XML字符串详解
Apr 17 Javascript
使用Raygun对Node.js应用进行错误处理的方法
Jun 23 Javascript
基于jquery编写分页插件
Mar 07 Javascript
微信小程序商城项目之购物数量加减(3)
Apr 17 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
Oct 04 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
Aug 20 Javascript
浅谈Fetch 数据交互方式
Dec 20 Javascript
vue选项卡切换登录方式小案例
Sep 27 Javascript
js中延迟加载和预加载的具体使用
Jan 14 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
水质对咖图啡风味的影响具体有哪些
2021/03/03 冲泡冲煮
PHP获取一年有几周以及每周开始日期和结束日期
2015/08/06 PHP
php判断文件上传图片格式的实例详解
2017/09/30 PHP
php通过各种函数判断0和空
2020/07/04 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
在javascript中关于节点内容加强
2013/04/11 Javascript
查找Oracle高消耗语句的方法
2014/03/22 Javascript
JavaScript 事件绑定及深入
2015/04/13 Javascript
前端弹出对话框 js实现ajax交互
2016/09/09 Javascript
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
详解从NodeJS搭建中间层再谈前后端分离
2018/11/13 NodeJs
前后端常见的几种鉴权方式(小结)
2019/08/04 Javascript
解决layui数据表格table的横向滚动条显示问题
2019/09/04 Javascript
vue学习笔记之slot插槽基本用法实例分析
2020/02/01 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
2020/02/24 Javascript
创建nuxt.js项目流程图解
2020/03/13 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
2020/04/25 Javascript
js实现双色球效果
2020/08/02 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
2020/08/08 Javascript
antd多选下拉框一行展示的实现方式
2020/10/31 Javascript
vantUI 获得piker选中值的自定义ID操作
2020/11/04 Javascript
[09:47]2018DOTA2亚洲邀请赛4.5SOLO赛 No[o]ne vs Sumail
2018/04/06 DOTA
利用python爬取散文网的文章实例教程
2017/06/18 Python
python把数组中的数字每行打印3个并保存在文档中的方法
2018/07/17 Python
python3读取图片并灰度化图片的四种方法(OpenCV、PIL.Image、TensorFlow方法)总结
2019/07/04 Python
Python celery原理及运行流程解析
2020/06/13 Python
财务方面个人工作的自我评价
2013/12/28 职场文书
执行力心得体会
2013/12/31 职场文书
幼儿园春季开学寄语
2014/04/03 职场文书
写求职信有哪些注意事项
2014/05/08 职场文书
群众路线对照检查材料思想汇报怎么写
2014/09/18 职场文书
预备党员党支部意见
2015/06/02 职场文书
小学生大队委竞选稿
2015/11/20 职场文书
使用RedisTemplat实现简单的分布式锁
2021/11/20 Redis
USB TYPE-C 或将成为所有智能手机充电标准
2022/04/21 数码科技