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


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 相关文章推荐
Javascript Math ceil()、floor()、round()三个函数的区别
Mar 09 Javascript
js 浏览本地文件夹系统示例代码
Oct 24 Javascript
使用jQuery判断IE浏览器版本的代码
Jun 14 Javascript
使用正则表达式的格式化与高亮显示json字符串
Dec 03 Javascript
JavaScript定时器和优化的取消定时器方法
Jul 03 Javascript
js全选按钮的实现方法
Nov 17 Javascript
深究AngularJS之ui-router详解
Jun 13 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
Apr 11 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
Apr 17 Javascript
AngularJS上传文件的示例代码
Nov 10 Javascript
JS实现的点击按钮图片上下滚动效果示例
Jan 28 Javascript
JavaScript剩余操作符Rest Operator详解
Jul 20 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计算几分钟前、几小时前、几天前的几个函数、类分享
2014/04/09 PHP
PHP中if和or运行效率对比
2014/12/12 PHP
php自动给网址加上链接的方法
2015/06/02 PHP
PHP 用session与gd库实现简单验证码生成与验证的类方法
2016/11/15 PHP
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
2012/01/13 Javascript
使用JS 清空File控件的路径值
2013/07/08 Javascript
原生js操作checkbox用document.getElementById实现
2013/10/12 Javascript
Json和Jsonp理论实例代码详解
2013/11/15 Javascript
鼠标经过tr时,改变tr当前背景颜色
2014/01/13 Javascript
jquery学习总结(超级详细)
2014/09/04 Javascript
jQuery过滤选择器详解
2015/01/13 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
JS实现Ajax的方法分析
2016/12/20 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
2016/12/26 Javascript
利用transition实现文字上下抖动的效果
2017/01/21 Javascript
使用pm2自动化部署node项目的方法步骤
2019/01/28 Javascript
JavaScript单线程和任务队列原理解析
2020/02/04 Javascript
Vue父组件向子组件传值以及data和props的区别详解
2020/03/02 Javascript
JS出现404错误原理及解决方案
2020/07/01 Javascript
在Django的form中使用CSS进行设计的方法
2015/07/18 Python
基于Python3 逗号代码 和 字符图网格(详谈)
2017/06/22 Python
python使用KNN算法识别手写数字
2019/04/25 Python
python re.sub()替换正则的匹配内容方法
2019/07/22 Python
python3.8与pyinstaller冲突问题的快速解决方法
2020/01/16 Python
在django admin详情表单显示中添加自定义控件的实现
2020/03/11 Python
python数据库编程 ODBC方式实现通讯录
2020/03/27 Python
2021年的Python 时间轴和即将推出的功能详解
2020/07/27 Python
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
房产继承公证书
2014/04/09 职场文书
大学活动总结格式
2014/04/29 职场文书
歌颂祖国演讲稿
2014/05/04 职场文书
同学会邀请函模板
2015/01/30 职场文书
单位综合评价意见
2015/06/05 职场文书
常住证明范本
2015/06/23 职场文书
mysql获取指定时间段中所有日期或月份的语句(不设存储过程,不加表)
2021/06/18 MySQL
Redis之RedisTemplate配置方式(序列和反序列化)
2022/03/13 Redis