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)兼容V...
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缺少日期范围选择器。
要求 (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. InYYYY-MM-DD
format. Prefill value for start date picker.startDate
: 字符串 。 格式YYYY-MM-DD
。 开始日期选择器的预填充值。endDate
: String. InYYYY-MM-DD
format. Prefill value for end date picker.endDate
: 字符串 。 格式YYYY-MM-DD
。 结束日期选择器的预填充值。minDate
: String. The earliest date a user can select inYYYY-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 likeToday
,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
更多推荐
所有评论(0)