---
title: "Vue Range Presets Example | Mobiscroll"
component: "Range"
framework: "Vue"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/vue/range/presets"
---

# Presets - Vue Range demo

Offer one-click preset ranges — Today, Yesterday, This week, Last month — on the Vue date range selector for fast filtering. For Vue and Nuxt.

- [Live demo](https://demo.mobiscroll.com/vue/range/presets)
- [View SFC JS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue/tree/main/src/demos/datepicker/range/presets)
- [View SFC TS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue-ts/tree/main/src/demos/datepicker/range/presets)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/range/presets.md), [jQuery](https://demo.mobiscroll.com/jquery/range/presets.md), [Angular](https://demo.mobiscroll.com/angular/range/presets.md), [React](https://demo.mobiscroll.com/react/range/presets.md)

## Description

The selected range can be adjusted by the user or you can programmatically set the `start` and `end`.

This is especially useful and effective when using the range for filtering and you'd like to offer predefined ranges like *Yesterday*, *Today*, *Last week* and so on. Setting the values can be done from something as simple as a button click.

## What this demo shows

- Demonstrates five preset actions for programmatically updating an inline date range picker.
- **Example panel** Five code examples appear to the left of the calendar, each paired with a button that applies the corresponding preset action.
- **Presets** The examples provide `Today`, `Yesterday`, `This week`, and `Last month` buttons for selecting predefined date ranges, plus a `Clear` button for removing the selection.
- **Button interaction** Hovering over a preset button highlights it. Clicking the button applies its date range or clears the current selection.
- **Inline date range picker** The date range picker is embedded directly in the page without an input by using inline display mode.
- **Header navigation** The month and year label in the upper-left corner opens the month and year picker. The previous and next arrow buttons on the right navigate between months.
- **Month view** A fixed weekday header shows abbreviated day names from Sunday through Saturday, with dates arranged in a grid below.
- **Month navigation** Drag the calendar left or right to move between months.
- **Day cell states** Hovering over a day highlights its number with a gray background. The first selected day becomes the range start, and the second becomes the range end. Selected days are highlighted in blue. The current date is highlighted by default and remains blue when another date is selected.
- **Adjacent months** Dates from the previous and next months use a muted style. Selecting one navigates to its corresponding month.

## Best for

- **Reporting dashboards** Let users filter charts and metrics by familiar periods such as today, this week, or last month.
- **Activity and audit logs** Help users narrow long record lists to common recent date ranges without selecting each boundary manually.
- **Orders and transactions** Provide quick filters for reviewing records from standard daily, weekly, or monthly periods.
- **Repeat filtering workflows** Combine one-click presets with an adjustable date range when users frequently switch between standard and custom periods.

## Tutorial

### Setting today

```vue
<script setup>
const now = new Date()
const myValue = ref(null)

function setToday() {
  myValue.value = [now, now]
}
</script>

<template>
  <MbscButton @click="setToday">Today</MbscButton>
  <MbscDatepicker v-model="myValue" :controls="['calendar']" select="range" />
</template>
```

### Setting yesterday

```vue
<script setup>
const now = new Date()
const myValue = ref(null)

function setToday() {
  myValue.value = [now, now]
}
</script>

<template>
  <MbscButton @click="setToday">Today</MbscButton>
  <MbscDatepicker v-model="myValue" :controls="['calendar']" select="range" />
</template>
```

### Setting this week

```vue
<script setup>
const now = new Date()
const firstday = new Date(now.setDate(now.getDate() - now.getDay()));
const lastday = new Date(now.setDate(now.getDate() - now.getDay() + 6));
const myValue = ref(null)

function setWeek() {
  myValue.value = [firstday, lastday]
}
</script>

<template>
  <MbscButton @click="setWeek">This week</MbscButton>
  <MbscDatepicker v-model="myValue" :controls="['calendar']" select="range" />
</template>
```

### Setting last month

```vue
<script setup>
const now = new Date()
const firstday = new Date(now.getFullYear(), now.getMonth() - 1, 1)
const lastday = new Date(now.getFullYear(), now.getMonth(), 0)
const myValue = ref(null)

function setMonth() {
  myValue.value = [firstday, lastday]
}
</script>

<template>
  <MbscButton @click="setMonth">Last month</MbscButton>
  <MbscDatepicker v-model="myValue" :controls="['calendar']" select="range" />
</template>
```

### Clear the selection with a simple click

```vue
<script setup>
const myValue = ref(null)

function clear() {
  myValue.value = null
}
</script>

<template>
  <MbscButton @click="clear">Clear</MbscButton>
  <MbscDatepicker v-model="myValue" :controls="['calendar']" select="range" />
</template>
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/vue/datepicker/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/vue/datepicker/api#opt-themeVariant) - option
- [`select`](https://mobiscroll.com/docs/vue/datepicker/api#opt-select) - option
- [`display`](https://mobiscroll.com/docs/vue/datepicker/api#opt-display) - option
- [`controls`](https://mobiscroll.com/docs/vue/datepicker/api#opt-controls) - option
- [`showRangeLabels`](https://mobiscroll.com/docs/vue/datepicker/api#opt-showRangeLabels) - option

## Code

### SFC JS

```vue
<script setup>
import {
  MbscButton,
  MbscDatepicker,
  MbscPage,
  setOptions
} from '@mobiscroll/vue'
import { ref } from 'vue'

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})

