# material-vue-daterange-picker

**Repository Path**: luban-creative/material-vue-daterange-picker

## Basic Information

- **Project Name**: material-vue-daterange-picker
- **Description**: 支持 Material Design 的日期选择器
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 7
- **Forks**: 4
- **Created**: 2019-10-09
- **Last Updated**: 2021-08-05

## Categories & Tags

**Categories**: vue-extensions

**Tags**: None

## README

[Document](https://ly525.github.io/material-vue-daterange-picker/) | [中文文档](https://ly525.github.io/material-vue-daterange-picker/zh/)
> If the document is not accessible, please open an [issue](https://github.com/ly525/material-vue-daterange-picker/issues), I will fix it right away.

<h1 align="center">
v-md-date-range-picker
</h1>

<p align="center">
  <a href="https://material.io/">Material Design</a>
  DateRangePicker for <a href="https://vuejs.org/">Vuejs 2.0</a>
</p>


<p align="center">
<br>
<a href="https://www.npmjs.com/package/v-md-date-range-picker"><img alt="NPM Package Version" src="https://img.shields.io/npm/v/v-md-date-range-picker.svg"></a>
<a href="https://travis-ci.org/ly525/v-md-date-range-picker"><img src="https://travis-ci.org/ly525/material-vue-daterange-picker.svg?branch=master" alt="Build Status" title="Build Status"></a>
<a href="https://www.npmjs.com/package/v-md-date-range-picker"><img alt="NPM Download Count" src="https://img.shields.io/npm/dt/v-md-date-range-picker.svg"></a>
<a href="https://codecov.io/gh/ly525/v-md-date-range-picker">
  <img src="https://codecov.io/gh/ly525/v-md-date-range-picker/branch/master/graph/badge.svg" />
</a>
</p>

### Pictures for [Examples](https://ly525.github.io/material-vue-daterange-picker/)
<img width="500" alt="WX20190522-193329@2x" src="https://user-images.githubusercontent.com/12668546/58172293-c3b27000-7cca-11e9-948b-729602e556da.png">
<img width="500" alt="WX20190522-193351@2x" src="https://user-images.githubusercontent.com/12668546/58172296-c6ad6080-7cca-11e9-9bae-d4236d662fb9.png">



## Getting Started

### Installation
```console
npm install v-md-date-range-picker --save

# or use yarn
yarn add v-md-date-range-picker
```

### Quick Start
> you can use vue-cli to create project
```bash
1. npm install -g @vue/cli # or yarn global add @vue/cli
2. vue create hello-world
```


```html
 <!-- App.js -->
<template>
  <v-md-date-range-picker></v-md-date-range-picker>
</template>
```

```js
// main.js
<script>
import Vue from 'vue';
import VMdDateRangePicker from "v-md-date-range-picker";

Vue.use(VMdDateRangePicker);
</script>
```

## Build
> Powed by following:
- https://github.com/egoist/bili