适用于Vue.js 2的MJ日期范围选择器 - vue-mj-daterangepicker

适用于Vue.js 2的MJ日期范围选择器 - vue-mj-daterangepicker
插件名称 vue-mj-daterangepicker
发布时间 2020年5月23日
插件作者 damienroche

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>