---
title: "Javascript Range Presets Example | Mobiscroll"
component: "Range"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/range/presets"
---

# Presets - JavaScript Range demo

Add predefined date range presets — Today, Yesterday, This week, Last month — to a Javascript date range picker for one-click filtering. Plain JS api for usage everywhere.

- [Live demo](https://demo.mobiscroll.com/javascript/range/presets)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/datepicker/range/presets)
- This demo in other frameworks: [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), [Vue](https://demo.mobiscroll.com/vue/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

```html
<button id="today">Today</button>
<div id="picker"></div>
```

```js
var now = new Date(),
    myRange = $('#picker').mobiscroll().datepicker({
        controls: ['calendar'],
        select: 'range'
    });

document.querySelector('#today')
    .addEventListener('click', function () {
        myRange.setVal([now, now]);
    });
```

### Setting yesterday

```html
<button id="yesterday">Yesterday</button>
<div id="picker"></div>
```

```js
var now = new Date(),
    yesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1),
    myRange = $('#picker').mobiscroll().datepicker({
        controls: ['calendar'],
        select: 'range'
    });

document.querySelector('#yesterday')
    .addEventListener('click', function () {
        myRange.setVal([yesterday, yesterday]);
    });
```

### Setting this week

```html
<button id="this-week">This week</button>
<div id="picker"></div>
```

```js
var now = new Date(),
    firstday = new Date(now.setDate(now.getDate() - now.getDay())),
    lastday = new Date(now.setDate(now.getDate() - now.getDay() + 6)),
    myRange = $('#picker').mobiscroll().datepicker({
        controls: ['calendar'],
        select: 'range'
    });

document.querySelector('#this-week')
    .addEventListener('click', function () {
        myRange.setVal([firstday, lastday]);
    });
```

### Setting last month

```html
<button id="last-month">Last month</button>
<div id="picker"></div>
```

```js
var now = new Date(),
    firstday = new Date(now.getFullYear(), now.getMonth() - 1, 1),
    lastday = new Date(now.getFullYear(), now.getMonth(), 0),
    myRange = $('#picker').mobiscroll().datepicker({
        controls: ['calendar'],
        select: 'range'
    });

document.querySelector('#last-month')
    .addEventListener('click', function () {
        myRange.setVal([firstday, lastday]);
    });
```

### Clear the selection with a simple click

```html
<button id="clear">Clear</button>
<div id="picker"></div>
```

```js
var inst = $('#picker').mobiscroll().datepicker({
    controls: ['calendar'],
    select: 'range'
});

document.querySelector('#clear')
    .addEventListener('click', function () {
        myRange.setVal(null);
    });
```

## API used in this demo

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

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

var now = new Date();
var curr = new Date();
var yesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1);
var startWeek = new Date(curr.setDate(curr.getDate() - curr.getDay()));
var endWeek = new Date(curr.setDate(curr.getDate() - curr.getDay() + 6));
var startMonth = new Date(curr.getFullYear(), curr.getMonth() - 1, 1);
var endMonth = new Date(curr.getFullYear(), curr.getMonth(), 0);
var inst = mobiscroll.datepicker('#demo', {
  controls: ['calendar'],
  select: 'range',
  display: 'inline',
  showRangeLabels: false,
});

document.querySelector('.md-today').addEventListener('click', function () {
  mobiscroll.toast({
    message: 'Today Selected',
  });
  inst.setVal([now, now]);
});

document.querySelector('.md-yesterday').addEventListener('click', function () {
  mobiscroll.toast({
    message: 'Yesterday Selected',
  });
  inst.setVal([yesterday, yesterday]);
});

document.querySelector('.md-week').addEventListener('click', function () {
  mobiscroll.toast({
    message: 'This Week Selected',
  });
  inst.setVal([startWeek, endWeek]);
});

document.querySelector('.md-month').addEventListener('click', function () {
  mobiscroll.toast({
    message: 'Last Month Selected',
  });
  inst.setVal([startMonth, endMonth]);
});

document.querySelector('.md-clear').addEventListener('click', function () {
  mobiscroll.toast({
    message: 'Clear Value',
  });
  inst.setVal(null);
});
```

### HTML

```html
<div class="md-range-filter">
    <h4 class="md-header">Filter Results by</h4>
    <div class="mbsc-padding">
        <button mbsc-button class="md-today mbsc-button-block">Today</button>
        <button mbsc-button class="md-yesterday mbsc-button-block">Yesterday</button>
        <button mbsc-button class="md-week mbsc-button-block">This Week</button>
        <button mbsc-button class="md-month mbsc-button-block">Last Month</button>
        <button mbsc-button class="md-clear mbsc-button-block">Clear</button>
    </div>
    <div class="mbsc-form-group">
        <div class="mbsc-form-group-title">Or by a custom range</div>
        <div id="demo"></div>
    </div>
</div>
```

### CSS

```css
.md-range-filter .md-header {
    text-align: center;
    padding: 1em .75em 0 .75em;
    margin: 0;
}
```

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

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 javascript --trial`.

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

## Related demos

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