微信小程序picker组件扩展选择时间到秒插件

news2024/11/19 11:21:10

创建插件seldatetime

// 插件JS部分
Component({

  // 一些选项
  options: {
    // 样式隔离：apply-shared 父影响子，shared父子相互影响， isolated相互隔离
    styleIsolation:"isolated",
    // 允许多个插槽
    multipleSlots: true
  },

  // 组件的对外属性：在 properties 定义段中，属性名采用驼峰写法（propertyName）；在 wxml 中，指定属性值时则对应使用连字符写法（property-name=""）
  properties: {
    // 传递默认选中日期
    value: String,
    // 最大时间
    end: String,
    // 最小时间
    start: String
  },

  // 组件的内部数据
  data: {
    currKey: [],// 当前选中的时间下标
    item: [],// 当前选中时间，格式[2023, 12, 22, 10, 8]
    list: [],// 时间多列数据集，格式[[], [], [], [], []]
  },

  // 类似于 mixins 和 traits 的组件间代码复用机制
  behaviors: [],

  // 组件数据字段监听器，用于监听 properties 和 data 的变化
  observers:{},

  // 组件间关系定义
  relations: {},

  // 通过组件的外部类实现父组件控制子自己的样式
  externalClasses: [],

  // 组件生命周期声明对象
  lifetimes: {
    attached(){
      this._initialize()
    },
    moved(){},
    detached(){}
  },

  // 组件所在页面的生命周期声明对象
  pageLifetimes: {
    show(){},
    hide(){},
    resize(){}
  },

  /**
   * 在组件实例刚刚被创建时执行。
   * 组件实例刚刚被创建好时， created 生命周期被触发。此时，组件数据 this.data 就是在 Component 构造器中定义的数据 data。 此时还不能调用 setData 。 通常情况下，这个生命周期只应该用于给组件 this 添加一些自定义属性字段
   */
  created(){},

  /**
   * 在组件实例进入页面节点树时执行
   * 在组件完全初始化完毕、进入页面节点树后， attached 生命周期被触发。此时， this.data 已被初始化为组件的当前值。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行  
   */ 
  attached(){},

  /**
   * 在组件在视图层布局完成后执行
   */
  ready(){},

  /**
   * 在组件实例被移动到节点树另一个位置时执行
   */
  moved() {},

  /**
   * 在组件实例被从页面节点树移除时执行
   * 在组件离开页面节点树后， detached 生命周期被触发。退出一个页面时，如果组件还在页面节点树中，则 detached 会被触发
   */ 
  detached() {},

  /**
   * 每当组件方法抛出错误时执行
   */
  error(){},

  /**
   * 组件的方法，包括事件响应函数和任意的自定义方法
   */
  methods: {
    /**
     * 自定义初始化方法
     */
    _initialize() {
      this.setData({
        item: this.datetimeStringToArray(this.data.value || this.getCurrDatetime()),
      })
      this.setDatetimeList()
    },

    /**
     * value 改变时触发 change 事件，event.detail = {value}
     */
    changeDatetime(e){
      this.triggerEvent('change', {
        value: this.datetimeArrayToString(this.data.item)
      })
    },

    /**
     * 选择每列时间都会触发
     */
    columnChangeDatetime({ detail }){
      var column = detail.column;
      var value = detail.value;
      this.data.item[column] = parseInt(this.data.list[column][value]);
      this.setData({
        item: this.data.item
      })
      this.setDatetimeList()
    },

    /**
     * 设置时间列数据集
     * @param {*} datetime 
     */
    setDatetimeList(){
      var datetime = this.data.item;
      var currYear = new Date().getFullYear();
      var startArr = this.datetimeStringToArray(this.data.start || (currYear - 100) + '-01-01 01:01');
      var endArr = this.datetimeStringToArray(this.data.end || (currYear + 100) + '-12-31 24:59');

      var startStr = startArr.join('');
      var endStr = endArr.join('');
      var datetimeStr = datetime.join('');

      var yearArr = this.getColumnBetweenArray(startArr[0], endArr[0], '年');
      // 计算开始月
      var startMonth = (datetimeStr.substr(0, 4) <= startStr.substr(0, 4) ? startArr[1] : 1);
      // 计算结束月
      var endMonth = (datetimeStr.substr(0, 4) >= endStr.substr(0, 4) ? endArr[1] : 12);
      var monthArr = this.getColumnBetweenArray(startMonth, endMonth, '月');
      
      // 计算开始日
      var startDay = (datetimeStr.substr(0, 6) <= startStr.substr(0, 6) ? startArr[2] : 1);
      // 计算每年这个月的天数
      var dayCount = new Date(datetime[0], datetime[1], 0).getDate();
      // 计算结束日
      var endDay = (datetimeStr.substr(0, 6) >= endStr.substr(0, 6) ? endArr[2] : dayCount);
      var dayArr = this.getColumnBetweenArray(startDay, endDay, '日');

      // 计算开始小时
      var startHour = (datetimeStr.substr(0, 8) <= startStr.substr(0, 8) ? startArr[3] : 1);
      // 计算结束小时
      var endHour = (datetimeStr.substr(0, 8) >= endStr.substr(0, 8) ? endArr[3] : 24);
      var hourArr = this.getColumnBetweenArray(startHour, endHour, '时');

      // 计算开始分钟
      var startMinute = (datetimeStr.substr(0, 10) <= startStr.substr(0, 10) ? startArr[4] : 1);
      // 计算结束分钟
      var endMinute = (datetimeStr.substr(0, 10) >= endStr.substr(0, 10) ? endArr[4] : 59);
      var minuteArr = this.getColumnBetweenArray(startMinute, endMinute, '分');

      // 计算当前时间的下标
      var yearKey = this.getKey(yearArr, datetime[0]);
      var monthKey = this.getKey(monthArr, datetime[1])
      var dayKey = this.getKey(dayArr, datetime[2])
      var hourKey = this.getKey(hourArr, datetime[3])
      var minuteKey = this.getKey(minuteArr, datetime[4])

      this.setData({
        currKey: [yearKey, monthKey, dayKey, hourKey, minuteKey],
        list: [yearArr, monthArr, dayArr, hourArr, minuteArr],
        item: [parseInt(yearArr[yearKey]), parseInt(monthArr[monthKey]), parseInt(dayArr[dayKey]), parseInt(hourArr[hourKey]), parseInt(minuteArr[minuteKey])]
      })
    },

    /**
     * 获取数值之间数据列表
     * @param {*} start 
     * @param {*} end 
     */
    getColumnBetweenArray(start, end, unit){
      var resArray = [];
      for(var i = start;i <= end; i++){
        resArray.push(this.zeroize(i) + unit);
      }
      return resArray;
    },

    /**
     * 获取KEY
     * @param {*} array 
     * @param {*} item 
     */
    getKey(array, item){
      var key = array.findIndex(value => parseInt(item) == parseInt(value));
      if(key === -1){
        return 0;
      }
      return key;
    },

    /**
     * 补零
     * @param {*} number 
     */
    zeroize(number){
      return number < 10 ? '0' + number : number;
    },

    /**
     * 获取当前时间
     */
    getCurrDatetime(){
      var d = new Date();
      var year = d.getFullYear()
      var month = d.getMonth() + 1
      var day = d.getDate();
      var hours = d.getHours()
      var minutes = d.getMinutes()
      return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes;
    },

    /**
     * 时间字符串转数组
     * @param {*} datetime 
     */
    datetimeStringToArray(datetime){
      return datetime.replace(/-|:/g, ' ').split(' ').map(item => parseInt(item));
    },

    /**
     * 时间数组转字符串
     * @param {*} datetime 
     */
    datetimeArrayToString(datetime){
      return datetime[0] + '-' + datetime[1] + '-' + datetime[2] + ' ' + datetime[3] + ':' + datetime[4]
    }
  },
})


