微信小程序picker实现年月日时五级联动

最新推荐文章于 2024-11-24 01:45:00 发布

梁雨季™

最新推荐文章于 2024-11-24 01:45:00 发布

阅读量543

点赞数

分类专栏：微信小程序文章标签：数据结构

本文链接：https://blog.youkuaiyun.com/qq_1296888290/article/details/111999270

版权

本文介绍了如何在微信小程序中使用picker组件的multiSelector模式，实现年月日时的五级联动效果，特别关注年份和月份选择对日天数的影响。通过设置特定的数据结构和监听联动，动态调整日选项的天数，以确保选择的准确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：

使用picker的multiSelector多列模式实现年月日时选择，这里的联动，只是调整日的天数，年份和月份的选择影响日的天数！

在这里插入图片描述

实现：

节点

<picker mode="multiSelector"
        bindcolumnchange="bindMultiPickerColumnChange"
        bindchange="pickerChange"
        value="{
    {multiIndex}}"
        range="{
    {list}}">
  {
  {date|| '选择时间'}}
</picker>

保存选中的年份，和月份索引，默认为第一个

let yearIndex = 0, monthIndex = 0;
Page({
   
....
)}

数据结构：list [ [年], [月], [日], [时], [分] ]，day:[ [30天], [31天], [28天], [29天]]

list:[
            ['2011','2012','2013','2014','2015','2016','2017','2018','2019','2020','2021','2022','2023','2024','2025','2026'],
            ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
            ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20','21', '22'