微信小程序年月日时分选择器的实现

2023-11-02

<view class="" style="">
    <!-- <view class="">预计到店</view> -->
    <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
        <input value='{{time}}' name="dd_time" placeholder='选择时间' class="fs26 changetime"/>
    </picker>
</view>
const date = new Date();
const years = [];
const months = [];
const days = [];
const hours = [];
const minutes = [];
//获取年
for (let i = date.getFullYear(); i <= date.getFullYear() + 5; i++) {
  years.push("" + i);
}
//获取月份
for (let i = 1; i <= 12; i++) {
  if (i < 10) {
    i = "0" + i;
  }
  months.push("" + i);
}
//获取日期
for (let i = 1; i <= 31; i++) {
  if (i < 10) {
    i = "0" + i;
  }
  days.push("" + i);
}
//获取小时
for (let i = 0; i < 24; i++) {
  if (i < 10) {
    i = "0" + i;
  }
  hours.push("" + i);
}
//获取分钟
for (let i = 0; i < 60; i++) {
  if (i < 10) {
    i = "0" + i;
  }
  minutes.push("" + i);
}
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 预计到店
    time: '',
    multiArray: [years, months, days, hours, minutes],
    multiIndex: [0, 9, 16, 10, 17],
    choose_year: '',
  },
    /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
//设置默认的年份
    var multiIndex = [];
    let dateTime;
    let yy = new Date().getFullYear()
    let mm = new Date().getMonth() + 1
    let dd = new Date().getDate()
    let hh = new Date().getHours()
    let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes():new Date().getMinutes()
    let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds():new Date().getSeconds()
    dateTime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss
    console.log(dateTime)
    multiIndex.push(yy);
    multiIndex.push(mm-1);
    multiIndex.push(dd-1);
    multiIndex.push(hh);
    multiIndex.push(mf);
    this.setData({
      multiIndex:multiIndex,
      choose_year: this.data.multiArray[0][0]
    })
  },
//获取时间日期
  bindMultiPickerChange: function(e) {
    // console.log('picker发送选择改变,携带值为', e.detail.value)
    this.setData({
      multiIndex: e.detail.value
    })
    const index = this.data.multiIndex;
    const year = this.data.multiArray[0][index[0]];
    const month = this.data.multiArray[1][index[1]];
    const day = this.data.multiArray[2][index[2]];
    const hour = this.data.multiArray[3][index[3]];
    const minute = this.data.multiArray[4][index[4]];
    console.log(`${year}-${month}-${day}-${hour}-${minute}`);
    this.setData({
      time: year + '-' + month + '-' + day + ' ' + hour + ':' + minute
    })
    // console.log(this.data.time);
  },
  //监听picker的滚动事件
  bindMultiPickerColumnChange: function(e) {
    //获取年份
    if (e.detail.column == 0) {
      let choose_year = this.data.multiArray[e.detail.column][e.detail.value];
      console.log(choose_year);
      this.setData({
        choose_year
      })
    }
    //console.log('修改的列为', e.detail.column, ',值为', e.detail.value);
    if (e.detail.column == 1) {
      let num = parseInt(this.data.multiArray[e.detail.column][e.detail.value]);
      let temp = [];
      if (num == 1 || num == 3 || num == 5 || num == 7 || num == 8 || num == 10 || num == 12) { //判断31天的月份
        for (let i = 1; i <= 31; i++) {
          if (i < 10) {
            i = "0" + i;
          }
          temp.push("" + i);
        }
        this.setData({
          ['multiArray[2]']: temp
        });
      } else if (num == 4 || num == 6 || num == 9 || num == 11) { //判断30天的月份
        for (let i = 1; i <= 30; i++) {
          if (i < 10) {
            i = "0" + i;
          }
          temp.push("" + i);
        }
        this.setData({
          ['multiArray[2]']: temp
        });
      } else if (num == 2) { //判断2月份天数
        let year = parseInt(this.data.choose_year);
        console.log(year);
        if (((year % 400 == 0) || (year % 100 != 0)) && (year % 4 == 0)) {
          for (let i = 1; i <= 29; i++) {
            if (i < 10) {
              i = "0" + i;
            }
            temp.push("" + i);
          }
          this.setData({
            ['multiArray[2]']: temp
          });
        } else {
          for (let i = 1; i <= 28; i++) {
            if (i < 10) {
              i = "0" + i;
            }
            temp.push("" + i);
          }
          this.setData({
            ['multiArray[2]']: temp
          });
        }
      }
      console.log(this.data.multiArray[2]);
    }
    var data = {
      multiArray: this.data.multiArray,
      multiIndex: this.data.multiIndex
    };
    data.multiIndex[e.detail.column] = e.detail.value;
    this.setData(data);
  },
})

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