// wxml部分
<picker mode="multiSelector" range="{{ list }}" value="{{ currKey }}" bindchange="changeDatetime" bindcolumnchange="columnChangeDatetime">
    <slot></slot>
</picker>

app.json配置

"usingComponents": {
    "d-demo": "../../components/seldatetime/index"
},

page页面中调用

// wxml文件内容
<d-demo value="{{ value }}" start="2020-01-01 05:20" end="2060-12-30 18:51" bindchange="selectDatetime">
    <input value="{{ value }}" placeholder="请选择时间" style="border: 1px solid #e2e2e2;padding: 10px;border-radius: 5px;"  />
</d-demo>

// JS文件内容
Page({

  /**
   * 页面的初始数据
   */
  data: {
    value: '2023-12-22 16:50',
  },

  /**
   * 选择时间
   */
  selectDatetime(e){
    var d = e.detail
    this.setData({
      value: d.value
    })
  }
})

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1338088.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

k8s的二进制部署（一）

k8s的二进制部署（一）

k8s的二进制部署&#xff1a;源码包部署 环境&#xff1a; k8smaster01: 20.0.0.71 kube-apiserver kube-controller-manager kube-schedule ETCD k8smaster02: 20.0.0.72 kube-apiserver kube-controller-manager kube-schedule Node节点01: 20.0.0.73 kubelet kube-pr…
阅读更多...
2008年AMC8数学竞赛中英文真题典型考题、考点分析和答案解析

