文章统计:236字,预计阅读:小于一分钟。

vue3 组件-开始结束时间选择器

该组件依赖element-plus

基础用法

<template>
  <KSelectDate
    v-model:startDate="startDate"
    v-model:endDate="endDate"
  />
</template>
<script setup lang="ts">
import { ref } from "vue"

const startDate = ref("")
const endDate = ref("")
</script>

日期格式

<template>
  <KSelectDate
    v-model:startDate="startDate"
    v-model:endDate="endDate"
    start-date-placeholder="开始时间"
    end-date-placeholder="结束时间"
    en-time-disabled
    value-format="YYYY-MM-DD HH:mm:ss"
    format="YYYY/MM/DD HH:mm:ss"
    type="datetime"
    :start-date-attrs="{
      clearable: true,
      size: 'large ',
    }"
  />
</template>
<script setup lang="ts">
import { ref } from "vue"

const startDate = ref("")
const endDate = ref("")
</script>

按需引入

<script setup lang="ts">
import { KSelectDate } from "@tomiaa/vue3-components"
</script>

属性

属性说明类型默认值必填
startDate/v-model:startDate省下拉框属性,el-select 的属性Date | string | numbertrue
endDate/v-model:endDate结束日期Date | string | numbertrue
startDatePlaceholder开始日期占位符string请选择开始日期false
endDatePlaceholder结束日期占位符string请选择结束日期false
enTimeDisabled未选择开始日期时是否禁用结束日期booleanfalse
valueFormat绑定时间格式stringYYYY-MM-DDfalse
format界面显示时间格式stringdate 对象false
type显示类型(el-date-picker 的 type)"year" | "month" | "date" | "dates" | "datetime" | "week" | "datetimerange" | "daterange" | "monthrange"datefalse

类型声明

import type {
  SelectDateProps, // 属性声明
} from "@tomiaa/vue3-components"

// SelectDateProps["属性名"]
// const prop: SelectDateProps["属性名"] = xxx
最后更新时间:
贡献者: tomiaa