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


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 常用方法总结
Jun 03 Javascript
利用jQuery的$.event.fix函数统一浏览器event事件处理
Dec 21 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
Aug 06 Javascript
jquery插件ajaxupload实现文件上传操作
Dec 09 Javascript
jQuery简单实现上下,左右滑动的方法
Jun 01 Javascript
jQuery中ajax错误调试分析
Dec 01 Javascript
node通过npm写一个cli命令行工具
Oct 12 Javascript
Vue中的Vux配置指南
Dec 08 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
Jan 25 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
Nov 10 Javascript
js实现小球在页面规定的区域运动
Jun 16 Javascript
vue 判断页面是首次进入还是再次刷新的实例
Nov 05 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
德生S2000收音机更换“钕铁硼”全频扬声器
2021/03/02 无线电
PHP URL地址获取函数代码(端口等) 推荐
2010/05/15 PHP
php 文件上传后缀名与文件类型对照表(几乎涵盖所有文件)
2010/05/16 PHP
用Zend Studio+PHPnow+Zend Debugger搭建PHP服务器调试环境步骤
2014/01/19 PHP
PHP针对JSON操作实例分析
2015/01/12 PHP
MySql数据库查询结果用表格输出PHP代码示例
2015/03/20 PHP
PHP错误Warning:mysql_query()解决方法
2015/10/24 PHP
PHP自定义函数获取汉字首字母的方法
2016/12/01 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
使用onbeforeunload属性后的副作用
2007/03/08 Javascript
javascript两段代码,两个小技巧
2010/02/04 Javascript
js取整数、取余数的方法
2014/05/11 Javascript
触屏中的JavaScript事件分析
2015/02/06 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
2015/04/13 Javascript
JS弹出对话框实现方法(三种方式)
2015/12/18 Javascript
url中的特殊符号有什么含义(推荐)
2016/06/17 Javascript
微信小程序 网络请求(GET请求)详解
2016/11/16 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
2017/02/23 Javascript
基于jQuery Easyui实现登陆框界面
2017/07/10 jQuery
详解使用nvm安装node.js
2017/07/18 Javascript
详解利用 Express 托管静态文件的方法
2017/09/18 Javascript
用vue构建多页面应用的示例代码
2017/09/20 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
2018/08/09 Javascript
python实现批量按比例缩放图片效果
2018/03/30 Python
Linux下python制作名片示例
2018/07/20 Python
Python从函数参数类型引出元组实例分析
2019/05/28 Python
Flask框架钩子函数功能与用法分析
2019/08/02 Python
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
2014/10/11 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
2019/09/27 HTML / CSS
委托协议书范本
2014/04/22 职场文书
2014学校领导四风问题对照检查材料思想汇报
2014/09/22 职场文书
创业计划书之废品回收
2019/09/26 职场文书
HTML CSS 一个标签实现带动画的抖音LOGO
2022/04/26 HTML / CSS
mysql 体系结构和存储引擎介绍
2022/05/06 MySQL
tomcat默认最大连接数及相关调整方法
2022/05/06 Servers