小程序 + dayjs自定义 picker 时间选择器

效果图

代码片段

初始化

npm init -y

下载

npm install dayjs

构建

微信开发者工具–工具–构建 npm

说明

multiSelector 开启多列选择器
range 渲染的数据
range-key 渲染的数据需要展示的字段
value 选中的索引
bindchange 确认触发
bindcolumnchange 列表滑动时触发

<picker mode="multiSelector" data-type="start" range-key="label" value="{{customValue}}" range="{{customTime}}" bindchange="customChange" bindcolumnchange="columnChange">
	<view>请假开始日期 -- {{detail.startAt}}view>
picker>

<picker mode="multiSelector" data-type="end" range-key="label" value="{{customValue}}" range="{{customTime}}" bindchange="customChange" bindcolumnchange="columnChange">
	<view>请假结束日期 -- {{detail.endAt}}view>
picker>

<view class="cell-title">请假天数 -- {{detail.day}}view>
1
2
3
4
5
6
7
8
9

dayjs 说明

dayjs().format(“YYYY”) 格式化时间
dayjs().add(90, “day”) 时间增加
dayjs().subtract(30, “day”) 时间减少
dayjs().subtract(30, “day”).day() 返回当前时间的星期索引0开始（0是周日）

import dayjs from "dayjs";

Page({
  data: {
    detail: {
      startAt: "",
      endAt: "",
      day: 0,
    },
    customTime: [
      [],
      [
        {
          label: "上午",
          field: "6:00",
          value: "上午",
        },
        {
          label: "下午",
          field: "18:00",
          value: "下午",
        },
      ],
    ],
    customValue: [30, 0], // 默认选中的索引
  },
  columnChange(e) {},
  customChange(e) {
    // value [1, 1]  选中的索引
    const { value } = e.detail;
    const { type } = e.currentTarget.dataset;
    const { customTime, detail } = this.data;

    // detail.startAllDate 构造完整时间方便自动计算请假天数 （最小0.5天）
    if (type === "start") {
      this.setData({
        "detail.startAt": `${customTime[0][value[0]].label} ${
          customTime[1][value[1]].label
        }`,
        "detail.startAllDate": `${customTime[0][value[0]].field} ${
          customTime[1][value[1]].field
        }`,
      });
    } else if (type === "end") {
      this.setData({
        "detail.endAt": `${customTime[0][value[0]].label} ${
          customTime[1][value[1]].label
        }`,
        "detail.endDate": `${customTime[0][value[0]].field}`,
        "detail.endAllDate": `${customTime[0][value[0]].field} ${
          customTime[1][value[1]].field
        }`,
      });
    }
    // 计算天数
    if (detail.startAllDate && detail.endAllDate) {
      const start = new Date(detail.startAllDate).getTime();
      const end = new Date(detail.endAllDate).getTime();
      const diff = (end - start) / (24 * 60 * 60 * 1000);
      this.setData({
        "detail.day": diff * 1 + 0.5,
      });
    }
  },

  initTimeData() {
    const week = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
    // 构造当前时间前30天
    let startTime = dayjs().subtract(30, "day");
    // 构造当前时间前90天
    let endTime = dayjs().add(90, "day");

    let timeList = [];
    while (startTime < endTime) {
      /**
       * 当天显示 今天
       * 本年显示 x月x日 周x
       * 不是今年显示 x年x月x日 周x
       */
      const currentFormat =
        dayjs().format("YYYY") === startTime.format("YYYY")
          ? dayjs().format("MM月DD日") === startTime.format("MM月DD日")
            ? "今天"
            : startTime.format("MM月DD日")
          : startTime.format("YYYY年MM月DD日");

      // startTime.day() 返回时间对应的周几 （周日开始为0）
      const label = `${currentFormat} ${week[startTime.day()]}`;
      const value = `${startTime.format("YYYY-MM-DD")}`;
      const field = `${startTime.format("YYYY-MM-DD")}`;
      timeList.push({
        label,
        value,
        field,
      });
      // 时间 + 1
      startTime = startTime.add(1, "day");
    }
    // 第一列数据构造完成
    this.setData({
      [`customTime[0]`]: timeList,
    });
  },
  onLoad() {
    this.initTimeData();
  },
});

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108