更新记录

1.0.6（2024-01-03）

props.modelValue为空时的展示占位

1.0.5（2024-01-03）

添加dateSelectTextStyle

1.0.4（2024-01-03）

上传演示项目

平台兼容性

UniApp 日期时间选择器组件

概览

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

特性

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

属性（Props）

使用方法

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

2. 在模板中添加组件：

   <template>
    <HrDatetimePicker :modelValue="modelValue" :type="type"  />
   </template>

3. 在脚本中定义属性：

   <script>
   export default {
    data() {
      return {
        modelValue: ["2023-01-01", "2023-12-31"],
        type: "date",
        // 根据需要定义其他属性
      };
    },
   };
   </script>

4. 通过调整其属性来自定义组件。

示例

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

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

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

样式

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