微信小程序日期选择器实例代码


Posted in Javascript onJuly 18, 2018

微信小程序日期选择器实例代码

/* JS代码部分 */
 3 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
  })
 },
})

/* css代码部分 */
.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;
}
/* html代码部分 */
 <view class="time_screens">
  <view style="text-align:center;color:#45BCE8">{{year}}-{{month}}-{{day}}
   <label style="float:left;margin-left:30px;">取消</label>
   <label style="float:right;margin-right:30px;">确定</label>
  </view>
  <view style="border-top:1px solid #45BCE8;height:25px;font-size:14px;">
  </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>
 </view>
/* Json */
{
 "navigationBarTitleText": "XXXX"
}

总结

以上所述是小编给大家介绍的微信小程序日期选择器实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
向当前style sheet中插入一个新的style实现方法
Apr 01 Javascript
浅析XMLHttpRequest的缓存问题
Dec 13 Javascript
JS 操作Array数组的方法及属性实例解析
Jan 08 Javascript
使用jquery.upload.js实现异步上传示例代码
Jul 29 Javascript
jQuery删除节点用法示例(remove方法)
Sep 08 Javascript
JavaScript之Vue.js【入门基础】
Dec 06 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
Dec 28 Javascript
JavaScript多态与封装实例分析
Jul 27 Javascript
总结javascript三元运算符知识点
Sep 28 Javascript
基于Node.js的大文件分片上传示例
Jun 19 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
Aug 13 Javascript
ES6学习教程之Promise用法详解
Nov 22 Javascript
JavaScript实现的反序列化json字符串操作示例
Jul 18 #Javascript
Angularjs实现多图片上传预览功能
Jul 18 #Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
Jul 18 #Javascript
微信小程序scroll-x失效的完美解决方法
Jul 18 #Javascript
详解easyui基于 layui.laydate日期扩展组件
Jul 18 #Javascript
Vue无限滑动周选择日期的组件的示例代码
Jul 18 #Javascript
微信小程序修改swiper默认指示器样式的实例代码
Jul 18 #Javascript
You might like
提升PHP执行速度全攻略(上)
2006/10/09 PHP
PHP删除数组中空值的方法介绍
2014/04/14 PHP
Yii框架连接mongodb数据库的代码
2016/07/27 PHP
Thinkphp框架开发移动端接口(1)
2016/08/18 PHP
PHP 获取指定地区的天气实例代码
2017/02/08 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
参考:关于Javascript中实现暂停的几篇文章
2007/03/04 Javascript
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
解析jquery获取父窗口的元素
2013/06/26 Javascript
JavaScript简单修改窗口大小的方法
2015/08/03 Javascript
javascript中对变量类型的判断方法
2015/08/09 Javascript
JavaScript Date对象详解
2016/03/01 Javascript
JavaScript必看小技巧(必看)
2016/06/07 Javascript
简单谈谈Vue 模板各类数据绑定
2016/09/25 Javascript
jQuery实现鼠标滑过图片移动特效
2016/12/08 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
2017/07/07 Javascript
JavaScript+CSS相册特效实例代码
2017/09/07 Javascript
手动下载Chrome并解决puppeteer无法使用问题
2018/11/12 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
2019/07/29 Javascript
JavaScript图像放大镜效果实现方法详解
2020/06/28 Javascript
用Python抢过年的火车票附源码
2015/12/07 Python
Python中functools模块的常用函数解析
2016/06/30 Python
对Python中type打开文件的方式介绍
2018/04/28 Python
python2 与 pyhton3的输入语句写法小结
2018/09/10 Python
python爬虫 urllib模块反爬虫机制UA详解
2019/08/20 Python
利用PyQt5+Matplotlib 绘制静态/动态图的实现代码
2020/07/13 Python
10个示例带你掌握python中的元组
2020/11/23 Python
深入了解canvas在移动端绘制模糊的问题解决
2019/04/30 HTML / CSS
吃透移动端 1px的具体用法
2019/12/16 HTML / CSS
大学生饮食配送创业计划书
2014/01/04 职场文书
职务说明书范文
2014/05/07 职场文书
房屋出租协议书范本(标准版)
2014/09/24 职场文书
教师党员个人自我剖析材料
2014/09/29 职场文书
乡镇干部学习心得体会
2016/01/23 职场文书
曾国藩励志经典名言37句,蕴含哲理
2019/10/14 职场文书
如何打开Win11系统注册表编辑器?Win11注册表编辑器打开修复方法
2022/04/05 数码科技