微信小程序纯js 手写时间组件（Component）分类上午、中午、下午、晚上、全天！

本文链接：https://blog.youkuaiyun.com/weixin_40291248/article/details/102602434

针对产品需求，本文介绍了如何在微信小程序中手写一个时间组件，以实现上午、中午、下午、晚上和全天五个时间段的选择。由于小程序自带的picker组件无法满足自定义时间需求，作者详细讲解了组件的实现过程，包括html、css和js源码，并提醒了一个iOS平台的日期格式bug。

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

产品需求大致：用户筛选N个艺人，艺人档期设置的时间分为5个时间段：上午0 - 11: 59、中午12 - 1: 59、下午2 - 5: 59、晚上6 - 11: 59、全天 00到23：59

效果图：

微信小程序自带picker ：mode = date 组件的时间无法自定义，所以迎合产品需求出发只能手写一个components 组件，

小程序时间文档：https://developers.weixin.qq.com/miniprogram/dev/component/picker.html

html:源码

<!--components/pickerYMDHM/pickerYMDHM.wxml-->
<picker disabled="{
  {disabled}}" mode="multiSelector" bindchange="pickerChange" bindcolumnchange="pickerColumnChange" bindcancel="pickerCancel" value="{
  {pickerIndex}}" range="{
  {pickerArray}}" range-key="{
  {'name'}}">
  <text class="riqi">{
  {d_new_one}}</text>

  <view class='fr' style="display:{
  {a_none}}">
    <span style="display:{
  {d_new_one != '迅速找到' ? 'none' : '' }}" class="color_new" data-d="{
  {d_new_one}}">对应日期下</span>
    有空档的艺人
  </view>
</picker>

css:源码

.color_new {
  color: #1cccbe;
}

.fr {
  float: left;
  letter-spacing: 1px;
  /* position: absolute;
  z-index: 1; */
}

.riqi {
  letter-spacing: 1px;
  float: left;
  /* color: #7E8EA6; */
}

.fh_true_2 {
  float: right;
  width: 65px;
  height: 25px;
  margin-top: 0px;
  margin-left: 20px;
}

js 源码

// components/pickerYMDHM/pickerYMDHM.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    date: { // 属性名
      type: null, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: null // 属性初始值（可选），如果未指定则会根据类型选择一个
    },
    startDate: {
      type: null, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: null // 属性初始值（可选），如果未指定则会根据类型选择一个
    },
    endDate: {
      type: null, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: null // 属性初始值（可选），如果未指定则会根据类型选择一个
    },
    disabled: {
      type: null, // 类型（必填），目前接受的类型包括&