> For the complete documentation index, see [llms.txt](https://vuetify-daterange-picker.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://vuetify-daterange-picker.gitbook.io/docs/installation-and-usage.md).

# Installation & Usage

## Requirements

You need to have `stylus` and `stylus-loader` as dev dependencies. You probably already have them if you added Vuetify through their plugin. However, if you don't have them installed, you can do so by doing

```bash
yarn add -D stylus stylus-loader
```

You also need to have `date-fns` for the component to work. It is required for date manipulation, formatting and all things related to dates. It is great because it supports code splitting and tree shaking and adds minimal baggage to the component.

```bash
yarn add date-fns
```

When you install vuetify-daterange-picker, the peer dependencies warning should point that out for you.

## Installation

Version 3.x.x is the latest and is compatible with @vue/cli 3 and latest Vuetify.

```bash
yarn add vuetify-daterange-picker@3
# OR
npm install --save vuetify-daterange-picker@3
```

### Install as a Plugin

This lets you use the component everywhere in your app.

```javascript
// main.js
import VuetifyDaterangePicker from "vuetify-daterange-picker";
import "vuetify-daterange-picker/dist/vuetify-daterange-picker.css";
Vue.use(VuetifyDaterangePicker);
```

### Import in Components

```markup
<script>
import { VDaterange } from "vuetify-daterange-picker"
import "vuetify-daterange-picker/dist/vuetify-daterange-picker.css";
export default {
  components: { VDaterange },
}
</script>
```

## Usage

```markup
<!-- Assuming you have installed as plugin -->
<!-- If you wanna use it in components, 
     please import necessary files as shown above -->
<template>
  <v-daterange v-model="range"></v-daterange>
</template>
<script>
export default {
  components: { VDaterange },
  data() {
    return {
      range: {}
    }
  }
}
</script>
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://vuetify-daterange-picker.gitbook.io/docs/installation-and-usage.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.