微信小程序自带的picker组件在mode为time时，可以弹出时分选择器。但在很多业务里，仅仅能选一个时间点远远不够。比如预约系统要限制用户只能选择未来七天内的上午九点到下午六点，再比如配送下单不能选择已经过去的时段。官方picker组件没有min和max属性，直接使用会导致用户选到非法时间，提交时还需要额外校验，体验割裂。自定义picker的思路不是重写原生滚轮，而是基于picker-view做一层数据源控制，让非法时间从一开始就不出现在列表里，用户滑动时自然只能碰到合法值。
一、原生picker的局限与自定义方案设计
原生picker的mode为date时只能选择日期，mode为time时只能选时分，mode为multiSelector虽然可以组合多列，但数据源需要自己维护，官方文档并没有提供可选范围的开关。想让某个时段不可选，只能靠业务层在提交后拦截。这种做法有两个明显问题：一是不可选时间仍然会展示在滚轮里，用户滑动到一半才发现不能选；二是校验逻辑容易和列表数据不一致，比如改了可选范围后忘记同步校验函数，导致线上出现脏数据。
自定义picker组件的核心思路是把范围约束前置到数据源构建阶段。组件接收开始时间、结束时间、步长三个参数，在初始化时生成一个只包含合法时间的数组，再交给picker-view渲染。picker-view是官方提供的可嵌入滚动选择器，支持单列和多列，比自绘滚轮稳定，也兼容小程序的基础库版本。组件内部只需要维护当前选中索引，用户滑动时通过bindchange事件更新选中值，确认后再通过triggerEvent把结果抛给页面。这种设计让非法值从源头上消失，不必再写提交校验。
<view class="custom-picker">
<view class="picker-trigger" bindtap="openPicker">
<text>{{selectedTimeText}}</text>
</view>
<view wx:if="{{visible}}" class="picker-mask" bindtap="closePicker" catchtouchmove="noop">
<view class="picker-panel" catchtap="noop">
<picker-view
value="{{pickerIndex}}"
class="picker-view"
indicator-style="height: 50px;"
bindchange="onPickerChange">
<picker-view-column>
<view wx:for="{{timeOptions}}" wx:key="index" class="picker-item">
{{item}}
</view>
</picker-view-column>
</picker-view>
<button class="confirm-btn" bindtap="confirmPick">确定</button>
</view>
</view>
</view>
组件的外层结构分为触发区域和弹层，弹层用遮罩防止误触，picker-view的indicator-style控制中间高亮条高度。遮罩层和面板上都加了catchtouchmove，用来阻止背景页面跟着滚动。触发区域可以按业务需求换成任意样式，比如显示日历图标或占位文案，保持组件对外展示灵活。
二、时间范围过滤算法与跨天处理
时间范围限制的本质是把字符串转成分钟数进行区间判断。一个自然日的分钟范围从0到1439，表示00:00到23:59。比如09:00转成540，18:00转成1080，步长为30时，就生成540、570、600一直到1080的分钟序列，再格式化成HH:mm字符串。这样做的好处是不需要和Date对象打交道，逻辑简单，也避免了时区在部分真机上表现不一致的问题。
跨天场景需要单独处理。比如开始时间是22:00，结束时间是次日02:00，如果直接用end减去start会得到负数分钟。此时应把区间拆成两段：第一段从start到1439，第二段从0到end，分别生成再拼接。拼接后的数组顺序保持自然时间顺序，用户先看到22:00之后的时段，再看到00:00到02:00的凌晨时段。对于外卖、夜间配送、网约车这类业务，这种跨天逻辑是必须的。
生成时间列表时还要注意步长是否能整除区间，以及结束时间是否恰好等于某个生成值。代码里用for循环从开始值出发，每次递增step，只要当前值小于等于结束值就继续。这样即使步长不能整除，最后一个值也会落在结束值之前，不会超出范围。对于步长为15、20等非整十数值同样适用。
function toMinutes(timeStr) {
const parts = timeStr.split(':');
return parseInt(parts[0], 10) * 60 + parseInt(parts[1], 10);
}
function buildTimeOptions(startTime, endTime, step) {
const options = [];
const start = toMinutes(startTime);
const end = toMinutes(endTime);
const maxMinute = 24 * 60 - 1;
if (start <= end) {
for (let i = start; i <= end; i += step) {
options.push(formatMinute(i));
}
} else {
for (let i = start; i <= maxMinute; i += step) {
options.push(formatMinute(i));
}
for (let i = 0; i <= end; i += step) {
options.push(formatMinute(i));
}
}
return options;
}
function formatMinute(total) {
const hour = Math.floor(total / 60);
const minute = total % 60;
return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
}
上面这段代码就是范围过滤的核心。实际项目里还可以进一步扩展，比如接收一个日期参数，把日期和时间拼成完整时间戳再过滤，这样就能限制未来几天的具体时段。但无论上层怎么变，底层的分钟区间判断逻辑保持不变。
三、组件封装与页面通信
自定义组件需要处理属性监听。微信小程序的Component构造器支持properties和observers。当startTime、endTime或step任何一个变化时，就重新生成可选时间数组。如果外部传入的value不在新列表里，比如页面扩展了可选范围但旧值已经被过滤掉，组件应将选中值自动修正为列表第一项，避免picker-view的索引越界。
组件确认选择后，通过triggerEvent发送change事件，页面上使用bind:change监听。事件参数建议只返回时间字符串，不要把完整列表抛给页面，这样页面只需关心结果，不用理解组件内部实现。如果业务要求带扩展信息，可以在事件detail里加一个字段，但保持结构简单更利于维护。
Component({
properties: {
startTime: {
type: String,
value: '09:00'
},
endTime: {
type: String,
value: '18:00'
},
step: {
type: Number,
value: 30
},
value: {
type: String,
value: ''
}
},
data: {
visible: false,
timeOptions: [],
pickerIndex: [0],
selectedTimeText: ''
},
observers: {
'startTime, endTime, step': function() {
this.refreshOptions();
}
},
lifetimes: {
attached() {
this.refreshOptions();
}
},
methods: {
refreshOptions() {
const { startTime, endTime, step } = this.properties;
const options = buildTimeOptions(startTime, endTime, step);
let selected = this.properties.value;
let index = options.indexOf(selected);
if (index < 0) {
selected = options[0] || '';
index = 0;
}
this.setData({
timeOptions: options,
pickerIndex: [index],
selectedTimeText: selected
});
},
openPicker() {
this.setData({ visible: true });
},
closePicker() {
this.setData({ visible: false });
},
noop() {},
onPickerChange(e) {
const index = e.detail.value[0];
const selectedTimeText = this.data.timeOptions[index];
this.setData({
pickerIndex: [index],
selectedTimeText: selectedTimeText
});
},
confirmPick() {
const selectedTimeText = this.data.selectedTimeText;
this.triggerEvent('change', { value: selectedTimeText });
this.closePicker();
}
}
});
组件销毁或隐藏时，可以保留visible状态，不必每次都销毁重建。频繁展示弹层时，把timeOptions缓存下来能减少重复计算。对于性能敏感场景，可以在properties里增加一个日期参数，按天生成数据，避免一次性生成未来多个日期的全部时间点。
页面侧调用比较简单，只需传入范围和步长，然后监听change事件即可，下面是一个使用示例。
<view class="page">
<custom-time-picker
start-time="09:00"
end-time="18:00"
step="{{30}}"
value="10:30"
bind:change="onTimeChange"
/>
</view>
Page({
onTimeChange(e) {
console.log('选择的时间：', e.detail.value);
}
});
四、调试与边界问题处理
真机调试时最容易碰到两个问题：一个是selectedTimeText初始为空导致触发区域显示空白，另一个是picker-view的value索引与数组长度不匹配。第一个问题可以在refreshOptions中给默认值，第二个问题在setData前判断index是否小于0，并重置为0。这类边界判断最好封装成工具函数，在组件初始化、属性变化、外部传入value变化时都调用一次。
滚动穿透也是常见毛病。自定义弹层出现后，用户滑动选择器，背景页面可能跟着滚动。解决方法是在遮罩层和面板分别加上catchtouchmove，组件内声明一个空函数noop作为处理函数，阻止事件冒泡到页面。注意不要直接省略处理函数，否则部分安卓机型仍然会穿透。
时间区间的校验可以放在构建函数里。若传入的开始时间晚于结束时间且业务不需要跨天，就应该交换或直接报错。组件里可以用console.warn输出提示，但不要静默修正，否则开发阶段很难发现配置错误。正式环境建议把错误信息通过自定义事件上抛，方便接入统一的日志系统。
.picker-mask {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.45);
}
.picker-panel {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background: #ffffff;
border-radius: 20rpx 20rpx 0 0;
}
.picker-view {
height: 300rpx;
}
.picker-item {
height: 50px;
line-height: 50px;
text-align: center;
}
用自定义picker做时间范围限制，核心不是重写滚轮，而是把约束放进数据源。这样做既减少提交前校验，也让用户操作更顺畅。组件设计完成后，还可以扩展到日期范围、多列联动选择等场景，整体思路同样适用。