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

最新推荐文章于 2024-07-11 14:47:36 发布

潇、然

最新推荐文章于 2024-07-11 14:47:36 发布

阅读量866

点赞数 1

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/weixin_43512977/article/details/127732588

小程序专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用微信小程序和day.js实现的请假日期选择器。该选择器支持多列选择，可自定义时间范围，并能自动计算请假天数。通过构造特定格式的时间数据，实现对开始与结束日期的选择。

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

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

代码片段

初始化

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>

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();
  },
});