微信小程序日期时间组件的封装

微信小程序提供了日期时间选择器组件`picker`和日历组件`calendar`，但如果需要自定义样式或者功能，可以考虑封装一个日期时间组件。

以下是一个简单的日期时间组件的封装示例：

1. 在`/components`目录下创建一个`datetime-picker`文件夹，创建`datetime-picker.wxml`、`datetime-picker.wxss`、`datetime-picker.js`和`datetime-picker.json`四个文件。

2. 在`datetime-picker.json`中定义组件的属性：

{
  "component": true,
  "usingComponents": {},
  "properties": {
    "startDate": {
      "type": String,
      "value": "2023-02-15",
    },
    "endDate": {
      "type": String,
      "value": "2023-02-20",
    },
    "startTime": {
      "type": String,
      "value": "00:00",
    },
    "endTime": {
      "type": String,
      "value": "23:59",
    },
    "defaultDate": {
      "type": String,
      "value": "",
    },
    "defaultTime": {
      "type": String,
      "value": "",
    },
    "format": {
      "type": String,
      "value": "datetime",
    },
    "showTime": {
      "type": Boolean,
      "value": true,
    },
    "showDate": {
      "type": Boolean,
      "value": true,
    },
    "startPlaceholder": {
      "type": String,
      "value": "开始时间",
    },
    "endPlaceholder": {
      "type": String,
      "value": "结束时间",
    },
    "bind:change": {
      "type": Function,
      "value": "",
    }
  },
  "options": {
    "styleIsolation": "apply-shared"
  }
}

上述属性中：

- `startDate`和`endDate`为日期范围，用于限制可选日期的范围；
- `startTime`和`endTime`为时间范围，用于限制可选时间的范围；
- `defaultDate`和`defaultTime`为默认值；
- `format`为显示格式，支持`datetime`、`date`和`time`三种格式；
- `showTime`和`showDate`分别控制是否显示时间和日期选择器；
- `startPlaceholder`和`endPlaceholder`为开始时间和结束时间的占位符；
- `bind:change`为选择器值变化时的回调函数。

3. 在`datetime-picker.wxml`中定义选择器组件：

<view class="datetime-picker">
  <view wx:if="{{showDate}}" class="datetime-picker-item">
    <picker mode="date" start="{{startDate}}" end="{{endDate}}" value="{{selectedDate}}" bindchange="onDateChange">
      <view class="datetime-picker-value">
        <text wx:if="{{selectedDate}}">{{selectedDate}}</text>
        <text wx:else>{{startPlaceholder}}</text>
      </view>
    </picker>
  </view>
  <view wx:if="{{showTime}}" class="datetime-picker-item">
    <picker mode="time" start="{{startTime}}" end="{{endTime}}" value="{{selectedTime}}" bindchange="onTimeChange">
      <view class="datetime-picker-value">
        <text wx