---
title: "Javascript Range Label Customization Example | Mobiscroll"
component: "Range"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/range/customizing-labels-selection"
---

# Label Customization - JavaScript Range demo

Override the start/end date labels on the Javascript date range picker — use “Check in/Check out” for hotels or “Outbound/Return” for flights, or hide them. Plain JavaScript API.

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

## Description

Whether you are using the calendar or scroller for range selection, the microcopy for [`rangeStartLabel`](https://mobiscroll.com/docs/javascript/datepicker/api#localization-rangeStartLabel) and [`rangeEndLabel`](https://mobiscroll.com/docs/javascript/datepicker/api#localization-rangeEndLabel) can be easily overridden. For flight booking *"Outbound"* and *"Return"* makes sense while for accommodation booking *"Check in"* and *"Check out"* might be more appropriate.

The range start/end labels can also be hidden in some cases if needed. Use the [`showRangeLabels`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-showRangeLabels) option for that.

Furthermore, you have the option to toggle the range highlight with the [`rangeHighlight`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-rangeHighlight) option, if needed.

## What this demo shows

- A configuration panel for customizing the range picker inputs and selection display.
- **View selection** Switch between the calendar and scroller range picker views. The calendar view is selected by default.
- **Range labels** Show or hide the start and end labels. The labels are visible by default.
- **Custom labels** Replace the default start and end labels with custom text.
- **Label helpers** Add custom helper text below the start and end input labels.
- **Range highlighting** Highlight the full selected range or only its start and end dates. Full-range highlighting is enabled by default.
- **Inline date range picker** Display the date range picker directly on the page without an input by using inline display mode.
- **Start and end inputs** Use the clickable inputs above the calendar header to choose which range boundary to set. The active input has a white background, while the inactive input has a gray background. A clear button appears after a range is selected.
- **Header navigation** Open the month and year picker from the label in the upper-left corner, or use the previous and next arrow buttons to navigate between months.
- **Month view** View dates in a grid below a fixed weekday header with abbreviated day names from Sunday through Saturday.
- **Month navigation** Drag the calendar left or right to move between months.
- **Day cell states** Hover over a day to highlight its number with a gray background. The first selected day sets the range start, and the second sets the range end. Selected days are highlighted in blue.
- **Current date** 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

- **Bookings and reservations** Selecting hotel stays, travel dates, rentals, and other reservation periods that require start and end dates.
- **Reporting periods** Choosing a date range for reports and other time-based data views.

## Tutorial

### Customize

- (x) Calendar
- ( ) Scroller

### Customize the start & end labels

- [x] Show range labels
- [ ] Override localized labels with custom text

Show `Outbound` for the start label

Show `Return` for the end label

- [ ] Override label helpers with custom text

Show `Set dates` for start helper

Show `Set dates` for end helper

### Highlight the selected range or only start/end dates

- [x] Highlight selected range

```js
mobiscroll.datepicker('#picker', {
    controls: ['calendar'],
    select: 'range',
    rangeHighlight: true,
    showRangeLabels: true,
    rangeStartHelp: 'Set dates',
    rangeEndHelp: 'Set dates'
});
```

With "Scroller":

```js
mobiscroll.datepicker('#picker', {
    controls: ['date'],
    select: 'range',
    showRangeLabels: true,
    rangeStartHelp: 'Set dates',
    rangeEndHelp: 'Set dates'
});
```

## 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
- [`rangeHighlight`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-rangeHighlight) - option
- [`showRangeLabels`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-showRangeLabels) - option
- [`rangeStartLabel`](https://mobiscroll.com/docs/javascript/datepicker/api#localization-rangeStartLabel) - option
- [`rangeEndLabel`](https://mobiscroll.com/docs/javascript/datepicker/api#localization-rangeEndLabel) - option
- [`rangeStartHelp`](https://mobiscroll.com/docs/javascript/datepicker/api#localization-rangeStartHelp) - option
- [`rangeEndHelp`](https://mobiscroll.com/docs/javascript/datepicker/api#localization-rangeEndHelp) - option

## Code

### JS

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

mobiscroll.datepicker('#demo-calendar', {
  controls: ['calendar'],
  select: 'range',
  display: 'inline',
  rangeHighlight: true,
  showRangeLabels: true,
  rangeStartLabel: 'Outbound',
  rangeEndLabel: 'Return',
  rangeStartHelp: 'Set dates',
  rangeEndHelp: 'Set dates',
});

mobiscroll.datepicker('#demo-scroller', {
  controls: ['date'],
  select: 'range',
  display: 'inline',
  rangeHighlight: true,
  showRangeLabels: true,
  rangeStartLabel: 'Outbound',
  rangeEndLabel: 'Return',
  rangeStartHelp: 'Set dates',
  rangeEndHelp: 'Set dates',
});
```

### HTML

```html
<div id="demo-calendar"></div>
<div id="demo-scroller"></div>
```

## Implementation notes

- Set `select: 'range'` with `controls: ['calendar']` or `controls: ['date']` to switch between the calendar and scroller/dropdown range views; both support the same range-labeling and highlight options.
- Set `showRangeLabels: true`/`false` to show or hide the start/end labels above the picker.
- Override the default "Start"/"End" microcopy with `rangeStartLabel`/`rangeEndLabel` (e.g. `'Outbound'`/`'Return'` for flights, `'Check in'`/`'Check out'` for accommodation).
- Add helper text below each label with `rangeStartHelp`/`rangeEndHelp`.
- Set `rangeHighlight: true`/`false` to toggle highlighting the full selected range versus only the start/end dates; `rangeHighlight` only applies to `controls: ['calendar']` - it has no effect on the scroller/dropdown (`controls: ['date']`) view.
- Clear a custom label/helper by passing `undefined` for that option (e.g. `.setOptions({ rangeStartLabel: undefined })`), which reverts to the localized default.
- Apply option changes at runtime via `.setOptions({ ... })` on the picker instance (JS/jQuery) or by updating the bound reactive props (React/Angular/Vue).

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

- Previous: [Range Picker Customization](https://demo.mobiscroll.com/javascript/range/week-month-view-scrolling-direction.md) - Show multiple months or weeks in the Javascript date range picker calendar — set scroll direction, display count, week numbers, and outer day visibility.
- Next: [Day Marks, Colors & Labels](https://demo.mobiscroll.com/javascript/range/dots-colors-labels.md) - Highlight days with or background colors in the Javascript date range picker — configure by exact date, date range, and or recurring rule.