2008年AMC8数学竞赛中英文真题典型考题、考点分析和答案解析

今天我们来看看2008年AMC8竞赛的五道典型考题。欢迎您查看历史文章了解之前各年的真题解析&#xff0c;本系列会持续更新&#xff0c;直到大家参加完2024年的比赛。您有任何关于AMC8比赛的任何问题都可以问我&#xff0c;关于题目的解析也可以交流。 【推荐】为帮助孩子们更便…
阅读更多...
人工智能_机器学习076_Kmeans聚类算法_体验_亚洲国家队自动划分类别---人工智能工作笔记0116

人工智能_机器学习076_Kmeans聚类算法_体验_亚洲国家队自动划分类别---人工智能工作笔记0116

我们开始来看聚类算法 可以看到,聚类算法,其实就是发现事物之间的,潜在的关联,把 有关联的数据分为一类 我们先启动jupyter notebook,然后 我们看到这里我们需要两个测试文件 AsiaFootball.txt里面记录了,3年的,亚洲足球队的成绩
阅读更多...
C语言转WebAssembly的全流程，及测试

C语言转WebAssembly的全流程，及测试

第一步&#xff1a;安装环境 参考网址&#xff1a;https://emscripten.org/docs/getting_started/downloads.html 具体过程&#xff1a; 克隆代码&#xff1a;git clone https://github.com/emscripten-core/emsdk.git进入代码目录&#xff1a;cd emsdk获取最新远端代码&…
阅读更多...
阿赵UE学习笔记——5、创建关卡元素

阿赵UE学习笔记——5、创建关卡元素

阿赵UE学习笔记目录 大家好&#xff0c;我是阿赵。   之前介绍了从空白模板创建关卡&#xff0c;接下来尝试着在这个空白的世界里面&#xff0c;创建一些内容。 一、创建地面 1、创建面片作为地面 创建——形状——平面&#xff0c;可以创建一个面片 在细节面板设置合适的…
阅读更多...
深入了解云原生：定义与特征解析

深入了解云原生：定义与特征解析

文章目录 一、云原生概述1.1 什么是云原生1.2 云原生组成要素1.3 补充资料 二、云原生的目标2.1 云原生关键目标2.2 云原生特性 三、云原生应用 VS 传统单体应用参考资料 一、云原生概述 1.1 什么是云原生 (1)云原生定义 云原生(Cloud Native) 是一种软件架构和开发方法论&a…
阅读更多...
云计算IaaS、PaaS和SaaS之

云计算IaaS、PaaS和SaaS之

提供的服务来比较如下两图 示例图 示例图
阅读更多...
PYTHON基础：决策树与随机森林算法

PYTHON基础：决策树与随机森林算法

决策树与随机森林算法 决策树和随机森林都是用于分类和回归的的算法。决策树的原理是通过一系列的问题进行if、else的推导。随机森林是集合学习算法&#xff0c;即把很多的机器学习算法综合在一起组成一个更大的模型。 决策树的优劣势&#xff1a;处理容易&#xff0c;不需要…
阅读更多...
DS八大排序之归并排序和计数排序

DS八大排序之归并排序和计数排序

前言 前几期我们详细介绍了插入排序&#xff08;直接插入排序和希尔排序&#xff09;、选择排序&#xff08;直接选择和堆排序&#xff09;、交换排序&#xff08;冒泡排序和快速排序&#xff09;。并对快排的各个版本做了详细的介绍&#xff0c;本期我们来介绍把最后两个即外…
阅读更多...
关于“Python”的核心知识点整理大全41

关于“Python”的核心知识点整理大全41

目录 scoreboard.py game_functions.py game_functions.py 14.3.8 显示等级 game_stats.py scoreboard.py scoreboard.py scoreboard.py game_functions.py game_functions.py alien_invasion.py 14.3.9 显示余下的飞船数 ship.py scoreboard.py 我们将最高得分圆整…
阅读更多...
大数据与人工智能|全面数字化战略与企业数字化转型（第1节 ）

大数据与人工智能|全面数字化战略与企业数字化转型（第1节 ）

要点一&#xff1a;培养跨学科思维 在分析时&#xff0c;需要采用多学科的思维方式 结果不重要&#xff0c;重要的是如何提炼现象、分析问题和得出结论的过程。 1. 介绍了锤子精神和多学科思维方式的重要性。指出了只从自身学科出发解决问题的局限性。 2. 提倡跨学科思维方式&a…
阅读更多...
家校互通小程序实战开发02首页搭建

