小程序自定义picker，时间选择：年月日小时

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

一个打工仔的笔记

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

阅读量1.6k

点赞数

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

本文链接：https://blog.youkuaiyun.com/Web_Notes/article/details/114028747

版权

小程序自定义picker，时间选择：年月日小时,当前时间之前的时间不能选择（详细讲解）

效果图
在这里插入图片描述

html
mode=“multiSelector” 多列
bindcolumnchange 列改变时触发事件
bindchange 确定时触发的事件
val的值为选中的值下标
range的值如果为对象，比如{id:0,name:小明] 那么要加属性 rang-key=‘name’ name为对象里需要展示的属性名

        <picker mode="multiSelector" start='{
   {today}}' bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{
   {multiIndex}}" range="{
   {multiArray}}">
        <view class="picker">
          {
   {
   askDate==""?"选择送达时间":askDate}}
        </view>
      </picker>

data:{
   
	askDate:"",//显示已选择的时间
    multiArray: [//四个数组，有四个选择项 年-月-日-小时
      ['2021', '2022', '2023','2024','2025','2026','2027','2028','2029','2030','2031'],
      ['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', '23', '24', '25', '26', '27', '28', '29', '30'],
      ["00", "01", "02", "03", "04", "05", "06"