const now = new Date()
const curr = new Date()
const yesterday = new Date(curr.getFullYear(), curr.getMonth(), curr.getDate() - 1)
const startWeek = new Date(curr.setDate(curr.getDate() - curr.getDay()))
const endWeek = new Date(curr.setDate(curr.getDate() - curr.getDay() + 6))
const startMonth = new Date(curr.getFullYear(), curr.getMonth() - 1, 1)
const endMonth = new Date(curr.getFullYear(), curr.getMonth(), 0)

const rangeValue = ref(null)
const toastMessage = ref('')
const isToastOpen = ref(false)

function handleToastClose() {
  isToastOpen.value = false
}

function setToday() {
  rangeValue.value = [now, now]
  toastMessage.value = 'Today Selected'
  isToastOpen.value = true
}

function setYesterday() {
  rangeValue.value = [yesterday, yesterday]
  toastMessage.value = 'Yesterday Selected'
  isToastOpen.value = true
}

function setThisWeek() {
  rangeValue.value = [startWeek, endWeek]
  toastMessage.value = 'This Week Selected'
  isToastOpen.value = true
}

function setLastMonth() {
  rangeValue.value = [startMonth, endMonth]
  toastMessage.value = 'Last Month Selected'
  isToastOpen.value = true
}

function clear() {
  rangeValue.value = null
  toastMessage.value = 'Clear Value'
  isToastOpen.value = true
}
</script>

<template>
  <MbscPage>
    <div class="md-range-filter">
      <h4 class="md-header">Filter Results by</h4>
      <div class="mbsc-padding">
        <MbscButton className="mbsc-button-block" @click="setToday">Today</MbscButton>
        <MbscButton className="mbsc-button-block" @click="setYesterday">Yesterday</MbscButton>
        <MbscButton className="mbsc-button-block" @click="setThisWeek">This Week</MbscButton>
        <MbscButton className="mbsc-button-block" @click="setLastMonth">Last Month</MbscButton>
        <MbscButton className="mbsc-button-block" @click="clear">Clear</MbscButton>
      </div>
      <div class="mbsc-form-group">
        <div class="mbsc-form-group-title">Or by a custom range</div>
        <MbscDatepicker
          v-model="rangeValue"
          select="range"
          display="inline"
          :controls="['calendar']"
          :showRangeLabels="false"
        />
      </div>
    </div>
    <MbscToast :message="toastMessage" :isOpen="isToastOpen" @close="handleToastClose" />
  </MbscPage>
</template>

<style>
.md-range-filter .md-header {
  text-align: center;
  padding: 1em 0.75em 0 0.75em;
  margin: 0;
}
</style>
```

### SFC TS

```vue
<script setup lang="ts">
import {
  MbscButton,
  MbscDatepicker,
  MbscPage,
  setOptions
} from '@mobiscroll/vue'
import { ref } from 'vue'

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})

