@ac-codeprod/vuetify2-daterange-picker 中文文档教程

Question

Vuetify2 daterange picker

我需要更好地自定义 Vuetify daterange picker 并将其与 Vuetify 2.x 版一起使用

Table of Contents

• Requirements
• Installation & Usage
• Props, Events & Slots

Requirements

您必须拥有 Vuetify 2。 X。 如果您在此页面上，您可能已经拥有它们。 但是，如果您还没有安装它们，您可以这样做。

yarn add vuetify

您还需要 date-fns 才能使组件正常工作。 日期操作、格式化和所有与日期相关的事情都需要它。 它很棒，因为它支持代码拆分和 tree shaking，并为组件增加了最少的负担。

yarn add date-fns

当您安装 @ac-codeprod/vuetify2-daterange-picker 时，对等依赖项警告应该会为您指出这一点。

Installation & Usage

Installation

yarn add @ac-codeprod/vuetify2-daterange-picker

Usage

// If you wanna use it in components, please import necessary files as shown above
<template>
  <v-daterange v-model="range"></v-daterange>
</template>
<script>
import { VDaterange } from '@ac-codeprod/vuetify2-daterange-picker'
import '@ac-codeprod/vuetify2-daterange-picker/dist/vuetify2-daterange-picker.css'
export default {
  components: { VDaterange },
  data() {
    return {
      range: {}
    }
  }
}
</script>

Props, Events & Slots

Props

value

说明：选择器的起始值和结束值。

默认值：如果 prop 未定义，则以 yyyy-MM-dd 格式将开始和结束值设置为今天的对象。 但是，如果传递的是空对象，则起始值和结束值将为空字符串。 如果传递的对象包含 yyyy-MM-dd 格式的开始值和结束值，则选择器将初始化为该范围。

---

disabled

说明：如果为 true ，则禁用打开日期选择器菜单的输入。

默认值：false

---

dark

说明：将深色主题变体应用于组件。

默认值：false

---

start-label

说明：未选择范围时显示在开始日期输入占位符中的文本。

默认值：'Start Date'

---

end-label

描述：显示在输入占位符中的结束文本未选择范围时的日期。

默认：'End Date'

---

preset-label

描述：显示为列表标题的文本的预设。

默认值：'Presets'

---

presets

描述：以下形式的预设对象列表。

默认值：一个空数组。

---

no-presets

描述：关闭预设的显示。

默认值：false

---

separator-label

说明：在开始日期和结束日期之间的输入占位符中显示的文本。

默认值：'To'

---

min

说明：可选择的最小日期，格式为 yyyy-MM-dd。 与 Vuetify 的日期选择器 的 min 道具相同。

默认值：未定义

---

max

说明：yyyy-MM-dd 格式的最大可选日期。 与 Vuetify 的日期选择器 的 max 属性相同。

默认值：未定义

---

locale

描述：设置语言环境。 接受带有 BCP 47 语言标记的字符串。 与 Vuetify 的日期选择器 的语言环境属性相同。

默认值：'en-us'

---

first-day-of-week

说明：设置一周的第一天，从 0 开始表示星期日.

默认：0

---

no-title

描述：与 Vuetify 的日期选择器。

默认值：false

---

display-format

描述：所选范围在输入中的显示格式。

默认：yyyy-MM-dd

---

highlight-color

描述：Vuetify 颜色类 您要应用于范围内突出显示的日期。 您甚至可以根据需要提供自己的课程和风格亮点。

默认值：''

---

show-reset

说明：在取消旁边的日期范围对话框操作中显示重置按钮。 单击它会重置选择器，并为开始和结束发出空值。

默认：真

If you don't want to show a reset button and still wanna reset the picker programmatically, you can get a ref to the component and call the reset() method.

---

next-icon

描述：与 Vuetify 的日期的 next-icon 属性相同选择器。

默认值：'$vuetify.icons.next'

---

prev-icon

描述：与 Vuetify 的日期选择器。

默认值：'$vuetify.icons.prev'

---

input-props

描述：包含所有 Vuetify 的文本字段 支持。 这有助于您根据需要自定义输入，包括更改字段样式，例如 outline 或 solo 等。

默认值：{}

注意：某些属性，例如 readonly、placeholder、disabled 和 value 不能使用此中的值覆盖支柱。

---

menu-props

描述：包含Vuetify 菜单的所有道具的对象 支持。 这有助于您根据需要自定义菜单。

默认值：{}

注意：某些属性（例如 close-on-content-click 和 offset-y）无法使用此属性中的值覆盖。

Events

input

Description：每次应用新范围时发出。

事件数据：包含所选开始和结束日期的对象，格式为 yyyy-MM-dd。 示例：

{
  start: '2018-12-04',
  end: '2019-02-20',
  key: 'customize'
}

---

menu-closed

描述：当日期选择器菜单关闭时。

事件数据：undefined

Slots

---

title

Description：传递到这个插槽的内容成为卡的激活器，其中日期选择器打开。 如果存在，则提供的内容会在组件内呈现。

---

激活器

描述：传递到此位置的内容成为打开 Vuetify2 日期范围选择器的激活器。 如果存在，所提供的内容将呈现在组件中。 替换默认激活器。