更新记录

1.0.8(2024-07-10)

默认值bug修复

1.0.7(2024-07-10)

修复Maximum call stack size exceeded问题

1.0.6(2024-01-03)

props.modelValue为空时的展示占位

查看更多

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.8.0 app-vue app-nvue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

好的,我将为您调整 readme.md 文件的内容,以中文呈现您的 UniApp 日期时间选择器组件的信息。


UniApp 日期时间选择器组件

概览

这个 UniApp 组件是一个多功能的日期时间选择器,允许用户选择日期、周、月、季度或年份,并可选择性地选择时间(小时、分钟、秒)。它高度可配置,适用于各种日期时间选择需求。

特性

  • 支持多种选择类型:年、半年、季度、年月、周和日期。
  • 可选的时间选择:小时、分钟和秒。
  • 基于用户选择的响应式 UI 更新。
  • 可自定义的高度和指示线高度。

属性(Props)

属性 类型 默认值 描述
modelValue Array "" 选中的日期范围值。
height Number 300 选择器视图的高度。
indicatorLineHeight Number 50 指示线的高度。
type String "date" 日期选择器的类型。包括:yearhalfYearquarteryearMonthweekdate
includeHours Boolean false 是否包括小时选择。
includeMinutes Boolean false 是否包括分钟选择。
includeSeconds Boolean false 是否包括秒选择。
dateSelectTextStyle String, Object '' 日期选择结果文本框的文本的样式。可以是字符串或对象。

使用方法

  1. 将组件导入到您的项目中。

  2. 在模板中添加组件:

    <template>
     <YourComponentName :modelValue="yourModelValue" :type="yourType" ... />
    </template>
  3. 在脚本中定义属性:

    <script>
    export default {
     data() {
       return {
         yourModelValue: ["2023-01-01", "2023-12-31"],
         yourType: "date",
         // 根据需要定义其他属性
       };
     },
    };
    </script>
  4. 通过调整其属性来自定义组件。

示例

这是一个使用该组件作为日期范围选择器的示例:

<template>
  <YourComponentName
    :modelValue="dateRange"
    type="date"
    :includeHours="true"
    :includeMinutes="true"
    :includeSeconds="false"
  />
</template>

<script>
  export default {
    data() {
      return {
        dateRange: ["2023-01-01", "2023-12-31"],
      };
    },
  };
</script>

在此示例中,YourComponentName 应替换为您实际给组件命名的名称,而 dateRange 是一个在组件脚本中定义的数据属性。

样式

可以使用 SCSS 对组件进行样式设置。您可以在组件文件的 <style lang="scss" scoped> 部分修改样式。

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问