基于bootstrap-daterangepicker的Vue2日期范围选择器

vue2-daterange-picker (vue2-daterange-picker)

Vue2 date range picker based on bootstrap-daterangepicker (no jQuery dependency).

基于bootstrap-daterangepicker(无jQuery依赖)的Vue2日期范围选择器。

View demo 查看演示 Download Source 下载源

安装 (Installlation)

# install via npm
npm i vue2-daterange-picker --save

用法 (Usage)

import DateRangePicker from 'vue2-daterange-picker'

export default {
    components: { DateRangePicker },
    data() {
        return {
            startDate: '2017-09-05',
            endDate: '2017-09-15',
            locale: {
                direction: 'ltr', //direction of text
                format: 'DD-MM-YYYY', //fomart of the dates displayed
                separator: ' - ', //separator between the two ranges
                applyLabel: 'Apply',
                cancelLabel: 'Cancel',
                weekLabel: 'W',
                customRangeLabel: 'Custom Range',
                daysOfWeek: moment.weekdaysMin(), //array of days - see moment documenations for details
                monthNames: moment.monthsShort(), //array of month names - see moment documenations for details
                firstDay: 1 //ISO first day of week - see moment documenations for details
            }
        }
    }
}

<template>
    <date-range-picker 
        :startDate="startDate" 
        :endDate="endDate" 
        @update="console.log(value)"
        :locale-data="locale"
    >
    <!--Optional scope for the input displaying the dates -->
    <div slot="input" slot-scope="picker">...</div>
</date-range-picker>
</template>

插槽 (Slots)

---

---

Slot "input" is used to display the currently selected date range. You can use it to format the date as you like. If you add clickable elements you need to stop the event from propagating to the parent if you dont want to open the picker e.g. with @click.stop.

广告位“输入”用于显示当前选择的日期范围。 您可以使用它来设置日期格式。 如果您添加可点击的元素，并且您不想打开选择器(例如使用@ click.stop)，则需要阻止事件传播到父对象。

Props:

道具：

• startDate - the start date currently selected

  startDate-当前选择的开始日期

• endDate - the end date currently selected

  endDate-当前选择的结束日期

• minDate - the minimum date that can be selected

  minDate-可以选择的最小日期

• maxDate - the maximum date that can be selected

  maxDate-可以选择的最大日期

• ranges - the ranges object

  range-range对象

See the demo source or the code snippet above for example.

例如，请参见演示源或上面的代码片段。

物产 (Properties)

---

---

You can define format and display options via the localeData prop. This is the default locale object :

您可以通过localeData属性定义格式和显示选项。 这是默认的语言环境对象：

let default_locale = {
        direction: 'ltr', //direction of text
        format: moment.localeData().longDateFormat('L'), //fomart of the dates displayed
        separator: ' - ', //separator between the two ranges
        applyLabel: 'Apply',
        cancelLabel: 'Cancel',
        weekLabel: 'W',
        customRangeLabel: 'Custom Range',
        daysOfWeek: moment.weekdaysMin(), //array of days - see moment documenations for details
        monthNames: moment.monthsShort(), //array of month names - see moment documenations for details
        firstDay: moment.localeData().firstDayOfWeek() //ISO first day of week - see moment documenations for details
      }

去做 (TODO)

• [ ] documentation

  []文档

• [ ] tests

  []个测试

• [x] disabled dates

  [x]个停用日期

• [ ] export single components

  []导出单个组件

运行本地演示 (Run local demo)

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

有关工作原理的详细说明，请查看vue-loader的指南和文档 。

发布 (Publish)

Bump the version the publish the package

突出版本发布包

npm version patch/minor/major
npm publish

翻译自: https://vuejsexamples.com/vue2-date-range-picker-based-on-bootstrap-daterangepicker/