热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

微信小程序时间选择插件-弹出选择,供大家参考,具体内容如下 wxml {{year}}-{{month}}-

微信小程序时间选择插件-弹出选择,供大家参考,具体内容如下

wxml

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;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


推荐阅读
  • 程序员如何优雅应对35岁职业转型?这里有深度解析
    本文探讨了程序员在职业生涯中如何通过不断学习和技能提升,优雅地应对35岁左右的职业转型挑战。我们将深入分析当前热门技术趋势,并提供实用的学习路径。 ... [详细]
  • 国内BI工具迎战国际巨头Tableau,稳步崛起
    尽管商业智能(BI)工具在中国的普及程度尚不及国际市场,但近年来,随着本土企业的持续创新和市场推广,国内主流BI工具正逐渐崭露头角。面对国际品牌如Tableau的强大竞争,国内BI工具通过不断优化产品和技术,赢得了越来越多用户的认可。 ... [详细]
  • 新冠肺炎疫情期间,各大银行积极利用手机银行平台,满足客户在金融与生活多方面的需求。线上服务不仅激活了防疫相关的民生场景,还推动了银行通过互联网思维进行获客、引流与经营。本文探讨了银行在找房、买菜、打卡、教育等领域的创新举措。 ... [详细]
  • 本文详细介绍了Java编程语言中的核心概念和常见面试问题,包括集合类、数据结构、线程处理、Java虚拟机(JVM)、HTTP协议以及Git操作等方面的内容。通过深入分析每个主题,帮助读者更好地理解Java的关键特性和最佳实践。 ... [详细]
  • 解决JAX-WS动态客户端工厂弃用问题并迁移到XFire
    在处理Java项目中的JAR包冲突时,我们遇到了JaxWsDynamicClientFactory被弃用的问题,并成功将其迁移到org.codehaus.xfire.client。本文详细介绍了这一过程及解决方案。 ... [详细]
  • 本文将深入探讨PHP编程语言的基本概念,并解释PHP概念股的含义。通过详细解析,帮助读者理解PHP在Web开发和股票市场中的重要性。 ... [详细]
  • 本文介绍了多个关于JavaScript的书籍资源、实用工具和编程实例,涵盖从入门到进阶的各个阶段,帮助读者全面提升JavaScript编程能力。 ... [详细]
  • 微信小程序:授权登录与手机号绑定
    本文详细介绍了微信小程序中用户授权登录及绑定手机号的流程,结合官方指引和实际开发经验,提供了一套完整的实现方案,帮助开发者更好地理解和应用。 ... [详细]
  • 使用JS、HTML5和C3创建自定义弹出窗口
    本文介绍如何结合JavaScript、HTML5和C3.js来实现一个功能丰富的自定义弹出窗口。通过具体的代码示例,详细讲解了实现过程中的关键步骤和技术要点。 ... [详细]
  • 深入理解小程序中的Picker组件
    Picker组件是一种从屏幕底部弹出的滚动选择器,支持多种选择模式,包括普通选择器、多列选择器、时间选择器、日期选择器和省市区选择器。本文将详细介绍Picker的各种属性及其应用场景。 ... [详细]
  • 非公版RTX 3080显卡的革新与亮点
    本文深入探讨了图形显卡的进化历程,重点介绍了非公版RTX 3080显卡的技术特点和创新设计。 ... [详细]
  • 探讨如何真正掌握Java EE,包括所需技能、工具和实践经验。资深软件教学总监李刚分享了对毕业生简历中常见问题的看法,并提供了详尽的标准。 ... [详细]
  • 本文介绍如何使用布局文件在Android应用中排列多行TextView和Button,使其占据屏幕的特定比例,并提供示例代码以帮助理解和实现。 ... [详细]
  • 本文探讨了在Windows Server 2008环境下配置Tomcat使用80端口时遇到的问题,包括端口被占用、多项目访问失败等,并提供详细的解决方法和配置建议。 ... [详细]
  • 本文详细介绍了Java Web应用程序中的过滤器(Filter)功能,包括其作用、实现方式及配置方法。过滤器可以在请求到达目标资源之前对其进行预处理,并在响应返回给客户端之前进行后处理。 ... [详细]
author-avatar
玛丽
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有