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


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 面向对象编程 万物皆对象
Sep 17 Javascript
javascript 通用loading动画效果实例代码
Jan 14 Javascript
javascript避免数字计算精度误差的方法详解
Mar 05 Javascript
jqeury-easyui-layout问题解决方法
Mar 24 Javascript
chrome下img加载对height()的影响示例探讨
May 26 Javascript
JavaScript模版引擎的基本实现方法浅析
Feb 15 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
Nov 03 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
Nov 07 Javascript
Vue实现路由跳转和嵌套
Jun 20 Javascript
vue中node_modules中第三方模块的修改使用详解
May 31 Javascript
详解JavaScript修改注册表的方法
Jan 05 Javascript
用几道面试题来看JavaScript执行机制
Apr 30 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
PHP Zip解压 文件在线解压缩的函数代码
2010/05/26 PHP
php 传值赋值与引用赋值的区别
2010/12/29 PHP
thinkPHP的Html模板标签使用方法
2012/11/13 PHP
ThinkPHP之M方法实例详解
2014/06/20 PHP
php对象在内存中的存在形式分析
2015/02/03 PHP
php 读取输出其他文件的实现方法
2016/07/26 PHP
详解PHP归并排序的实现
2016/10/18 PHP
php命令行写shell实例详解
2018/07/19 PHP
Jquery实现网页跳转或用命令打开指定网页的解决方法
2013/07/09 Javascript
nodejs npm包管理的配置方法及常用命令介绍
2014/06/05 NodeJs
node.js中使用q.js实现api的promise化
2014/09/17 Javascript
JS实现自动切换文字的导航效果代码
2015/08/27 Javascript
JavaScript实现简单的拖动效果
2016/07/02 Javascript
使用Ajax与服务器(JSON)通信实例
2016/11/04 Javascript
基于vue 开发中出现警告问题去除方法
2018/01/25 Javascript
Vue 使用formData方式向后台发送数据的实现
2019/04/14 Javascript
浅谈Vue static 静态资源路径 和 style问题
2020/11/07 Javascript
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
一步步解析Python斗牛游戏的概率
2016/02/12 Python
python socket多线程通讯实例分析(聊天室)
2016/04/06 Python
关于Python中浮点数精度处理的技巧总结
2017/08/10 Python
Python 循环语句之 while,for语句详解
2018/04/23 Python
python3实现基于用户的协同过滤
2018/05/31 Python
Django框架中序列化和反序列化的例子
2019/08/06 Python
Python中itertools的用法详解
2020/02/07 Python
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
英语专业学生个人求职信范文
2014/01/06 职场文书
五好党支部事迹材料
2014/02/06 职场文书
《新型玻璃》教学反思
2014/04/13 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书
车辆工程专业求职信
2014/06/14 职场文书
中秋节慰问信
2015/02/15 职场文书
幼儿园亲子活动感想
2015/08/07 职场文书
golang import自定义包方式
2021/04/29 Golang
Node与Python 双向通信的实现代码
2021/07/16 Javascript
深入解析MySQL索引数据结构
2021/10/16 MySQL