家校互通小程序实战开发02首页搭建

目录 1 创建应用2 搭建首页总结 我们上一篇介绍了家校互通小程序的需求&#xff0c;创建了对应的数据源。有了这个基础的分析之后&#xff0c;我们就可以进入到开发阶段了。开发小程序&#xff0c;先需要创建应用。 1 创建应用 登录控制台&#xff0c;点击创建应用&#xff0c…
阅读更多...
2024年深度学习、计算机视觉与大模型面试题综述，六大专题数百道题目

2024年深度学习、计算机视觉与大模型面试题综述，六大专题数百道题目

DeepLearning-Interview-Awesome-2024 本项目涵盖了大模型(LLMs)专题、计算机视觉与感知算法专题、深度学习基础与框架专题、自动驾驶、智慧医疗等行业垂域专题、手撕项目代码专题、优异开源资源推荐专题共计6大专题模块。我们将持续整理汇总最新的面试题并详细解析这些题目&a…
阅读更多...
元宇宙与VR虚拟现实的未来如何？

元宇宙与VR虚拟现实的未来如何？

从科幻小说到商业现实 自从 Facebook年更名为 Meta 以来&#xff0c;关于元宇宙的热议不断&#xff0c;人们对虚拟世界的兴趣也重新燃起&#xff0c;因为尽管虚拟现实 (VR) 的概念由来已久&#xff0c;但该技术现在才开始真正得以应用。 定义元宇宙和虚拟现实 首先是 The Met…
阅读更多...
玩客云 青龙面板

玩客云 青龙面板

一、刷机 需要的工具&#xff0c;镊子&#xff0c;双公头USB&#xff08;可以自己做&#xff09;&#xff0c;U盘 青龙面板全教程 | Anubis的小窝 powersee教程 玩客云导航固件使用说明 安装教程 玩客云乱七八糟的坑 静态IP配置 玩客云第二版固件说明 docker 下载器 …
阅读更多...
摇杆控制人物移动

摇杆控制人物移动

摇杆控制人物移动 一、UI搭建二、3d模型搭建三、脚本JoyStickBar.csPlayerController.cs 工程在我资源里名字叫Joystickbar.unitypackage [连接](https://download.csdn.net/download/qq_42194657/12043019?spm1001.2014.3001.5503) 一、UI搭建 JoyStickBar是图片背景 JoySt…
阅读更多...
【MATLAB第86期】基于matlab的Catboost多输入单输出分类预测模型 catboost-1.1.1版本

【MATLAB第86期】基于matlab的Catboost多输入单输出分类预测模型 catboost-1.1.1版本

基于matlab的Catboost多输入单输出分类预测模型 catboost-1.1.1版本 运行环境 windows10 matlab2020a catboost版本&#xff1a;catboost-1.1.1 往期&#xff1a; 【MATLAB第20期】基于matlab的Catboost多输入单输出回归预测模型 catboost-1.1.1版本 一、导入数据 采用12输…
阅读更多...
sqlilabs第三十六三十七关

sqlilabs第三十六三十七关

Less-36&#xff08;GET - Bypass MySQL_real_escape_string) 手工注入 单引号闭合&#xff08;单引号自动转换的编码变了直接输入%27&#xff09; 自动注入 和上一关一样 Less-37&#xff08;POST - Bypass MySQL_real_escape_string) 手工注入 这个也是碰到过的情况 接下…
阅读更多...
WizFi360-EVB-Pico评估版介绍

WizFi360-EVB-Pico评估版介绍

文章目录 1 概述2 硬件资源2.1 硬件规格2.2 引脚定义2.3 工作条件 3 参考资料3.1 Datasheet3.2 原理图3.3 尺寸图(单位 : mm) 3.4 参考例程 1 概述 WizFi360-EVB-Pico基于树莓派RP2040&#xff0c;并使用WizFi360增加Wi-Fi连接。它与树莓派Pico板引脚兼容&#xff0c;可用于物联…
阅读更多...
城市自贸区/经开区/产业园基于EasyCVR视频技术的可视化、移动化、智能化视频监管方案

城市自贸区/经开区/产业园基于EasyCVR视频技术的可视化、移动化、智能化视频监管方案

一、背景需求 移动互联网的发展激发了用户对轻应用的使用习惯。4G、5G使得无线带宽快速提升&#xff0c;令大流量视频数据流逐渐从PC往手持终端转移。借助智能手持终端也可以实时查看、远程控制、存储录像、抓拍图像&#xff0c;能方便快捷地掌握所关注区域的视频动态。 随着…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023