微信小程序picker多列选择器：日期+时间组件

最新推荐文章于 2025-03-12 15:12:11 发布

支猫

最新推荐文章于 2025-03-12 15:12:11 发布

阅读量3.8k

点赞数 6

分类专栏：微信小程序文章标签： js 小程序

本文链接：https://blog.csdn.net/qq_45314240/article/details/115607682

版权

微信小程序picker多列选择器：日期+时间组件

在这里插入图片描述

话不多说，直接上代码：

html:

<!-- 组件 -->
<view>
    <picker range="{
    {test}}" mode="multiSelector" bindcolumnchange='bindcolumnchange' value="{
    {selectvalue}}" bindchange="bindchange">
        {
  {date}} {
  {time}}
    </picker>
</view>

<!--调用组件-->
<view>
  <picker-date bind:pConfirm='pConfirm'></picker-date>
</view>

页面方法
javascript:

const app = getApp()

Page({
   
  data: {
   
    show:'none'
  },

  pConfirm(data){
   
    console.log('外部方法',data.detail)
  },
  
  onLoad() {
   
    
  },
})

组件
javascript:

Component({
   
  /**
   * 组件的属性列表
   */
  properties: {
   

  },

  /**
   * 组件的初始数据
   */
  data: {
   
    test: [
      [],
      [],
      [],
      [],
      [],
    ],
    selectvalue: [1, 2, 3, 4, 5],
    date: '',
    time:'01-01'
  },

  /**
   * 组件的方法列表
   */
  methods: {
   
    formatNumber(n){
   
      n = n.toString()
      return n[1] ? n : '0' + n
    },
    formatDate(date){
   
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate(