---
title: "JQuery Calendar Multi-Date Selection Example | Mobiscroll"
component: "Calendar"
framework: "jQuery"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/jquery/calendar/multiple-select"
---

# Multi-Date Selection - jQuery Calendar demo

Let users pick multiple dates in a JQuery date picker. Set min and max selection counts and show a live counter in the header. For jQuery or jQuery Mobile.

- [Live demo](https://demo.mobiscroll.com/jquery/calendar/multiple-select)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-jquery/tree/main/src/demos/datepicker/calendar/multiple-select)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/calendar/multiple-select.md), [Angular](https://demo.mobiscroll.com/angular/calendar/multiple-select.md), [React](https://demo.mobiscroll.com/react/calendar/multiple-select.md), [Vue](https://demo.mobiscroll.com/vue/calendar/multiple-select.md)

## Description

To enable multiple selection set the [`selectMultiple`](https://mobiscroll.com/docs/jquery/datepicker/api#opt-selectMultiple) option to `true`.

The [`selectMax`](https://mobiscroll.com/docs/jquery/datepicker/api#opt-selectMax) option limits how many values can be selected.

To customize the header you can pass a [`headerText`](https://mobiscroll.com/docs/jquery/datepicker/api#opt-headerText) or turn [`selectCounter`](https://mobiscroll.com/docs/jquery/datepicker/api#opt-selectCounter) on to display a localized text with the number of dates selected.

Dynamically switching between single, multiple or range select can be done with option changes.

## What this demo shows

- **Multiple date selection** The `selectMultiple` option lets users select more than one date in a single session.
- **Any number of dates** Without a selection limit, users can select as many dates as needed.
- **Maximum selection limit** The `selectMax` option limits the number of selected dates. Once the limit is reached, additional taps are ignored.
- **Selection counter** The `selectCounter` option displays a localized selection count, such as "3 dates selected," in the header and updates it as dates are selected.
- **Custom header text** The `headerText` option replaces the default header content with custom text, such as "Pick up to 5 days."
- **Selection without a header count** When neither `selectCounter` nor `headerText` is set, highlighted dates in the calendar grid indicate the current selection.

## Best for

- **Availability and override management** Select specific dates before applying an availability rule, exception, price override, or other configuration change.
- **Multi-date bookings and reservations** Let users book or reserve multiple non-contiguous dates in one flow.
- **Batch actions** Select a group of dates and apply one action to all of them, such as bulk scheduling or status updates.
- **Visual selection feedback** Use highlighted dates in the calendar grid as the primary indication of which dates are selected.

## Tutorial

### Customize the selection

- [ ] Select a maximum of `10` days

### Customize the header

- [x] Show a selection counter in the header
- [ ] Show `Pick up to 5 days` in the header

```js
$('#date-picker').mobiscroll().datepicker({
    controls: ['calendar'],
    selectMultiple: true,
    selectCounter: true
});
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/jquery/datepicker/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/jquery/datepicker/api#opt-themeVariant) - option
- [`controls`](https://mobiscroll.com/docs/jquery/datepicker/api#opt-controls) - option
- [`display`](https://mobiscroll.com/docs/jquery/datepicker/api#opt-display) - option
- [`selectMultiple`](https://mobiscroll.com/docs/jquery/datepicker/api#opt-selectMultiple) - option
- [`selectMax`](https://mobiscroll.com/docs/jquery/datepicker/api#opt-selectMax) - option
- [`headerText`](https://mobiscroll.com/docs/jquery/datepicker/api#opt-headerText) - option
- [`selectCounter`](https://mobiscroll.com/docs/jquery/datepicker/api#opt-selectCounter) - option

## Code

### JS

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

$(function () {
  $('#demo-multi-day')
    .mobiscroll()
    .datepicker({
      controls: ['calendar'],
      display: 'inline',
      selectMultiple: true,
    });

  $('#demo-max-days')
    .mobiscroll()
    .datepicker({
      controls: ['calendar'],
      display: 'inline',
      selectMultiple: true,
      selectMax: 5,
      headerText: 'Pick up to 5 days',
    });

  $('#demo-counter')
    .mobiscroll()
    .datepicker({
      controls: ['calendar'],
      display: 'inline',
      selectMultiple: true,
      selectCounter: true,
    });
});
```

### HTML

```html
<div class="mbsc-grid">
    <div class="mbsc-row">
        <div class="mbsc-col-sm-12 mbsc-col-md-4">
            <div class="mbsc-form-group">
                <div class="mbsc-form-group-title">Multi-day</div>
                <div id="demo-multi-day"></div>
            </div>
        </div>
        <div class="mbsc-col-sm-12 mbsc-col-md-4">
            <div class="mbsc-form-group">
                <div class="mbsc-form-group-title">Max days</div>
                <div id="demo-max-days"></div>
            </div>
        </div>
        <div class="mbsc-col-sm-12 mbsc-col-md-4">
            <div class="mbsc-form-group">
                <div class="mbsc-form-group-title">Counter</div>
                <div id="demo-counter"></div>
            </div>
        </div>
    </div>
</div>
```

## Implementation notes

- Use `controls: ['calendar']`, `display: 'inline'`, and `selectMultiple: true` to allow selecting more than one date.
- Options below can be updated at runtime via `setOptions` on a single instance.
- Set `defaultSelection` to an array of `Date` objects to pre-select dates on load (this demo pre-selects the 4th, 15th, and 27th of the current month).
- `selectMax` can be set to a number (e.g. `10`) to cap how many dates can be selected at once - once the cap is reached, further clicks stop adding new dates until one is deselected. Unset by default (no cap).
- `selectCounter: true` shows a "N selected" style counter in the calendar header.
- `headerText` can be set to a custom string (e.g. `'Pick up to 5 days'`) to show fixed instructional text in the header instead of a live counter.
- `selectCounter` and `headerText` both occupy the same header area, so typically only one is set at a time.

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

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

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

## Related demos

- Previous: [Single Date Selection](https://demo.mobiscroll.com/jquery/calendar/single-select.md) - Select a single date with the JQuery date picker — combine it with a scroller or time-slot picker for appointments and reservations.
- Next: [Week Picker](https://demo.mobiscroll.com/jquery/calendar/week-select.md) - Pick a full week or a custom number of weeks in a JQuery date picker — configure the first day and selection size (1, 2, or 3 weeks).