vue日期范围选择器_Vue.js日期范围选择器，具有多个范围和预设

vue日期范围选择器

vue-mj-daterangepicker (vue-mj-daterangepicker)

Vue.js date range picker with multiples ranges and presets (vue 2.x) .

Vue.js日期范围选择器，具有多个范围和预设(vue 2.x)。

View demo 查看演示 Download Source 下载源

安装 (Installation)

You need Vue.js version 2.0+.

您需要Vue.js 2.0+版本 。

1通过npm安装 (1 Install via npm)

npm install vue-mj-daterangepicker
yarn add vue-mj-daterangepicker

2导入和使用 (2 Import and use)

import Vue from 'vue'
import DateRangePicker from 'vue-mj-daterangepicker'
import 'vue-mj-datepicker/dist/vue-mj-datepicker.css'

...

Vue.use(DateRangePicker)

道具 (Props)

Name	Type	Default	Description
locale	String	en	set the locale ['en', 'fr]
from	String	null	ISO-8601 date of start range
to	String	null	ISO-8601 date of end range
begin	String	null	ISO-8601 date to display since beginning range
past	Boolean	true	allow/disallow user to select past dates
future	Boolean	true	allow/disallow user to select future dates
panel	String	null	choose which panel to be open by default
panels	Array	[ 'range', 'week', 'month', 'quarter', 'year' ]	choose which panels to be available
yearsCount	Number	2	number of past/future years to display in year panel
theme	Object	see customize section	customize colors
width	String	'auto'	set component width
resetTitle	String	'Reset'	change Reset button title
submitTitle	String	'Submit'	change Submit button title
presets	Object	see preset section	select which presets to be available

名称	类型	默认	描述
locale	串	恩	设置语言环境['en'，'fr]
from	串	空值	ISO-8601开始日期的范围
to	串	空值	ISO-8601终止日期
begin	串	空值	since beginning范围since beginning要显示的ISO-8601日期
past	布尔型	真正	允许/禁止用户选择过去的日期
future	布尔型	真正	允许/禁止用户选择将来的日期
panel	串	空值	选择默认情况下要打开的面板
panels	数组	['范围'，'星期'，'月'，'季度'，'年']	选择可用的面板
yearsCount	数	2	在year面板中显示的过去/未来年数
theme	目的	请参阅自定义部分	自定义颜色
width	串	'汽车'	设定元件宽度
resetTitle	串	'重启'	更改重置按钮标题
submitTitle	串	'提交'	更改提交按钮标题
presets	目的	见预设部分	选择可用的预设

定制 (Customize)

theme = {
  primary: '#3297DB',
  secondary: '#2D3E50',
  ternary: '#93A0BD',
  border: '#e6e6e6',
  light: '#ffffff',
  dark: '#000000',
  hovers: {
    day: '#CCC',
    range: '#e6e6e6'
  }
}

预设值 (Presets)

available presets : ['custom', 'today', 'yesterday', 'tomorrow', 'last7days', 'next7days', 'last30days', 'next30days', 'last90days', 'next90days', 'last365days', 'next365days', 'forever']

warning: forever need begin props to be set.

警告： forever需要begin设置道具。

大事记 (Events)

This datepicker emit two events, @reset and @update both return an object with the start and end date, plus the active panel

这个日期选择器发出两个事件，@reset和@update都返回一个带有开始和结束日期的对象，以及活动面板

{
  to: '2019-04-23T10:26:00.996Z',
  from: '2018-04-23T10:26:00.996Z'
  panel: 'range'
}

例子 (Examples)

<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>

翻译自: https://vuejsexamples.com/vue-js-date-range-picker-with-multiples-ranges-and-presets/

vue日期范围选择器