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


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代码
Jan 01 Javascript
IE6与IE7中,innerHTML获取param的区别
Mar 15 Javascript
javascript 子窗体父窗体相互传值方法
May 31 Javascript
textarea中的手动换行处理的jquery代码
Feb 26 Javascript
使用js实现雪花飘落效果
Aug 26 Javascript
jquery通过a标签删除table中的一行的代码
Dec 02 Javascript
js模拟微博发布消息
Feb 23 Javascript
JavaScript实现三级联动菜单效果
Aug 16 Javascript
微信小程序实现添加手机联系人功能示例
Nov 30 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
Apr 12 Javascript
react基本安装与测试示例
Apr 27 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
Jun 10 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
ajax实现无刷新分页(php)
2010/07/18 PHP
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
php实现上传图片生成缩略图示例
2014/04/13 PHP
PHP错误Allowed memory size of 67108864 bytes exhausted的3种解决办法
2014/07/28 PHP
基于PHP实现邮箱验证激活过程详解
2020/10/28 PHP
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
JavaScript设置首页和收藏页面的小例子
2013/11/11 Javascript
js构造函数、索引数组和属性的实现方式和使用
2014/11/16 Javascript
JS实现中国公民身份证号码有效性验证
2017/02/20 Javascript
Angular2的管道Pipe的使用方法
2017/11/07 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
2018/01/02 jQuery
浅谈Vue.js组件(二)
2019/04/09 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
vue 使用localstorage实现面包屑的操作
2020/11/16 Javascript
浅谈Python 多进程默认不能共享全局变量的问题
2019/01/11 Python
用Python PIL实现几个简单的图片特效
2019/01/18 Python
Python常用模块之requests模块用法分析
2019/05/15 Python
python socket通信编程实现文件上传代码实例
2019/12/14 Python
Selenium常见异常解析及解决方案示范
2020/04/10 Python
python自动从arxiv下载paper的示例代码
2020/12/05 Python
CSS3动画效果回调处理详解
2014/12/10 HTML / CSS
css3的transition属性详解
2014/12/15 HTML / CSS
小天鹅官方商城:LittleSwan
2017/06/16 全球购物
全球性的女装店:storets
2019/06/12 全球购物
体育教师工作总结的自我评价
2013/10/10 职场文书
项目开发计划书
2014/01/09 职场文书
厂区绿化方案
2014/05/08 职场文书
开展读书活动总结
2014/06/30 职场文书
计算机求职信
2014/07/02 职场文书
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书
2014年城市管理工作总结
2014/12/02 职场文书
运动会宣传稿50字
2015/07/23 职场文书
终止合同协议书范本
2016/03/22 职场文书
导游词之苏州寒山寺
2019/12/05 职场文书
HTML5中 rem适配方案与 viewport 适配问题详解
2021/04/27 HTML / CSS
Python之matplotlib绘制折线图
2022/04/13 Python