v-md-date-range-picker(alpha)

Guide

Introduction

In the following sections you will learn how to use the components directly with a CDN (Content Delivery Network) or to bundle them with a bundler e.g. webpack to build more complex projects.

Each approach depends on what you are targeting. When you just want to test the component in your existing library I recommend you to use the CDN way. When you want to integrate the component into a vue cli project then it would be the best to be familiar with a bundler of your choice and taking the compiling way.

CDN Usage

Integrating a component e.g. Button is quite easy:

<html>
  <body>
    <div id="app">
      <v-md-date-range-picker></v-md-date-range-picker>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/moment"></script>
    <script src="https://unpkg.com/v-md-date-range-picker/dist/v-md-date-range-picker.min.js">
    <script>
      const app = new Vue({
        el: '#app'
      })
    </script>
  </body>
 </html>

Bundler Usage

I assume that you have a working bundler setup e.g. generated by the vue-cli thats capable of loading SASS stylesheets and Vue.js SFC (Single File Components).

Installation

npm install --save v-md-date-range-picker

# or with yarn
yarn add v-md-date-range-picker

Global Usage

<template>
  <v-md-date-range-picker></v-md-date-range-picker>
</template>

<script>
import Vue from 'vue';
import VMdDateRangePicker from "v-md-date-range-picker";
import "v-md-date-range-picker/dist/v-md-date-range-picker.css";

Vue.use(VMdDateRangePicker);
</script>

← Examples →