支付宝小程序日期选择组件 datePicker 封装指南

2023-11-13 14:31:32

概述

支付宝小程序的日期选择组件 datePicker 是一款功能强大的组件，它允许用户选择日期和时间。在快递上门场景中，用户需要选择一个日期和时间，以便快递员上门取件。为了满足这个特殊需求，我们需要对 datePicker 组件进行封装，使其能够只显示当日往后 2 天的日期，并且时间选择为早上 9 点至下午 18 点间的 10 个小时整点时间。

封装步骤

在小程序的配置文件 app.json 中添加 datePicker 组件的声明：

{
  "usingComponents": {
    "datePicker": "/path/to/datePicker"
  }
}

在小程序的页面文件中引入 datePicker 组件：

import { DatePicker } from '@components/datePicker/index';

在小程序的页面文件中使用 datePicker 组件：

<van-cell-group title="请选择上门时间">
  <van-cell is-link>
    <template #right>
      <datePicker
        start-date="{{ startDate }}"
        end-date="{{ endDate }}"
        default-date="{{ defaultDate }}"
        column-order="year,month,day,hour"
        hour-list="{{ hourList }}"
        on-change="onDateChange"
      />
    </template>
  </van-cell>
</van-cell-group>

在小程序的页面文件中定义 startDate、endDate、defaultDate、hourList 和 onDateChange 方法：

import { formatDate } from '@/utils/date';

Page({
  data: {
    startDate: formatDate(new Date(), 'yyyy-MM-dd'),
    endDate: formatDate(new Date().setDate(new Date().getDate() + 2), 'yyyy-MM-dd'),
    defaultDate: formatDate(new Date(), 'yyyy-MM-dd'),
    hourList: [
      '09:00',
      '10:00',
      '11:00',
      '12:00',
      '13:00',
      '14:00',
      '15:00',
      '16:00',
      '17:00',
      '18:00'
    ],
  },

  methods: {
    onDateChange(event) {
      const { date } = event.detail;
      this.setData({
        defaultDate: date
      })
    }
  }
})