适用于Vue.js 2的MJ日期范围选择器 – vue-mj-daterangepicker
Vue.js日期范围选择器，具有多个范围和预设（vue 2.x）。
安装和下载：
# Yarn
$ yarn add vue-mj-daterangepicker
# NPM
$ npm install vue-mj-daterangepicker --save使用：
import Vue from 'vue'
import DateRangePicker from 'vue-mj-daterangepicker'
import 'vue-mj-daterangepicker/dist/vue-mj-daterangepicker.css'
...
Vue.use(DateRangePicker)Props：
| 名称 | 类型 | 默认 | 描述 |
|---|---|---|---|
locale |
String | en | 设置语言环境[‘de’，’es’，en’，’fr’，’ru’] |
from |
String | null | ISO-8601开始日期的范围 |
to |
String | null | ISO-8601终止日期 |
begin |
String | null | ISO-8601的日期显示 since beginning 范围 |
allowFrom |
String | null | ISO-8601日期，以禁止选择所有之前的日期（严格） |
allowTo |
String | null | ISO-8601日期，以禁止选择（严格）之后的所有日期 |
past |
Boolean | true | 允许/禁止用户选择过去的日期 |
future |
Boolean | true | 允许/禁止用户选择将来的日期 |
panel |
String | null | 选择默认打开的面板 |
panels |
Array | [ ‘range’, ‘week’, ‘month’, ‘quarter’, ‘year’ ] | 选择可用的面板 |
yearsCount |
Number | 2 | 要在 year 面板中显示的过去/未来年数 |
showControls |
Boolean | true | 显示底部控件 |
theme |
Object | see customize section | 自定义颜色 |
width |
String | ‘auto’ | 设定元件宽度 |
resetTitle |
String | ‘Reset’ | 更改重置按钮标题 |
submitTitle |
String | ‘Submit’ | 更改提交按钮标题 |
presets |
Object | see preset section | 选择可用的预设 |
rangeDisplayed |
String | ‘to’ | 选择显示日历时可见的范围 |
自定义：
theme = {
primary: '#3297DB',
secondary: '#2D3E50',
ternary: '#93A0BD',
border: '#e6e6e6',
light: '#ffffff',
dark: '#000000',
hovers: {
day: '#CCC',
range: '#e6e6e6'
}
}预设值：
available presets : ['custom', 'today', 'yesterday', 'tomorrow', 'last7days', 'next7days', 'last30days', 'next30days', 'last90days', 'next90days', 'last365days', 'next365days', 'forever']警告：beginprops需要设置forever。
事件
此日期选择器发出三个事件，@update，@select和@reset
单击提交按钮时，将触发@update。@select在选择范围时触发，如果您不想显示底部控件（showControls = false），则很有用。@reset在单击重置按钮时触发
全部返回带有开始和结束日期的对象，以及活动面板
{
to: '2019-04-23T10:26:00.996Z',
from: '2018-04-23T10:26:00.996Z'
panel: 'range'
}例子
<template>
<date-range-picker :from="$route.query.from" :to="$route.query.to" :panel="$route.query.panel" @update="update"/>
</template>
<script>
export default {
methods: {
update(values) {
this.$router.push({ query: Object.assign({}, this.$route.query, {
to: values.to,
from: values.from,
panel: values.panel
}) })
}
}
}
</script>
