Sard-Uniapp 组件库中日期时间选择器输入框的格式定制指南

Sard-Uniapp 组件库中日期时间选择器输入框的格式定制指南

sard-uniapp sard-uniapp 是一套基于 Uniapp + Vue3 框架开发的兼容多端的 UI 组件库。 项目地址: https://gitcode.com/gh_mirrors/sa/sard-uniapp

组件概述

Sard-Uniapp 是一款基于 UniApp 的组件库，其中的 sar-datetime-picker-input 组件是一个功能强大的日期时间选择器输入框。该组件允许用户通过点击输入框弹出日期时间选择器，选择后自动填充到输入框中。

默认格式支持

该组件内置了几种常见的日期时间格式映射：

const mapTypeFormat = {
  y: 'YYYY',          // 仅年份
  yM: 'YYYY-MM',      // 年月
  yMd: 'YYYY-MM-DD',  // 年月日
  yMdhm: 'YYYY-MM-DD HH:mm',       // 年月日时分
  yMdhms: 'YYYY-MM-DD HH:mm:ss',   // 年月日时分秒
  hm: 'HH:mm',        // 时分
  hms: 'HH:mm:ss'     // 时分秒
}

开发者可以通过设置 type 属性来使用这些预定义的格式。例如：

<sar-datetime-picker-input type="yMd" />

自定义格式需求

在实际开发中，我们可能会遇到需要显示"年月日时"（如"2023-11-28 14时"）这样的特殊格式。这种情况下，预定义的格式映射无法满足需求。

解决方案：outlet-format 属性

Sard-Uniapp 提供了 outlet-format 属性来实现完全自定义的日期时间格式。该属性接受一个符合 moment.js 格式规则的字符串。

使用示例

要实现"年月日时"的显示格式，可以这样使用：

<sar-datetime-picker-input outlet-format="YYYY-MM-DD HH时" />

常用格式符号

以下是一些常用的格式符号，可用于构建自定义格式：

• YYYY: 四位数的年份
• MM: 两位数的月份（01-12）
• DD: 两位数的日期（01-31）
• HH: 24小时制的小时（00-23）
• mm: 分钟（00-59）
• ss: 秒（00-59）

最佳实践建议

1. 一致性原则：在整个应用中保持日期时间格式的一致性
2. 用户友好：选择符合用户地区习惯的日期时间格式
3. 明确性：确保格式能清晰表达时间信息，避免歧义
4. 性能考虑：对于大量使用日期时间选择器的页面，预定义的 type 属性可能比自定义格式性能更优

总结

Sard-Uniapp 的 sar-datetime-picker-input 组件既提供了常用的日期时间格式预设，又通过 outlet-format 属性支持完全自定义的格式显示。开发者可以根据实际需求灵活选择使用方式，既可以利用内置格式快速开发，也能通过自定义格式满足特殊场景需求。

对于需要显示"年月日时"这类特殊格式的场景，推荐使用 outlet-format 属性来实现，这为开发者提供了最大的灵活性。

sard-uniapp sard-uniapp 是一套基于 Uniapp + Vue3 框架开发的兼容多端的 UI 组件库。 项目地址: https://gitcode.com/gh_mirrors/sa/sard-uniapp