vue3 组件-开始结束日期选择器

该组件依赖element-plus。

基础用法

点击查看代码

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

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"
import { KSelectDate } from "@tomiaa/vue3-components"

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 | number		true
endDate/v-model:endDate	结束日期	Date | string | number		true
startDatePlaceholder	开始日期占位符	string	请选择开始日期	false
endDatePlaceholder	结束日期占位符	string	请选择结束日期	false
enTimeDisabled	未选择开始日期时是否禁用结束日期	boolean		false
valueFormat	绑定时间格式	string	YYYY-MM-DD	false
format	界面显示时间格式	string	date 对象	false
type	显示类型（el-date-picker 的 type）	"year" | "month" | "date" | "dates" | "datetime" | "week" | "datetimerange" | "daterange" | "monthrange"	date	false

类型声明

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

// SelectDateProps["属性名"]
// const prop: SelectDateProps["属性名"] = xxx