更新记录
1.0.0.2(2025-12-29) 下载此版本
mode 默认值改date
1.0.0.1(2025-12-29) 下载此版本
master
1.0.0(2025-12-29) 下载此版本
master
查看更多平台兼容性
uni-app(4.45)
| Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
|---|---|---|---|---|---|---|---|---|
| √ | √ | √ | √ | √ | √ | √ | √ | √ |
| 微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
|---|---|---|---|---|---|---|---|---|---|---|
| √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ |
安装
在市场导入xf-fm-date-regionuni_modules版本的即可,无需import
组件关联说明
代码演示
插件使用
- 位于 uni_modules/xf-fm-date-region/components/xf-fm-date-region
- 导入插件后直接使用
<xf-fm-date-region title="标题" v-model:startTime="formData.startTime" v-model:endTime="formData.endTime"/>
基本用法
- 使用组件代码如下:
<template>
<view class="page-view">
<xf-fm-date-region title='日期区间选择' v-model:startTime="formData.startTime"
v-model:endTime="formData.endTime"></xf-fm-date-region>
</view>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const formData = ref({
startTime: '',
endTime: '',
})
</script>
API
Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model:startTime | 选择后的开始日期 | string | - |
| v-model:endTime | 选择后的结束日期 | string | - |
| required | *是否必填 | boolean | true |
| title | 标题 | string | - |
| customClass | 自定义class | string | - |
| labelWidth | 标题宽度设置 | string|number |
- |
| tip | 提示语 | string | - |
| bottomTip | 副标题(标题解释) | string | - |
| mode | 日期选择器样式,date|year-month|datetime|time |
string | date |
| minDate | 最小日期选择(时间戳) | number | 1970-01-01 |
| maxDate | 最大日期选择(时间戳) | number | 2100-01-01 |
| cancelColor | 左边取消按钮颜色 | string | - |
| confirmColor | 右边确认按钮颜色,默认主题颜色 | string | - |
| showPickerTitle | 是否显示标题 | boolean | true |

收藏人数:
下载插件并导入HBuilderX
赞赏(0)
下载 286
赞赏 0
下载 12710282
赞赏 1832
赞赏
京公网安备:11010802035340号