vuetify.js_Vuetify JS的日期范围选择器

vuetify.js

Vuetify日期范围选择器 (Vuetify Date Range Picker)

This component supports the latest version if Vue(2.x) and compatible with Vuetify JS 1.x+ and it looks nice and clean looking too.

如果Vue(2.x)兼容Vuetify JS 1.x +，则此组件支持最新版本，并且看起来也很干净。

The missing date range picker for Vuetify JS you have been looking for.

您一直在寻找的Vuetify JS缺少日期范围选择器。

View demo 查看演示 Download Source 下载源

要求 (Requirements)

You must have...

你必须有...

VuetifyJS Vue.JS date-fns

VuetifyJS Vue.JS date-fns

特征 (Features)

• Preset Selection

  预设选择

• Automatically highlight preset based on chosen date.

  根据所选日期自动突出显示预设。

• Custom format

  自订格式

• Material Design (Obviously!)

  材料设计(很明显！)

• Light & Dark Themes

  光明与黑暗主题

• Custom Prev & Next buttons

  自定义上一个和下一个按钮

安装 (Installation)

npm install vuetify-daterange-picker
OR
yarn add vuetify-daterange-picker

The latest version(2.x) is compatible with Vuetify JS 1.x+. If you use vuetify JS you can use the version 1.2.0 or lower.

最新版本(2.x)与Vuetify JS 1.x +兼容。 如果使用vuetify JS，则可以使用1.2.0或更低版本。

用法 (Usage)

<template>
    <v-daterange :options="dateRangeOptions" @input="onDateRangeChange"></v-daterange>
</template>

<script>
// If you want to register this as a global component then
// in main.js
import VDateRagnge from 'vuetify-daterange-picker';
import 'vuetify-daterange-picker/dist/vuetify-daterange-picker.css';

Vue.use(VDateRange);
</script>

<script>
// If you want to use in one of your components.
import DateRange from 'vuetify-daterange-picker';
import 'vuetify-daterange-picker/dist/vuetify-daterange-picker.css';

export default {
  components: { DateRange.name: DateRange },
  ...
};
</script>

道具 (Props)

options ：对象 (options : Object)

Options is an object that helps set up the component.

选项是有助于设置组件的对象。

• startDate: String. In YYYY-MM-DD format. Prefill value for start date picker.

  startDate ： 字符串 。 格式YYYY-MM-DD 。 开始日期选择器的预填充值。

• endDate: String. In YYYY-MM-DD format. Prefill value for end date picker.

  endDate ： 字符串 。 格式YYYY-MM-DD 。 结束日期选择器的预填充值。

• minDate: String. The earliest date a user can select in YYYY-MM-DD format.

  minDate ： 字符串 。 用户可以选择YYYY-MM-DD格式的最早日期。

• format: String. The format in which you want the user to see the dates in the inputs. E.g. MM/DD/YYYY.

  format ： 字符串 。 希望用户在输入中看到日期的格式。 例如MM/DD/YYYY 。

• presets: Array. An array of preset values like Today, Yesterday etc. It's an array of object that looks like this.

  presets ： 数组 。 一组预设值，例如Today ， Yesterday等。这是一个看起来像这样的对象数组。

presets: [
  {
    label: 'Today',
    range: [
      '2018-01-01', //start date. YYYY-MM-DD
      '2018-02-01', // end date. YYYY-MM-DD
    ],
  },
];

no-presets ：布尔值 (no-presets : Boolean)

If you do not want a presets list you can use this boolean and you'll only see the pickers with input.

如果您不希望使用预设列表，则可以使用此布尔值，并且只会看到带有输入的选择器。

dark ：布尔 (dark : Boolean)

Switches the list of presets and the datepickers into dark mode.

将预设列表和日期选择器切换到暗模式。

next-icon ：字符串 (next-icon : String)

Name of the Material Icon that you want to use as custom icon for next buttons in datepickers.

要用作日期选择器中下一个按钮的自定义图标的“材料”图标的名称。

prev-icon ：字符串 (prev-icon : String)

Name of the Material Icon that you want to use as custom icon for prev buttons in datepickers.

要用作日期选择器中上一个按钮的自定义图标的“材质”图标的名称。

大事记 (Events)

• input: Array. An array with start date and end date, triggered after every date selection.

  input ： 数组 。 在每个日期选择之后触发的带有开始日期和结束日期的数组。

翻译自: https://vuejsexamples.com/date-range-picker-for-vuetify-js/

vuetify.js