# 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.