微信小程序时间选择器自定义组件

最新推荐文章于 2025-10-02 13:38:01 发布

原创

最新推荐文章于 2025-10-02 13:38:01 发布 · 2.9k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序

本文档提供了一种微信小程序中实现时间选择器组件的方法，包括js、wxml、wxss和json文件的完整代码。组件支持年、月、日、小时和分钟的选择，并能在选择后回调父组件。组件初始化时会显示当前时间，点击确定按钮后，可以选择的时间将被关闭并返回给父组件。

微信小程序官方

方法：官方提供的 picker、picker-view、picker-view-column 标签（具体点开头官方链接）

一份简单好用的代码(在下方展示)，根据需求可修改使用(代码风格很差，自己可优化)

以下是组件，是完整的(js、wxml、wxss、json)，可直接复制代码到 components 中例如：

components
– TimeComponent（组件）

  		-- TimeComponent.js
  		
  		-- TimeComponent.json
  		
  		-- TimeComponent.wxml
  		
  		-- TimeComponent.wxss

对应复制进去先看效果，自己优化

pages
– index （页面）

  		-- index.js
  		
  		-- index.json
  		
  		-- index.wxml
  		
  		-- index.wxss

在最后会有页面引用代码

//组件内 js 例：组件名为 TimeComponent.js
const date = new Date()
const years = []
const months = []
const days = []
const hourss = []
const minutes = []
for (let i = date.getFullYear(); i <=2066 ; 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 (var i = 0; i < 24; i++) {
   
   
    if(i<10) i = "0"+i
    hourss.push(i);
}
// 分
for (var i = 0; i < 60; i ++) {
   
   
    if(i<10) i = "0"+i
    minutes.push(i);
}
let year; // 年
let month; //  月
let day; // 日
let hours; // 时
let minute; // 分
Component({
   
   
    properties: {
   
   
        times: {
   
   
            type: Object,
            value: {
   
   }
        }
    },
    data: {
   
   
        years,
        months,
        days,
        hourss,
        minutes,
        value: [0, 0, 0,0,0],
    },
    ready() {
   
   
        /**
         * 以下代码可能太繁琐了，可以自己处理优化下代码。
         * 主要功能就是，在点击使用组件的时候，每次进来都展示当前时间，任何时候点击都展示当前点击时候的时				       间。
         */
            const s

最低0.47元/天解锁文章