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


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 相关文章推荐
JS日历 推荐
Dec 03 Javascript
一个可以显示阴历的JS代码
Mar 05 Javascript
地址栏传递中文参数乱码在js里用escape转码
Aug 28 Javascript
jquery监听div内容的变化具体实现思路
Nov 04 Javascript
jQuery处理xml格式的返回数据(实例解析)
Nov 28 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
May 11 Javascript
JavaScript实现相册弹窗功能(zepto.js)
Jun 21 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
Jun 28 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 Javascript
Async Validator 异步验证使用说明
Jul 03 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
May 14 Javascript
inquirer.js一个用户与命令行交互的工具详解
May 18 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 simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
PHP中数据库单例模式的实现代码分享
2014/08/21 PHP
laravel-admin 实现在指定的相册下添加照片
2019/10/21 PHP
一起来写段JS drag拖动代码
2010/12/09 Javascript
[JSF]使用DataModel处理表行事件的实例代码
2013/08/05 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
2014/04/07 Javascript
node.js中的fs.utimes方法使用说明
2014/12/15 Javascript
jquery ui resize 中border-box的bug修正
2015/04/26 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
2015/09/25 Javascript
javascript实现tab响应式切换特效
2016/01/29 Javascript
第三篇Bootstrap网格基础
2016/06/21 Javascript
jQuery事件绑定方法学习总结(推荐)
2016/11/21 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
2019/01/18 Javascript
echarts大屏字体自适应的方法步骤
2019/07/12 Javascript
Smartour 让网页导览变得更简单(推荐)
2019/07/19 Javascript
原生js实现随机点餐效果
2019/12/10 Javascript
详解JavaScript 作用域
2020/07/14 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
2020/08/22 Javascript
[48:48]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Dream TIME
2014/05/21 DOTA
Python中类的定义、继承及使用对象实例详解
2015/04/30 Python
Python捕捉和模拟鼠标事件的方法
2015/06/03 Python
Django 前后台的数据传递的方法
2017/08/08 Python
删除python pandas.DataFrame 的多重index实例
2018/06/08 Python
python学习--使用QQ邮箱发送邮件代码实例
2019/04/16 Python
python实现按关键字筛选日志文件
2019/12/24 Python
Python和Sublime整合过程图示
2019/12/25 Python
英国HYPE双肩包官网:英国本土时尚潮牌
2018/09/26 全球购物
Talbots官网:美国成熟女装品牌
2019/11/15 全球购物
DOM和JQuery对象有什么区别
2016/11/11 面试题
社会治安综合治理责任书
2015/01/29 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书
Nginx同一个域名配置多个项目的实现方法
2021/03/31 Servers
详解分布式系统中如何用python实现Paxos
2021/05/18 Python
MySQL 全文索引使用指南
2021/05/25 MySQL