const now = new Date()
const curr = new Date()
const yesterday = new Date(curr.getFullYear(), curr.getMonth(), curr.getDate() - 1)
const startWeek = new Date(curr.setDate(curr.getDate() - curr.getDay()))
const endWeek = new Date(curr.setDate(curr.getDate() - curr.getDay() + 6))
const startMonth = new Date(curr.getFullYear(), curr.getMonth() - 1, 1)
const endMonth = new Date(curr.getFullYear(), curr.getMonth(), 0)

const rangeValue = ref<any>(null)
const toastMessage = ref<string>('')
const isToastOpen = ref<boolean>(false)

function handleToastClose() {
  isToastOpen.value = false
}

function setToday() {
  rangeValue.value = [now, now]
  toastMessage.value = 'Today Selected'
  isToastOpen.value = true
}

function setYesterday() {
  rangeValue.value = [yesterday, yesterday]
  toastMessage.value = 'Yesterday Selected'
  isToastOpen.value = true
}

function setThisWeek() {
  rangeValue.value = [startWeek, endWeek]
  toastMessage.value = 'This Week Selected'
  isToastOpen.value = true
}

function setLastMonth() {
  rangeValue.value = [startMonth, endMonth]
  toastMessage.value = 'Last Month Selected'
  isToastOpen.value = true
}

function clear() {
  rangeValue.value = null
  toastMessage.value = 'Clear Value'
  isToastOpen.value = true
}
</script>

<template>
  <MbscPage>
    <div class="md-range-filter">
      <h4 class="md-header">Filter Results by</h4>
      <div class="mbsc-padding">
        <MbscButton className="mbsc-button-block" @click="setToday">Today</MbscButton>
        <MbscButton className="mbsc-button-block" @click="setYesterday">Yesterday</MbscButton>
        <MbscButton className="mbsc-button-block" @click="setThisWeek">This Week</MbscButton>
        <MbscButton className="mbsc-button-block" @click="setLastMonth">Last Month</MbscButton>
        <MbscButton className="mbsc-button-block" @click="clear">Clear</MbscButton>
      </div>
      <div class="mbsc-form-group">
        <div class="mbsc-form-group-title">Or by a custom range</div>
        <MbscDatepicker
          v-model="rangeValue"
          select="range"
          display="inline"
          :controls="['calendar']"
          :showRangeLabels="false"
        />
      </div>
    </div>
    <MbscToast :message="toastMessage" :isOpen="isToastOpen" @close="handleToastClose" />
  </MbscPage>
</template>

<style>
.md-range-filter .md-header {
  text-align: center;
  padding: 1em 0.75em 0 0.75em;
  margin: 0;
}
</style>
```

## Implementation notes

- With `select: 'range'`, the picker's value is a `[start, end]` pair of `Date` objects (or `null` to clear it).
- A preset button computes the `[start, end]` pair for the target period and applies it to the picker: `[now, now]` for today, `[yesterday, yesterday]` for yesterday, `[firstDayOfWeek, lastDayOfWeek]` for this week (derived from `now.getDate() - now.getDay()`), and `[firstDayOfLastMonth, lastDayOfLastMonth]` for last month (`new Date(y, m - 1, 1)` to `new Date(y, m, 0)`).
- Clearing the selection is done by applying `null` as the value in place of a `[start, end]` pair.
- Framework-specific ways to apply a preset: JS/jQuery call `.setVal([start, end])` (or `.setVal(null)` to clear) on the stored picker instance; React updates the controlled `value` state passed to the `value` prop; Angular updates the bound `range` property (two-way `[(ngModel)]` or a plain property re-render); Vue updates the `v-model`-bound ref.
- The picker itself needs no special option beyond `controls: ['calendar']` and `select: 'range'` - presets only change the bound/set value, not the picker configuration.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-vue.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config vue
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config vue --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/vue/getting-started/installation

## Related demos

- Next: [Date Formats](https://demo.mobiscroll.com/vue/range/date-object-ISO-8601-moment.md) - Use the Vue date range picker with JS Date, ISO 8601, or Moment.js — auto-detect input formats and configure the return formats.