使用Bootstrap 4样式进行日期范围选择的Vue组件

日期范围选择器 (vue-date-range-picker)

A vue component using Bootstrap 4 styles for date range selection.

使用Bootstrap 4样式进行日期范围选择的Vue组件。

特征 (Features)

• Date range selection

  日期范围选择

• Compare feature: select a second date range

  比较功能：选择第二个日期范围

• No integration: DIY with your favorite vue components or js libraries

  无需集成：使用自己喜欢的vue组件或js库进行DIY

• Bootstrap 4 styles (requires Bootstrap 4 CSS)

  Bootstrap 4样式(需要Bootstrap 4 CSS)

• Returns Moment.js instances (requires moment.js)

  返回Moment.js实例(需要moment.js)

安装 (Installation)

npm install --save @owumaro/vue-date-range-picker

用法 (Usage)

Webpack (Webpack)

JavaScript (JavaScript)

// Import the component
import DateRangePicker from '@owumaro/vue-date-range-picker'

export default {
  // Register the component
  components: { DateRangePicker },
  
  // Create a method for the submit event
  methods: {
    updateRanges: function(range) {
      ...
    }
  },
  ...
}

HTML模板 (HTML template)

<date-range-picker v-on:submit="updateRanges" />

浏览器 (Browser)

TODO

去做

API (API)

大事记 (Events)

As the component needs to transmit multiple values (startDate, endDate, compare, startDateCompare, endDateCompare), it can not use v-model.

由于组件需要传输多个值( startDate ， endDate ， compare ， startDateCompare ， endDateCompare )，因此不能使用v-model 。

Instead, it triggers 2 events:

而是触发2个事件：

• submit: when the submit button is clicked; provides an Object argument with the 5 attributes mentioned above

  submit ：单击提交按钮时； 提供具有上述5个属性的Object参数

• cancel: when the cancel button is clicked

  cancel ：单击取消按钮时

道具 (Props)

Prop	Type	Default	Description
calendar-count	Number	2	Number of calendars to display
allow-compare	Boolean	true	Enable/disable the comparison feature
ranges	Object	{ currentMonth: { ... }, lastMonth: { ... } }	Predefined ranges displayed in select menu(s)
default-range-select	String	currentMonth	Key of the range to select by default
default-range-select-compare	String	lastMonth	Key of the range to select by default (compare)

Struts	类型	默认	描述
calendar-count	Number	2	要显示的日历数
allow-compare	Boolean	true	启用/禁用比较功能
ranges	Object	{ currentMonth: { ... }, lastMonth: { ... } }	选择菜单中显示的预定义范围
default-range-select	String	currentMonth	默认选择范围的键
default-range-select-compare	String	lastMonth	默认选择范围的键(比较)

发展历程 (Development)

npm install
npm run dev

灵感 (Inspiration)

• Google Analytics date range picker

  Google Analytics日期范围选择器

• https://github.com/dangrossman/daterangepicker

  https://github.com/dangrossman/daterangepicker

去做 (TODO)

• Browser usage documentation

  浏览器使用说明文件

• Tests

  测验

• Hosted demo page

  托管的演示页面

• Popover demo

  弹出式演示

翻译自: https://vuejsexamples.com/a-vue-component-using-bootstrap-4-styles-for-date-range-selection/