---
title: "Javascript Range Date Filter with Preset Ranges Example | Mobiscroll"
component: "Range"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/range/date-filtering-with-predefined-ranges"
---

# Date Filter with Preset Ranges - JavaScript Range demo

Build a date filtering UI with the Javascript date range picker — choose from custom or preset ranges (Today, Last 7 days, Last 30 days). Plain JS api for usage everywhere.

- [Live demo](https://demo.mobiscroll.com/javascript/range/date-filtering-with-predefined-ranges)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/datepicker/range/date-filtering-with-predefined-ranges)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/range/date-filtering-with-predefined-ranges.md), [Angular](https://demo.mobiscroll.com/angular/range/date-filtering-with-predefined-ranges.md), [React](https://demo.mobiscroll.com/react/range/date-filtering-with-predefined-ranges.md), [Vue](https://demo.mobiscroll.com/vue/range/date-filtering-with-predefined-ranges.md)

## Description

When building a date filtering UI a date range picker is essential. On top of being able to select custom start and end dates presets can be very helpful and provide a nice productivity boost. A more advanced filtering experience can be created in a couple of steps:

- **Custom popup with an inline calendar** - Create a custom popup and place an inline date picker with start/end selection
- **Select with common presets** - Populate a dropdown with values like **Today**, **Yesterday**, **Last week**, **Last month**, **Last 7 days**, **Last 30 days**
- **Inputs for typing dates** - Adding two inputs next to the range picker enables users to type in a date rather than solely relying on manual selection
- **Make it fully responsive** - Use the `responsive` api to customize the desktop experience - dropdown with inputs for typing - and the mobile experience - touch optimized interface

## What this demo shows

- Shows a clickable input which opens a custom range picker with preset options.
- **Popup behavior** The range picker opens below the input and closes when the user clicks outside it.
- **Month view** The popup contains an inline date picker for selecting start and end dates. A fixed weekday header displays abbreviated day names from Sunday through Saturday, with the dates arranged in a grid below.
- **Header navigation** Clicking 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 move between months.
- **Swipe navigation** Dragging the calendar left or right moves between months.
- **Day cell states** Hovering over a day displays a gray background behind its number. The first selected day becomes the range start, and the second becomes the range end. Selected dates appear 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 opens its corresponding month.
- **Presets** The **Date range** dropdown beside the inline calendar provides **Custom**, **Today**, **Yesterday**, **Last week**, **Last month**, **Last 7 days**, and **Last 30 days** options. **Custom** is selected by default and allows free start and end date selection from the calendar.
- **Start and end inputs** The **Start** and **End** inputs below the preset dropdown support date selection and manual date entry. They are enabled only when **Custom** is selected.
- **Actions** The `Apply` button confirms the selected date range, while the gray `Cancel` button discards the change.
- **Input value** After the user confirms the selection with `Apply`, the input displays the date range in month, day, and year format.

## Best for

- **Analytics and reporting** Filter dashboards and reports by common periods such as today, last week, or last month, while retaining a custom range option.
- **Transaction history** Review orders, payments, or account activity across frequently used date ranges.
- **Logs and audit records** Narrow time-based records to recent periods or a manually entered start and end date.
- **Operational dashboards** Switch quickly between standard monitoring windows such as the last 7 or 30 days.
- **Search and data tables** Add compact date filtering where users need both preset ranges and precise custom selection.

## 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
- [`inputElement`](https://mobiscroll.com/docs/javascript/select/api#opt-inputElement) - option
- [`responsive`](https://mobiscroll.com/docs/javascript/select/api#opt-responsive) - option
- [`touchUi`](https://mobiscroll.com/docs/javascript/select/api#opt-touchUi) - option
- [`onChange`](https://mobiscroll.com/docs/javascript/select/api#event-onChange) - event
- [`setOptions`](https://mobiscroll.com/docs/javascript/datepicker/api#method-setOptions) - method
- [`disabled`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-disabled) - 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
- [`pages`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-pages) - option
- [`startInput`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-startInput) - option
- [`endInput`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-endInput) - option
- [`returnFormat`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-returnFormat) - option
- [`showOnClick`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-showOnClick) - option
- [`showOnFocus`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-showOnFocus) - option
- [`onInit`](https://mobiscroll.com/docs/javascript/datepicker/api#event-onInit) - event
- [`onChange`](https://mobiscroll.com/docs/javascript/datepicker/api#event-onChange) - event
- [`setVal`](https://mobiscroll.com/docs/javascript/select/api#method-setVal) - method
- [`responsive`](https://mobiscroll.com/docs/javascript/popup/api#opt-responsive) - option
- [`display`](https://mobiscroll.com/docs/javascript/popup/api#opt-display) - option
- [`touchUi`](https://mobiscroll.com/docs/javascript/popup/api#opt-touchUi) - option
- [`buttons`](https://mobiscroll.com/docs/javascript/popup/api#opt-buttons) - option
- [`close`](https://mobiscroll.com/docs/javascript/popup/api#method-close) - method
- [`anchor`](https://mobiscroll.com/docs/javascript/popup/api#opt-anchor) - option
- [`scrollLock`](https://mobiscroll.com/docs/javascript/popup/api#opt-scrollLock) - option
- [`showArrow`](https://mobiscroll.com/docs/javascript/popup/api#opt-showArrow) - option
- [`maxWidth`](https://mobiscroll.com/docs/javascript/popup/api#opt-maxWidth) - option
- [`open`](https://mobiscroll.com/docs/javascript/popup/api#method-open) - method

## Code

### JS

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

var formatDate = mobiscroll.formatDate;
var startDate = '2026-10-23T00:00';
var endDate = '2026-10-29T00:00';
var dateInput = document.getElementById('date-filtering');
var startInput = document.getElementById('date-filtering-start');
var endInput = document.getElementById('date-filtering-end');

var now = new Date();
var day = now.getDay();
var monday = now.getDate() - day + (day === 0 ? -6 : 1);

var select = mobiscroll.select('#date-filtering-select', {
  inputElement: document.getElementById('date-select-input'),
  responsive: {
    xsmall: {
      touchUi: true,
    },
    small: {
      touchUi: false,
    },
  },
  onChange: function (args) {
    var selected = args.value;

    if (selected === 'custom') {
      disableInputs(false);
    } else {
      disableInputs(true);

      switch (selected) {
        case 'today':
          calendar.setVal(['2026-10-23T00:00', '2026-10-23T00:00']);
          break;
        case 'yesterday':
          calendar.setVal(['2026-10-22T00:00', '2026-10-22T00:00']);
          break;
        case 'last-week':
          calendar.setVal([
            new Date(now.getFullYear(), now.getMonth(), monday - 7),
            new Date(now.getFullYear(), now.getMonth(), monday - 1),
          ]);
          break;
        case 'last-month':
          calendar.setVal(['2026-09-01T00:00', '2026-09-30T00:00']);
          break;
        case 'last-7-days':
          calendar.setVal(['2026-10-17T00:00', '2026-10-23T00:00']);
          break;
        case 'last-30-days':
          calendar.setVal(['2026-09-24T00:00', '2026-10-23T00:00']);
          break;
      }
    }
  },
});

function disableInputs(disable) {
  var startInst = mobiscroll.getInst(startInput);
  var endInst = mobiscroll.getInst(endInput);

  startInst.setOptions({ disabled: disable });
  endInst.setOptions({ disabled: disable });
}

var calendar = mobiscroll.datepicker('#date-filtering-calendar', {
  controls: ['calendar'],
  select: 'range',
  display: 'inline',
  showRangeLabels: false,
  pages: 'auto',
  startInput: '#date-filtering-start',
  endInput: '#date-filtering-end',
  returnFormat: 'iso8601',
  showOnClick: false,
  showOnFocus: false,
  onInit: function (event, inst) {
    inst.setVal([startDate, endDate]);
    setInputValue(startDate, endDate, inst.s.dateFormat);
  },
  onChange: function () {
    disableInputs(false);
    select.setVal('custom');
  },
});

var popup = mobiscroll.popup('#date-filtering-popup', {
  responsive: {
    xsmall: {
      display: 'bottom',
      touchUi: true,
      buttons: [
        {
          text: 'Apply',
          handler: function () {
            var date = calendar.getVal();

            setInputValue(date[0], date[1] || date[0], calendar.s.dateFormat);
            popup.close();
          },
        },
        'cancel',
      ],
    },
    custom: {
      breakpoint: 559,
      buttons: [],
      display: 'anchored',
      anchor: dateInput,
      anchorAlign: 'start',
      touchUi: false,
      scrollLock: false,
      showArrow: false,
      maxWidth: 920,
    },
  },
});

function setInputValue(start, end, dateFormat) {
  dateInput.value = formatDate(dateFormat, new Date(start)) + ' - ' + formatDate(dateFormat, new Date(end));
}

dateInput.addEventListener('click', function () {
  popup.open();
});

document.addEventListener('click', function (e) {
  if (e.target && e.target.classList.contains('apply-button')) {
    var date = calendar.getVal();

    setInputValue(date[0], date[1] || date[0], calendar.s.dateFormat);
    popup.close();
  } else if (e.target && e.target.classList.contains('cancel-button')) {
    popup.close();
  }
});
```

### HTML

```html
<div class="mbsc-form-group">
    <label>
        <input id="date-filtering" mbsc-input data-input-style="box" readonly />
    </label>
</div>
<div>
    <div id="date-filtering-popup" class="demo-date-filtering-popup">
        <div class="mbsc-grid mbsc-no-padding">
            <div class="mbsc-row">
                <div class="mbsc-col-sm-4 mbsc-push-sm-8 demo-date-filtering-dates">
                    <div class="demo-date-filtering-inputs">
                        <label>
                            Date range
                            <input mbsc-input id="date-select-input" data-dropdown="true" data-input-style="box" data-label-style="stacked" />
                        </label>
                        <select id="date-filtering-select">
                            <option value="custom" selected>Custom</option>
                            <option value="today">Today</option>
                            <option value="yesterday">Yesterday</option>
                            <option value="last-week">Last week</option>
                            <option value="last-month">Last month</option>
                            <option value="last-7-days">Last 7 days</option>
                            <option value="last-30-days">Last 30 days</option>
                        </select>
                        <label class="demo-date-filtering-range-input">
                            Start
                            <input id="date-filtering-start" mbsc-input data-input-style="box" data-label-style="stacked" />
                        </label>
                        <label class="demo-date-filtering-range-input">
                            End
                            <input id="date-filtering-end" mbsc-input data-input-style="box" data-label-style="stacked" />
                        </label>
                    </div>
                    <div class="demo-date-filtering-desktop-buttons mbsc-button-group-justified">
                        <button class="apply-button" mbsc-button>Apply</button>
                        <button class="cancel-button" mbsc-button>Cancel</button>
                    </div>
                </div>
                <div class="mbsc-col-sm-8 mbsc-pull-sm-4">
                    <div id="date-filtering-calendar"></div>
                </div>
            </div>
        </div>
    </div>
</div>
```

### CSS

```css
.demo-date-filtering-popup .mbsc-ios.mbsc-datepicker-inline {
    border: none;
    border-radius: 4px;
    overflow: hidden;
}

.demo-date-filtering-popup .mbsc-textfield-wrapper-box {
    margin-top: 0;
    margin-right: 0;
}

.demo-date-filtering-dates {
    display: flex;
    flex-direction: column;
}

.demo-date-filtering-inputs {
    flex: 1;
}

.demo-date-filtering-desktop-buttons.mbsc-button-group-justified,
.demo-date-filtering-desktop-buttons.mbsc-button-group-justified button {
    margin-bottom: 0;
}

@media (max-width: 575px) {
    .demo-date-filtering-desktop-buttons {
        display: none;
    }
    .demo-date-filtering-popup .mbsc-textfield-wrapper-box {
        margin-left: 0;
    }
}
```

## Implementation notes

- The custom popup wraps a `Popup` component containing an inline `Datepicker` set to `select: 'range'`, `display: 'inline'`, `showRangeLabels: false`, and `pages: 'auto'` so the calendar fills the available popup width.
- The `Popup`'s `responsive` option defines a breakpoint-based layout: a `custom` breakpoint config anchors the popup to the input (`display: 'anchored'`, `anchor: <input element>`, `anchorAlign: 'start'`) with no buttons on wider screens, and an `xsmall` config switches to `display: 'bottom'`, `touchUi: true`, with `Apply`/`cancel` buttons for narrow screens.
- Preset options are populated from a plain data array (`{ value, text }` pairs for Today/Yesterday/Last week/Last month/Last 7 days/Last 30 days/Custom) fed into a `Select` component; selecting a preset computes a `[start, end]` date pair and pushes it into the range picker's `value`.
- `returnFormat: 'iso8601'` on the `Datepicker` makes the range value returned as ISO 8601 date strings, which the preset logic also produces so both sources stay in the same format.
- Selecting `'Custom'` in the preset dropdown re-enables the Start/End inputs; any other preset disables them (they only display the computed range).
- `startInput`/`endInput` bind the calendar's start/end values to separate Start and End inputs - in React/Vue these take input refs, in Angular template reference variables, and in JS/jQuery selector strings - enabling users to type a date instead of only picking it from the calendar.
- `showOnClick: false` and `showOnFocus: false` on the inline `Datepicker` prevent it from also trying to open as its own anchored popup, since the surrounding custom `Popup` already controls visibility.
- The picker's `onChange` handler resets the preset selection back to `'custom'` whenever the user manually picks dates from the calendar, keeping the preset dropdown in sync with manual selection.

## 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: [Flight Booking](https://demo.mobiscroll.com/javascript/range/flight-booking.md) - Build a flight booking date picker with the Javascript range component — round-trip and one-way selection.