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


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 相关文章推荐
Javascript-Mozilla和IE中的一个函数直接量的问题分析
Aug 12 Javascript
JS判断是否为数字,是否为整数,是否为浮点数的代码
Apr 24 Javascript
非主流的textarea自增长实现js代码
Dec 20 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
Jan 04 Javascript
jquery struts 验证唯一标识(公用方法)
Mar 27 Javascript
Javascript技术难点之apply,call与this之间的衔接
Dec 04 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
Apr 01 Javascript
prototype.js常用函数详解
Jun 18 Javascript
javascript history对象详解
Feb 09 Javascript
angularJs的ng-class切换class
Jun 23 Javascript
webpack项目使用eslint建立代码规范实现
May 16 Javascript
javascript前端和后台进行数据交互方法示例
Aug 07 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
如何选购合适的收音机
2021/03/01 无线电
php获取域名的google收录示例
2014/03/24 PHP
ThinkPHP框架搭建及常见问题(XAMPP安装失败、Apache/MySQL启动失败)
2016/04/15 PHP
遍历echsop的region表形成缓存的程序实例代码
2016/11/01 PHP
thinkphp Apache配置重启Apache1 restart 出错解决办法
2017/02/15 PHP
PHP 爬取网页的主要方法
2018/07/13 PHP
TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法小结
2020/02/10 PHP
IE6下CSS图片缓存问题解决方法
2010/12/09 Javascript
js比较和逻辑运算符的介绍
2013/03/10 Javascript
JavaScript中setInterval的用法总结
2013/11/20 Javascript
单击和双击事件的冲突处理示例代码
2014/04/03 Javascript
jquery实现显示已选用户
2014/07/21 Javascript
javascript事件冒泡实例分析
2015/05/13 Javascript
基于jQuery实现的美观星级评论打分组件代码
2015/10/30 Javascript
JavaScript的Vue.js库入门学习教程
2016/05/23 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
2016/09/25 Javascript
利用angular、react和vue实现相同的面试题组件
2018/02/19 Javascript
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
浅析js实现网页截图的两种方式
2019/11/01 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
2020/08/20 Javascript
举例详解Python中threading模块的几个常用方法
2015/06/18 Python
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
python中的subprocess.Popen()使用详解
2019/12/25 Python
Python sorted对list和dict排序
2020/06/09 Python
Python 如何测试文件是否存在
2020/07/31 Python
aec加密 php_php aes加密解密类(兼容php5、php7)
2021/03/14 PHP
英国发展最快的在线超市之一:Click Marketplace
2021/02/15 全球购物
如何将一个描述日期或日期/时间的字符串转换为一个Date对象
2015/10/13 面试题
幼儿教师个人求职信范文
2013/09/21 职场文书
环境整治工作方案
2014/05/18 职场文书
校园安全标语
2014/06/07 职场文书
中药学自荐信
2014/06/15 职场文书
再读《皇帝的新衣》的读后感悟!
2019/08/07 职场文书
导游词之介休绵山
2019/12/31 职场文书
Python OpenCV 彩色与灰度图像的转换实现
2021/06/05 Python
python周期任务调度工具Schedule使用详解
2021/11/23 Python