@xtdev/xt-miniprogram-ui 1.2.60 → 1.2.61

package/libs/xt-date-picker-loop/README.md

@@ -0,0 +1,77 @@
+<!--
+ * @Author: Mr.Hu
+ * @Date: 2024-01-04 16:02:07
+ * @Description: 
+ * @LastEditors: Mr.Hu
+-->
+# 时间选择器
+
+### 介绍
+用于选择单个时间点或时间范围
+
+### 效果图
+![效果图](https://img.tanjiu.cn/home/jejaRihM8wyBbSekBeneansB3GCTwCD8.png "时间选择器")
+
+### 引入
+在app.json或页面配置json中引入
+```
+"usingComponents": {
+    "xt-date-picker": "@xtdev/xt-miniprogram-ui/xt-date-picker",
+}
+```
+
+## 代码演示
+
+### 基础用法
+![效果图](https://img.tanjiu.cn/home/jejaRihM8wyBbSekBeneansB3GCTwCD8.png "基础用法")
+
+```
+<xt-date-picker show="{{true}}" />
+```
+
+### 指定为按日筛选
+![效果图](https://img.tanjiu.cn/home/bX2eCnbwTyAjaxCFasTHedKfZQEdEDzD.png "指定为按日筛选")
+
+```
+<xt-date-picker show="{{true}}" type="date" />
+```
+### 指定最小和最大可选日期
+![效果图](https://img.tanjiu.cn/home/DCHaTGQBHMy74W5n2YCZeZ6hc3fnkn3D.png "指定最小和最大可选日期")
+
+```
+<xt-date-picker show="{{true}}" minDate="2023-4-1" maxDate="2024-4-1"/>
+```
+### 指定选择器默认选中日期
+![效果图](https://img.tanjiu.cn/home/cfwHk7JrBpGRpihQG2w6HDbw3TsQbs2p.png "指定选择器默认选中日期")
+
+```
+<xt-date-picker show="{{true}}" currentDate="2022-4-1"/>
+```
+### 展示切换模式按钮
+![效果图](https://img.tanjiu.cn/home/sfawPWDsenpxtjWnPhXCxFcsnhQYBhHQ.png "展示切换模式按钮")
+
+```
+<xt-date-picker show="{{true}}" showChangeTab="{{true}}"/>
+```
+
+## API
+
+#### xt-date-picker props
+
+| 参数      | 说明 |  类型 |
+| ----------- | ----------- | ---------- |
+| show      | 是否显示时间选择器，默认false | `Boolean` |
+| title   | 选择器标题  | `String` |
+| type   | 选择模式，默认`dateRange`（可选值为`date`、`dateRange`）  | `String` |
+| minDate   | 最小可选日期  | `String` |
+| maxDate   | 最大可选日期  | `String` |
+| currentDate   | 选择器默认选中的日期，默认为当天  | `Number` |
+| showChangeTab   | 是否展示切换模式按钮，默认false  | `Boolean` |
+| confirmButtonText   | 确认按钮文字  | `String` |
+| cancelButtonText   |  取消按钮文字  | `String` |
+
+## Event
+
+| 事件名      | 说明 | 回调参数 |
+| ----------- | ----------- | ----------- |
+| getDateValue      | 点击确认按钮时触发 | `String` |