【愚公系列】《微信小程序与云开发从入门到实践》014-条件元素容器组件与共享元素容器组件

微信小程序提供了日期时间选择器组件`picker`和日历组件`calendar`，但如果需要自定义样式或者功能，可以考虑封装一个日期时间组件。 以下是一个简单的日期时间组件的封装示例： 1. 在`/components`目录下创建一个`datetime-picker`文件夹，创建`datetime-picker.wxml`、`datetime-picker.wxss`、`datetime-picker.js`和`datetime-picker.json`四个文件。 2. 在`datetime-picker.json`中定义组件的属性： ```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`中定义选择器组件： ```html <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