Time 时间

常用与选择时间相关的场景。

注意

pa-time 可独立使用，在 pa-form/pa-table 中可使用时，需配置 prop 字段。

组件功能展示

Display

2024-04-23 至 2024-04-28

基础使用(类型：date-picker-group)

-

类型：date-picker

date-time-picker-group

-

date-time-picker

类型：month-picker-group

-

类型：month-picker

类型：time-picker-group

-

类型：time-picker

类型：year-picker-group

-

类型：year-picker

<template>
  <pa-title :padding="['bottom']">Display</pa-title>
  <pa-time v-model="value1" type="date-picker-group" display></pa-time>

  <pa-title :padding="['bottom']">基础使用(类型：date-picker-group)</pa-title>
  <pa-time v-model="value1" type="date-picker-group"></pa-time>

  <pa-title :padding="['bottom']">类型：date-picker</pa-title>
  <pa-time v-model="value2" type="date-picker"></pa-time>

  <pa-title :padding="['bottom']">date-time-picker-group</pa-title>
  <pa-time v-model="value3" type="date-time-picker-group"></pa-time>

  <pa-title :padding="['bottom']">date-time-picker</pa-title>
  <pa-time v-model="value4" type="date-time-picker"></pa-time>

  <pa-title :padding="['bottom']">类型：month-picker-group</pa-title>
  <pa-time v-model="value5" type="month-picker-group"></pa-time>

  <pa-title :padding="['bottom']">类型：month-picker</pa-title>
  <pa-time v-model="value6" type="month-picker"></pa-time>

  <pa-title :padding="['bottom']">类型：time-picker-group</pa-title>
  <pa-time v-model="value7" type="time-picker-group"></pa-time>

  <pa-title :padding="['bottom']">类型：time-picker</pa-title>
  <pa-time v-model="value8" type="time-picker"></pa-time>

  <pa-title :padding="['bottom']">类型：year-picker-group</pa-title>
  <pa-time v-model="value9" type="year-picker-group"></pa-time>

  <pa-title :padding="['bottom']">类型：year-picker</pa-title>
  <pa-time v-model="value10" type="year-picker"></pa-time>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const value1 = ref(["2024-04-23 00:00:00", "2024-04-28 00:00:01"]);
const value2 = ref("2024-04-23 00:00:00");
const value3 = ref(["2024-04-23 00:00:00", "2024-04-28 00:00:01"]);
const value4 = ref("2024-04-23 00:00:00");
const value5 = ref(["2025-08", "2025-08"]);
const value6 = ref("2024-04");
const value7 = ref(["2024-04-23 20:00:00", "2024-04-28 00:00:01"]);
const value8 = ref("2024-04-23 20:32:00");
const value9 = ref(["2014", "2024"]);
const value10 = ref("2024");
</script>

<style></style>

显示代码

SaTimeType

字段	描述	类型	默认值
modelValue	表单组件值	Array<string> string	—
type	表单组件类型	date-picker-group date-picker date-time-picker-group date-time-picker month-picker-group month-picker time-picker-group time-picker year-picker-group year-picker	date-picker
placeholder	输入框提示	Record<"en-US" | "zh-CN", string> string	—
disabled	禁用状态	boolean	false
display	纯展示	boolean	false
disabledDateFn	禁用日期函数	(date: any) => boolean	undefined
shortcuts	快捷选择	{ text: string; value: Date[] | (() => Date[]) }	—
contrastData	对比用原数据	Array<string> string	—
alwaysContrast	是否总是显示对不数据	boolean	false

SaTimeEvents

字段	描述	类型
change	当值改变时触发	function