微信小程序时间选择插件使用详解


Posted in Javascript onDecember 28, 2018

微信小程序时间选择插件-弹出选择,供大家参考,具体内容如下

微信小程序时间选择插件使用详解

wxml

<modal class="modal" hidden="{{flag}}" no-cancel bindconfirm="getTime" confirmText="确定">
 <view class="modal-content">
<view class="time_screens" >
 <view style="text-align:center;color:#45BCE8">{{year}}-{{month}}-{{day}} {{hour}}:{{minute}}</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>
 </view>
</modal >

js:

const date = new Date()
const years = []
const months = []
const days = []
const hours = []
const minutes = []
var thisMon = date.getMonth();
var thisDay = date.getDate();
var thisHours = date.getHours();
var thisMinutes = date.getMinutes();
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();
}
 
var app = getApp();
var api = app.globalData.api;
Page({
 
 /**
 * 页面的初始数据
 */
 data: {
 
 checkTime: date.getFullYear() + "-" + thisMon + "-" + thisDay + " " + thisHours + ":" + thisMinutes,
 //---时间控件参数
 flag: true,
 years: years,
 year: date.getFullYear(),
 months: months,
 month: thisMon,
 days: days,
 day: thisDay,
 value: [1, thisMon - 1, thisDay - 1, 0, 0],
 hours: hours,
 hour: thisHours,
 minutes: minutes,
 minute: thisMinutes,
 },
 
 showModel: function (e) {
 this.setData({ flag: false });
 },
 getTime: function (e) {
 var times = this.data.year + "-" + this.data.month + "-" + this.data.day + " " + this.data.hour + ":" + this.data.minute
 this.setData({
  flag: true,
  checkTime: times
 });
 },
 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
 })
 },
 
})

css:

.kouviewList{
 background-color: #F7F7F7;
}
.kouview{
 height:170px;
 margin-top:5px;
 
}
.kouviews{
 height:150px;
 margin-top:5px;
 
}
.time-title{
 float:left;width:20%;text-align:center;color:#45BCE8
}
.picker-text{
 text-align:center;
}

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

Javascript 相关文章推荐
指定位置如果有图片显示图片,无图片显示广告的JS
Jun 05 Javascript
密码强度检测效果实现原理与代码
Jan 04 Javascript
JavaScript使用yield模拟多线程的方法
Mar 19 Javascript
jQuery过滤特殊字符及JS字符串转为数字
May 26 Javascript
js移动焦点到最后位置的简单方法
Nov 25 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
Sep 19 Javascript
JS简单获得节点元素的方法示例
Feb 10 Javascript
JS实现的3des+base64加密解密算法完整示例
May 18 Javascript
react同构实践之实现自己的同构模板
Mar 13 Javascript
解决Layui中templet中a的onclick参数传递的问题
Sep 20 Javascript
es6中let和const的使用方法详解
Feb 24 Javascript
ES6 十大特性简介
Dec 09 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
小程序文字跑马灯效果
Dec 28 #Javascript
You might like
通过curl模拟post和get方式提交的表单类
2014/04/23 PHP
php+mysql删除指定编号员工信息的方法
2015/01/14 PHP
PHP版微信第三方实现一键登录及获取用户信息的方法
2016/10/14 PHP
javascript 事件查询综合 推荐收藏
2010/03/10 Javascript
JavaScript生成GUID的多种算法小结
2013/08/18 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
2013/11/06 Javascript
jquery live()重复绑定的解决方法介绍
2014/01/03 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
2016/03/08 Javascript
jQuery鼠标事件总结
2016/10/13 Javascript
jQuery异步提交表单实例
2017/05/30 jQuery
vue轮播图插件vue-awesome-swiper的使用代码实例
2017/07/10 Javascript
使用jQuery实现页面定时弹出广告效果
2017/08/24 jQuery
基于jquery实现左右上下移动效果
2018/05/02 jQuery
python 图片验证码代码分享
2012/07/04 Python
Python实现抓取百度搜索结果页的网站标题信息
2015/01/22 Python
Python递归函数定义与用法示例
2017/06/02 Python
用Python实现KNN分类算法
2017/12/22 Python
Python实现简单的列表冒泡排序和反转列表操作示例
2019/07/10 Python
在pycharm中配置Anaconda以及pip源配置详解
2019/09/09 Python
利用python Selenium实现自动登陆京东签到领金币功能
2019/10/31 Python
Python Django view 两种return的实现方式
2020/03/16 Python
Python Json数据文件操作原理解析
2020/05/09 Python
Python猫眼电影最近上映的电影票房信息
2020/09/18 Python
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
Kivari官网:在线购买波西米亚服装
2018/10/29 全球购物
学生的自我鉴定范文
2013/10/24 职场文书
高中生期末评语大全
2014/01/28 职场文书
《小草和大树》教学反思
2014/02/16 职场文书
税务会计岗位职责
2014/02/18 职场文书
考察现实表现材料
2014/05/19 职场文书
离职保密承诺书
2014/05/28 职场文书
维修工先进事迹
2014/05/29 职场文书
2014最新版群众路线四风整改措施
2014/09/24 职场文书
省级三好学生主要事迹材料
2015/11/03 职场文书
Golang之sync.Pool使用详解
2021/05/06 Golang
python使用PySimpleGUI设置进度条及控件使用
2021/06/10 Python