微信小程序年月日时分选择器的实现 的相关文章

  • React中ComponentDidMount生命周期方法被调用两次

    在我的 React 应用程序中 加载应用程序时会进行两次初始 API 调用 我查看了 Chrome gt inpsect 中的网络选项卡 启动器 调用堆栈显示第一个调用是从VM123000 bundle js而第二个调用只是从实际的bund
  • 在 Node.js 中一次迭代 50 个项目的数组

    我是 node js 的新手 目前正在尝试编写数组迭代代码 我有一个包含 1 000 个项目的数组 由于服务器负载问题 我想一次迭代 50 个项目的块 我目前使用 forEach 循环 如下所示 我希望将其转换为上述块迭代 result i
  • while 循环中 regex.exec() 赋值的更好解决方案

    这里有更好的解决方案吗 我尽量避免里面的作业while但仍然能够循环匹配并使用捕获的组 var match var CSS URL PATTERN url s s s s gm while match CSS URL PATTERN exe
  • nodejs:process.stdout.write 的短别名

    我正在学习nodejs 而且我喜欢它 我试图弄清楚如何使用更短的别名console log我发现我可以使用var cout console log并使用cout string 从那时起 然后当我想使用process stdout write
  • 禁用小写字符下划线:g q p j y?

    有时您不希望下划线盲目地穿过带下划线的页面标题 有没有办法自动优雅地禁用强调对于某些小写字符 在这些情况下 最好不要在这些小写字母下划线 例如 g q p j y CSS h1 text decoration underline PAGE
  • 如何在 Adob​​e Brackets 中使用 const 和 let 禁用 JSLint ES6 错误?

    我用 Google 搜索并浏览了这个网站 但我只能找到 JSHint 而不是 JSLint 的答案 为了摆脱 use function form of use strict 错误 我添加了 jslint node true 但要禁用使用错误
  • 如何阻止地址自动填充谷歌地点

    所以我在我的表单上有一个谷歌地图自动完成功能 当它到达一个位置时 它会占据该位置并格式化它 以便所有正确的信息都进入表单上的不同输入 我遇到的问题是在 place changed 事件触发自动完成填充输入之前 我想阻止最初的人口 而是填充我
  • 从一个页面导航到另一个页面时,JavaScript 不会执行

    我正在构建我的第一个 Ruby on Rails 应用程序 并尝试创建一个动画导航栏 我正在使用 jQuery 和 Turbolink 这是我的application js under app assets javascripts docu
  • 外部 CSS 是否应用于 jsPDF 生成的 pdf

    我已经开始使用 jspdf 制作一些演示 我有一个 html 文件 我的 css 在外部文件中 我写了下面的代码来生成我的pdf pdfButton on click function var pdf new jsPDF p in lett
  • 为什么Google的闭包库不使用真正的私有成员?

    我成为 JavaScript 开发人员已经有一段时间了 我一直认为在 JavaScript 中实现私有成员的正确方法是使用 Doug Crockford 在这里概述的技术 http javascript crockford com priv
  • 根据用户的时间设置问候语(早上好,下午好......)

    任何人都可以推断如何根据用户的时间设置实现基本的 晚上好 或 早上好 也许 PHP 会获取服务器时间 但我希望用基于时间的适当问候语来问候网站访问者 并考虑到他们一天中的时间 E G 早上好 晚上好 下午好 基于它 getHours 日期对
  • 使用 ECMA 脚本向节点(页面)添加新属性

    我需要在页面激活时向页面添加属性 我决定建立一个工作流程 在激活步骤之前执行相同的操作 我的自定义工作流程步骤 激活步骤之前的步骤 使用 ECMA 脚本来实现此目的 这是我到目前为止所拥有的 var workflowData granite
  • 如何在jsp中使用javascript动态创建下拉框?

    我正在尝试动态创建下拉框 就像当我单击添加按钮时它必须创建新的下拉框 下拉列表还包含动态值 例如需要当前年份并且必须显示最多五年 请建议我这样做 谢谢 这是我尝试过的代码 JavaScript 代码 function Add var nam
  • 当用户输入/删除时,使文本字段中的提示消失/重新出现[关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 有谁知道我怎样才能在我的搜索栏中做出
  • 云函数 onUpdate:无法读取未定义的属性“forEach”

    现在我正在尝试更新我的项目中的图片 我可以更新云火商店中的图片网址 但我也想使用 firebase 云功能从云存储中删除上一张图片 我想要实现的是 当我上传新图片时 从云存储中删除以前的图片 This is my data structur
  • javascript 函数后面括号中的值

    我正在尝试重新利用我在 SO 的答案中找到的一些 Javascript 代码 但我想首先更好地理解它的语法 其大纲是 function root ns factory some code window detectZoom function
  • 如何让 Grunt.js 和 Meteor.js 协同工作?

    我想在我的 Meteor 应用程序中使用简单的复制和串联 但是当 Meteor 在服务器和客户端上运行所有 javascript 文件时 我遇到了问题 而我不希望它们在任何地方运行 它要么只是配置文件 例如Gruntfile js或我想以某
  • CSS 或 Javascript - 如果背景图像未加载,则显示后备文本[重复]

    这个问题在这里已经有答案了 如果徽标图形文件未加载或丢失 如何显示文本而不是徽标 我有带有背景 PNG 图像的 div div class iHaveBgImage this text should be displayed if bg i
  • 如何运行 Mike Bostock 的 D3 示例?

    我一直在尝试经营迈克博斯托克透视地球仪 http bl ocks org mbostock 6747043例如 但是如果您尝试在本地重现它 则对其 json 文件的引用是不正确的 问题来自于这行代码 d3 json mbostock raw
  • 通过均匀分布值来有效合并两个数组

    我见过许多问题 答案主题是通过交替值合并两个数组 他们是这样工作的 let array1 a b c d let array2 1 2 let outcome a 1 b 2 c d 但我希望输出更加高效 并且根据数组大小均匀分配值 exp

随机推荐

  • 《算法和数据结构》数学基础总结

    前言 算法是什么 数学是什么 算法中的数学又是什么 这篇文章 让我来为大家介绍下法中的数学基础 数学可以说是算法的基石 所谓万丈高楼平地起 如若根基不稳 那么再高的楼 也只是豆腐渣工程 随时都有塌陷的可能 所以数学之于算法 可谓 非常重要
  • vmware 虚拟机开机自启动脚本

    1 建立一个txt文件 D VMware VMware Workstation vmrun exe T ws start I Documents Virtual Machines centos centos vmx nogui 注意 如果路
  • Python学习之爬取网页图片(单张)

    import requests import os os 库是Python标准库 包含几百个函数 常用的有路径操作 进程管理 环境参数等 root D pictures url input 请输入图片链接 让用户输入图片链接 path ro
  • 【JVM】JVM内存模型(详细)

    目录 一 JVM概述 1 jvm简介 2 jvm作用 3 jvm的内存模型 二 类加载器 1 类加载器的作用 2 加载器的类型 3 双亲委派机制的运行过程 4 双亲委派机制优缺点 5 为什么要破坏双亲委派机制 6 破坏双亲委派机制的方式 三
  • 函数调用堆栈的过程

    函数在进行调用时会产生开栈和清栈的操作 那么就来介绍一下函数调用堆栈的过程吧 首先 利用一个小例子来研究这个过程 include
  • Android禁止view上下滑动,Android RecyclerView禁止滑动

    在开发时 数组返回数目很少 需求要求不能左右滑动 下面是一种解决方案 1 RecyclerView 为垂直状态 VERTICAL 下 LinearLayoutManager layoutManager new LinearLayoutMan
  • 1929:【04NOIP普及组】火星人

    题干 这道题有好多废话 不过和全排列非常像 全排列题目 所以这道题数字的大小顺序与全排列的默认顺序一模一样 全排列的代码 在这里 本题就是一次次地调用全排列 不愿意麻烦的 就是我 可以用STL 非常方便 代码 100分 include
  • Stream:findFirst()高效简洁遍历集合中的一个元素

    业务开发中会运用到很多的List
  • sonarqube项目按权限分配

    一 创建用户 进入sornarqube的配置中心 选择权限菜单下的用户菜单 然后点击Create User按钮 只要输入登录名 用户名与密码保存后就可以创建一个新用户 二 创建组 选择权限下的群组菜单进入用户组管理页面 点击Create G
  • 时序数据交叉验证方法与python实现

    文章目录 传统N折交叉验证方法 时序数据交叉验证方法 方法1 窗口拆分 方法2 带间隔的窗口拆分 方法3 拓展窗口切分 时序交叉验证python复现 传统N折交叉验证方法 传统的N折交叉验证示意图如下图所示 时序数据交叉验证方法 由于时间序
  • 谨慎对待Go语言中对interface的nil判断

    谨慎对待Go语言中对interface的nil判断 在进行Go语言编程中 我们会看见诸如if err nil 或者if err nil 之类的判断 这跟go语言的错误处理哲学 计划失败而非成功 及早失败 有关 大多数情况下 我们对一个err
  • StringRedisTemplate运行NullPointerException的完全解决

    SpringBoot在使用Redis时出现StringRedisTemplate运行NullPointerException的完全解决 RedisTemplate运行NullPointerException的完全解决 三种解决方法 第一种
  • STM之SD卡

    SD卡基本函数 SPI InitTypeDef结构体 SPI 初始化结构体 1 SD Lowlevel Init 该函数初始化SPI相关外围时钟 配置GPIO引脚 调用SPI Init 初始化SPI InitStructre结构体 gt S
  • Linux下如何安装Anaconda、修改环境变量以及管理环境

    Linux下AI环境的搭建 Anaconda篇 1 第一步 安装anaconda 2 第二步 更改 调整系统环境PATH 3 第三步 创建适当的虚拟 python pip 工作区 3 第四步 如何使用conda来管理不同环境 1 第一步 安
  • java获取客户端操作系统_根据User-Agent,获得客户端浏览器和操作系统的信息

    碰到取客户端浏览器和操作系统信息的问题 网上找了很久 大多都是在页面中嵌入JS实现的 无法满足我的要求 所以 就自己写了个方法 可以在servlet中取到 我是根据每个浏览器User Agent的特征 来判断的 在windows xp中已测
  • 汇编实现排序——希尔排序

    希尔排序是把记录按下标的一定增量分组 对每组使用直接插入排序算法排序 随着增量逐渐减少 每组包含的关键词越来越多 当增量减至1时 整个文件恰被分成一组 算法便终止 以下是汇编实现的代码 S0 SEGMENT STACK DW 20 DUP
  • RabbitMQ学习(四)——高级特性

    RabbitMQ高级特性 1 1 消息的可靠投递 1 1 1 消息发送端 在使用RabbitMQ的时候 作为消息发送方式希望杜绝任何消息丢失或者投递失败的场景 RabbitMQ为我们提供了两种方式用来控制消息的投递可靠性模式 confirm
  • IDEA断点调试技巧,多张动图包教包会。

    文章目录 一 怎么开启断点调试 二 调试界面咋那么多按钮 1 返回断点位置 2 步过 3 步入 4 5 强制步入 步出 6 回退断点 7 断点跳到光标处 8 表达式计算 9 恢复程序 10 停止程序 11 查看所有断点 12 禁用断点 13
  • vs2017community进行DirectX开发_问题小节

    一 下载并安装vs及DirectX 1 vs版本 vs2017community 免费的 百度就有 2 我下载的DirectX版本 DXSDK Jun10 链接https pan baidu com s 1w7np5N E6QYqJXIr0
  • 微信小程序年月日时分选择器的实现