# API

## Props

### **`value`** 

**Description**: The start and end values of the picker.

**Default**: An object having `start` and `end` values set to today in `YYYY-MM-DD` format if the prop is undefined. If an empty object is passed however, the `start` and `end` values will be empty strings. If the passed object contains `start` and `end` values in `YYYY-MM-DD` format, the picker is initialised to that range.

### **`disabled`**

**Description**: if `true` , disables the input that opens date picker menu.

**Default**: `false`

### **`start-label`**

**Description:** The text that shows up in the input placeholder for start date when no range is selected.

**Default**: `'Start Date'`

### **`end-label`**

**Description:** The text that shows up in the input placeholder for end date when no range is selected.

**Default**: `'End Date'`

### **`preset-label`**

**Description:** The text that shows up as the heading of the list of presets.

**Default**: `'Presets'`

### **`presets`**

**Description:** A list of preset objects of the following form.

```javascript
{
  label: 'Last 30 Days',
  range: [
    '2019-03-20', // start date
    '2019-03-20'  // end date
  ]
}
```

**Default:** An empty array.

### **`separator-label`**

**Description:** The text that shows up in the input placeholder in-between start and end dates.

**Default**: `'To'`

### `min`

**Description**: The min selectable date in `YYYY-MM-DD` format. Same as the `min` prop for [Vuetify's Date Picker](https://vuetifyjs.com/en/components/date-pickers).

**Default**: `undefined` 

### `max`

**Description**: The max selectable date in `YYYY-MM-DD` format. Same as the `max` prop for [Vuetify's Date Picker](https://vuetifyjs.com/en/components/date-pickers).

**Default**: `undefined` 

### `locale`

**Description**: Sets the locale. Accepts a string with a BCP 47 language tag. Same as the `locale` prop for [Vuetify's Date Picker](https://vuetifyjs.com/en/components/date-pickers).

**Default**: `'en-us'` 

### `no-title`

**Description**: Same as the `no-title` prop for [Vuetify's Date Picker](https://vuetifyjs.com/en/components/date-pickers).

**Default**: `false`

### `display-format`

**Description**: The format in which the selected ranges should show up in the input.

**Default**: `YYYY-MM-DD`

### `highlight-color`

**Description:** [Vuetify color classes](https://vuetifyjs.com/en/framework/colors#material-colors) you want to apply to the highlighted dates in range. You can even supply your own class and style the highlight as you wish.

**Default:** `'blue lighten-5'`

### `show-reset`

**Description:** Shows a reset button in the date range dialog actions beside Cancel. This clicking on it resets the picker as well as it emits empty values for start and end.

**Default**: true

> If you don't want to show a reset button and still wanna reset the picker programmatically, you can get a ref to the component and call the \`reset()\` method.

### `next-icon`

**Description**: Same as `next-icon`  prop for [Vuetify's Date Picker](https://vuetifyjs.com/en/components/date-pickers).

**Default**: `'$vuetify.icons.next'`

### `prev-icon`

**Description**: Same as `prev-icon`  prop for [Vuetify's Date Picker](https://vuetifyjs.com/en/components/date-pickers).

**Default**: `'$vuetify.icons.prev'`

### **`input-props`**

**Description**: An object containing all the props that [Vuetify's Text Field](https://vuetifyjs.com/en/components/text-fields#api) supports. This helps you customise the input as you wish including changing field styles such as `outline` or `solo` etc.

{% hint style="info" %}
Note: Some props like `readonly` , `placeholder`, `disabled` and `value` cannot be overridden using values in this prop. 
{% endhint %}

**Default**: `{}`

### **`menu-props`**

**Description**: An object containing all the props that [Vuetify's Menu](https://vuetifyjs.com/en/components/menus#api) supports. This helps you customise the menu as you wish.

{% hint style="info" %}
Note: Some props like `close-on-content-click` , `offset-y` cannot be overridden using values in this prop. 
{% endhint %}

## Events

### `input`

**Description**: Emitted every time a new range is applied. 

**Event Data:** An object containing the selected start and end dates in `YYYY-MM-DD` format. Example:

```javascript
{
  start: '2018-12-04',
  end: '2019-02-20'
}
```

### `menu-closed`

**Description:** When the date picker menu is closed.

**Event Data**: `undefined`

## Slots

### `title`

**Description**: Content passed to this slot becomes the header of the card in which the date picker opens. If it is present, the provided content is rendered inside `<v-card-title></v-card-title>` component.


---

# Agent Instructions: 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/api.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.