微信小程序提供了日期时间选择器
组件`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
扫一扫
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
