Updated on Nov 12, 2024

Highly customizable React range picker for date & time

Responsive range picker for flight, accommodation and resource booking for React and Ionic React

Customizable date range
Time range
Inline date picker
Use it on an input
Visit the calendar
For mobile & touch
Desktop & pointer interaction
For TIME as well!
Visit the datetime

The range picker supports start & end selection for date, time and combined date & time. Choose between a calendar view with one or more months, week view with single or multiple weeks or date and time scrollers and dropdowns.

Easily switch between single and range select for use-cases like one-way flights.

The capabilities like built-in validation, minimum, maximum values, disabled dates, range length are supported by both the scroller and calendar.

As part of Date, time & calendar it can be picked up with the Framework and Complete licenses or with the component license.

React Range Range for React

Switch the layout between mobile & desktop
and see how it looks.

Range - Mobile & Desktop usage

Change demo

Use the range picker for both mobile and desktop or set it up responsively.

The main difference between the two rendering modes is how the picker is laid out. Set the touchUi option to false and the component shows up suitable for larger screens and pointer interaction while setting it to true renders it suitable for touch screens.

Use it on an existing form field, custom input or use it on Mobiscroll form fields. You can also embed it directly into your page. When linked to an input, the component will be shown on focus or when someone clicks on the field. Alternatively, you can leave the input editable and show the component only on a button click.

Handle different screen sizes by setting it up responsively  Check out the responsive demo →

Range - Initializing the picker

Change demo

The range component generates a Mobiscroll input that inherits the theme and overall styling rules. It can however be overridden by setting the relevant options for the component.

There are four ways to use the range picker:

  • Use it on an existing input by using the inputComponent prop. A great example is usage with an IonInput
  • Let the component generate the Mobiscroll input. Give it the extra styling and overrides through options
  • Use it with two separate inputs of any type, one for start and another for end
  • Embed the picker without an input. This can be the page itself or a more complex popup

Range - Responsive behavior

Change demo

The range picker has a liquid layout, which means it nicely adapts to its surroundings. There are times however when you would like to set up the component responsively.

Use the responsive option to configure the picker and change the options based on the viewport width. There are five predefined breakpoints:

  • xsmall - min-width: 0px
  • small - min-width: 576px
  • medium - min-width: 768px
  • large - min-width: 992px
  • xlarge - min-width: 1200px
  • use custom for setting a custom breakpoint

It is a good idea to change the display or controls option to tailor the UX. This way you can have a single month calendar on mobile and a two month view on bigger screens.

Change the viewport

Range - Understanding the controls

Change demo

The picker supports multiple controls:

  • Calendar view - can be used on its own or combined with a time scroller
  • Date picker - can be used separately or together with a time picker as a scroller on mobile and as a dropdown on desktop
  • Time picker - can be used separately or together with a date picker or calendar
  • Datetime picker - can be used as a scroller on mobile and as a dropdown on desktop

Use the controls option (expecting an array) to configure the picker.

Range - Understanding display modes

Change demo

The range has five built-in display modes that can be controlled through the display option:

  • top - modal that slides down from the top
  • bottom - modal that slides up from the bottom
  • center - modal that shows up in the middle with a pop animation
  • anchored - modal that shows up anchored to an input or any dom element
  • inline - embeddable picker that is rendered into the markup without its own modal

Use the touchUi option to switch between touch optimized mobile rendering and pointer optimized desktop rendering. It can be dynamically switched with the help of the responsive option.

The defaults change on a theme to theme basis. The ios theme comes with bottom on mobile and anchored on desktop while the material and windows themes have center on mobile and anchored on desktop.

Want to see how to set up responsiveness?  Check out the previous example →

Range - Date filtering with presets

Change demo

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

Range - Flight booking

Change demo

For a great booking experience a good date picker is essential. The best implementations are contextual and take the intent (what people want to do) and context (where and how are they doing it) into account. Learn how to use and customize the range picker and see how you can add your flavor that matches with the overall experience of your application.

Range - Vacation property availability

Change demo

Use the multiple month view of the date picker for building an availability calendar for a vacation rental. The colored backgrounds and labels can be used to display season and pricing information and half-day styling to show check-in and check-out dates.

Booked dates are disabled and validation on check-in and check-out dates is automatic based on the data as a range for a new booking is applied.

Range - New event creation

Change demo

Use the range picker for a new event creation. Let people pick start and end dates when adding events.

Dynamically switch between date only and date-time entry based on an "all-day" switch by changing the controls to 'date' or 'datetime'.

Interested in an event calendar solution?  Check out the event calendar →

Range - Date range

Change demo

Set up the range picker for date pair selection. Regardless if you are interested in the start/end date or the actual range, you have several possibilities of rendering a date range picker. The controls option supports different values:

  • calendar - will render a calendar view for date range selection
  • date - will render a date scroller or dropdown for date range selection
  • datetime - will render a compact date scroller or dropdown with time picker for date & time range selection (explore date & time ranges)
  • time - will render a time picker for range selection (explore time ranges)
  • timegrid - will render a time grid for range selection (explore time ranges)

Range - Time range

Change demo

Set up the range picker for time pair selection. Regardless if you are interested in the start/end date or the actual range, you have several possibilities of rendering a time range picker. The controls option supports different values:

  • time - will render a time picker or dropdown for range selection
  • timegrid - will render a time grid for range selection
  • calendar - will render a calendar view for date range selection (explore date ranges)
  • date - will render a date scroller or dropdown for date range selection (explore date ranges)
  • datetime - will render a compact date scroller or dropdown with time picker for date & time range selection (explore date & time ranges)

Range - Date & time range

Change demo

Set up the range picker for date & time pair selection. Regardless if you are interested in the start/end date or the actual range, you have several possibilities of rendering a date and time range picker. The controls option supports different values:

  • datetime - will render a compact date scroller or dropdown with time picker for date & time range selection
  • calendar - will render a calendar view for date range selection (explore date ranges)
  • date - will render a date scroller or dropdown for date range selection (explore date ranges)
  • time - will render a time picker for range selection (explore time ranges)
  • timegrid - will render a time grid for range selection (explore time range selection)

Range - Customizing the calendar

Change demo

The calendar view can be customized with a couple of different parameters:

  • Month or week calendar - switch between month and week through the calendarType option and set the number of months or weeks through the pages and calendarSize options
  • Set a month change direction - specify 'hoizontal' or 'vertical' in the calendarScroll option
  • Show week numbers - set the showWeekNumbers to true and show a week counter starting from the first week of every year
  • Hide the outer days of a month - set the showOuterDays to false in case you don't want to see days from previous and next months

Range - Customizing the range

Change demo

Whether you are using the calendar or scroller for range selection, the microcopy for rangeStartLabel and 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 option for that.

Furthermore, you have the option to toggle the range highlight with the rangeHighlight option, if needed.

Range - Marked, colored & labels

Change demo

You can highlight days, mark them with colored dots, add labels or completely color the background of the days using the marked, colors and labels options. This offers means to add more information to the calendar that could be valuable to users. While you can use the colors along with marked and labels, the latter two are mutually exclusive because they get rendered in the same place on the UI.

You can add them as exact dates, ranges or specify recurring rules. The recurring object supports different ways to describe the rules.

The passed date-times can also contain timezone data which requires a timezonePlugin to be interpreted correctly. Check out how timezones work in the range.

Use the onPageLoading lifecycle event to load the data runtime. You can learn about lifecycle events and places where to drop logic to customize the experience.

Range - Presets

Change demo

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.

Range - Date types

Change demo

The range works with different date types:

  • JS date object - a common way of passing a date is through a Date object: new Date(1995, 11, 17, 15, 24) (make sure to not simply pass a date string to new Date())
  • ISO date string - standardized way of passing dates: '2008-09-15T15:53:00' (make sure to pass it as a string)
  • Moment.js object - a great solution that solves common date management difficulties: moment([2018, 3, 27, 12, 15]) (make sure to have moment.js loaded)

When passing dates to the component - eg. invalids, min/max - you can do it in either format and the picker will automatically know what to do with it. If you want to specify how the picker should return values, you can do it in the returnFormat option.

Range - Formatting values

Change demo

Use the dateFormat, timeFormat options to customize how the values show up in the inputs after selection. If the formats are not explicitly set, they are inherited from the localization settings.

Besides customizing the date and time formats you can reorder the time picker wheels and change its formats with the timeWheels options.

Interested in learning about localization?  Check out how the return format changes based on locale →

Range - Timezones

Change demo

The range works with local times by default, but ships with support for changing the timezone. The conversions and correct output relies on either of the two external libraries: luxon or moment-timezone. For installing and using these libraries check out this guide.

There are two angles regarding timezones:

  • dataTimezone - the range expects this format and returns this format. It is 'local' by default if the date-times don't contain any timezone information
  • displayTimezone - the calendar displays everything in this timezone. The date-times will be converted from the dataTimezone and displayed accordingly. It is 'local' by default

Invalids as well as marked, colored and labels date-times will all be interpreted in dataTimezone when they contain no timezone info and will be shown in displayTimezone on the calendar.

Range - Setting the allowed range length

Change demo

Besides invalidating selection that is before and after a specific date, the minimum and maximum allowed length of a range selection can be enforced through the minRange and maxRange options.

This form of validation is easy to understand and reduces erroneous entries.

Range - Min & max values

Change demo

Configuring minimum and maximum selectable values is great for reducing mistakes. Help people by limiting the selections for the task at hand. Use the min and max options to restrict the selection. Setting the values will disable dates/times earlier than min and dates/times that come after max.

By default these options are empty and the date picker supports infinite navigation, while the time picker has all 24 hours/60 minutes/... available for selection. Values can be passed as JS date objects, ISO date strings or Moment.js objects.

Looking to invalidate more dates/times?  Discover how to disable specific values →

Range - Disabled values

Change demo

Enforcing validation is essential to a great UX. First make sure to have the min & max values right and then work your way through disabled values.

Depending on your situation, you have two options:

  • Set invalid - set the invalids through the invalid option.
  • Set valid - set the valids through the valid option.
Both the invalid and valid options support the following:

  • Exact dates - Passing exact values like: '2020-05-20' will disable/enable the specific day
  • Date ranges - Passing start and end value pairs will disable/enable specific days that fall into that range
  • Recurring dates - Passing recurrence rules as objects or in RRULE string format will be parsed. For more information on recurrence check out the rule generator

Exact dates and the start/end pairs can be passed as JS date objects, ISO date strings or Moment.js objects. Having invalids set up correctly not just enhances the UX, but improves performance.

The passed date-times can also contain timezone data which requires a timezonePlugin to be interpreted correctly.

Using date-times across different timezones?  Learn more about timezone support →

Range - Recurring values

Change demo

Disable recurring days, set marked or colored days with the help of the recurring object. Learn how to configure daily, weekly, monthly and yearly recurring dates and pass a rule in the recurring property under the invalid, marked, colors or labels options. Exceptions for specific and recurring days can be configured.

Use the configurator to experiment, build strings and objects that you can grab and use.

Interested in disabling dates?  Discover how invalids work →

Range - Theming capabilities

Change demo

The look and feel of the date picker can be deeply customized. There are four levels of customization:

  • Base themes: Choose between iOS, Material and Windows.
  • Light or dark: Every theme has a light and dark variant. Setting the themeVariant to 'auto' will switch based on system settings.
  • Custom themes: Use the theme builder to customize the colors and make it match your brand.
  • Custom CSS: If you need further customization, the sky is the limit with CSS overrides.

You can also see how every example looks by changing the theme from the header.

Range - Marked day classes

Change demo

The default shape of day marks are dots. If you want to mark a day for something you can add one or more colored dots through the marked option. There are cases when you might want to change the shape of the marks or use different marks that carry specific meaning.

When you want to update the shape you can simply use CSS and override the styling: .mbsc-calendar-marks .mbsc-calendar-mark { // you custom override }.

If you need to show different shapes, you can pass a custom CSS class in the markCssClass property of the marked option. Use it to show triangles, squares and dots for different marks.

What else can you use to add extra information to the day cells?  Learn how to add labels and color days →

Range - Half days

Change demo

In situations when you need to style the days a little differently you'll get built-in tools for setting background color, highlight color, add day marks or labels.

But sometimes that is not enough. Luckily you can use the cellCssClass property of the colors option to pass a CSS class that will be added to the day cell and apply any custom styling you write in CSS. These days can be recurring days, ranges or individual days.

You can use the cellCssClass in combination with custom cell background to highlight a range of days and show the ends as check-in and check-out days.

Range - Lifecycle events

Change demo

The date picker ships with different event hooks for deep customization. Events are triggered through the lifecycle of the component where you can tie in custom functionality and code.

While users interact with the UI events like onChange, onSet, onInit ... will be triggered.

For a complete list of events go to the documentation  See available lifecycle events →

Range - Calendar systems

Change demo

The date picker supports multiple calendar systems. You can control it with the calendarSystem setting, and it supports the following options:

  • Gregorian - it is included by default
  • Jalali - it is the default system of the Persian calendar and is included within the Farsi language pack
  • Hijri - it is included in the Arabic language pack
Interested in localization?  Explore this example →

Range - Localization

Change demo

All components are fully localized. In case of the date picker this covers date and time format, button copy, rtl and more. You can see how each example shows up by clicking on the small flag icon or checking the examples below.

All settings can be manually overridden  See what options the localization impacts →

Range - RTL mode

Change demo

RTL support is built in and can be explicitly controlled through the rtl option. If not set, it is inherited from the locale settings.

Explore the different locales  Check out this example →

Looking for something you didn't see or have a sales question?
Ask us about it, we're here to help.

Get started with Mobiscroll for Angular

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for React

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for Javascript

Give the components a try in a starter app or see how they look in your project.

Get started with Mobiscroll for Vue

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for Ionic Vue

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for Ionic Angular

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for Ionic React

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for jQuery

Give the components a try in a starter app or see how they look in your project.

Already have an account?
Get started with Mobiscroll for Angular

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for React

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for Javascript

Give the components a try in a starter app or see how they look in your project.

Get started with Mobiscroll for Ionic Angular

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for Ionic React

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for jQuery

Give the components a try in a starter app or see how they look in your project.

Get started with Mobiscroll for Vue

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for Ionic Vue

Give the components a try locally and see how they look in your project.

Already have an account?
Simple two minute install guide for jQuery
Step 1.
Copy resources
Step 2.
Add references
Step 3.
Copy the code
Step 4.
Refresh browser
Copy the downloaded JS and CSS folder into your project

Extract the downloaded zip (download again) and grab the two folders. Make sure to place it where it can be reached from your html file.

Alternatively you can run the example using our demo app.

file-copy-arrows

Or you can just simply try and play with the examples right from the folder you just unpacked. You don't find the downloaded example? Download it again.

Include the mobiscroll CSS and JS resources in your files

Add this script before the closing </head> tag of your file. Make sure to have jQuery loaded before this.

Copy code <link href="css/mobiscroll.jquery.min.css" rel="stylesheet" />
<script src="js/mobiscroll.jquery.min.js"></script>

Make sure to have the CSS and JS files copied over as explained in Step 1.

Copy the code into your app

Grab the relevant parts and drop them into your JS, HTML and CSS files.

Copy JS
Copy HTML
Copy CSS
Take a look at what you've accomplished

Reload your application in your favorite browser

arrow-browser-reload@2x

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

Keep things running smoothly

We have sent an email with verification instructions to you. Please make sure to follow the steps and verify it's you.

In case you fail to verify the account, the trial will be interrupted.

If you have any trouble

Don't hesitate to let us know.

install-help-bck
Simple two minute install guide for Javascript
Step 1.
Copy resources
Step 2.
Add references
Step 3.
Copy the code
Step 4.
Refresh browser
Copy the downloaded JS and CSS folders into your project

Extract the downloaded zip (download again) and grab the two folders. Make sure to place it where it can be reached from your html file.

Alternatively you can run the example using our demo app.

file-copy-arrows

Or you can just simply try and play with the examples right from the folder you just unpacked. You don't find the downloaded example? Download it again.

Include the mobiscroll CSS and JS resources in your files

Add this script before the closing </head> tag of your file

Copy code <link href="css/mobiscroll.javascript.min.css" rel="stylesheet" />
<script src="js/mobiscroll.javascript.min.js"></script>

Make sure to have the CSS and JS files copied over as explained in Step 1.

Copy the code into your app

Grab the relevant parts and drop them into your JS, HTML and CSS files.

Copy JS
Copy HTML
Copy CSS
Take a look at what you've accomplished

Reload your application in your favorite browser

arrow-browser-reload@2x

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

Keep things running smoothly

We have sent an email with verification instructions to you. Please make sure to follow the steps and verify it's you.

In case you fail to verify the account, the trial will be interrupted.

If you have any trouble

Don't hesitate to let us know.

install-help-bck
Simple two minute install guide
Step 1.
Install the CLI
Step 2.
Install Mobiscroll
Step 3.
Copy the code
Step 4.
Run the app
Install the Mobiscroll CLI from npm

You will be able to configure Mobiscroll with ease in your app with the CLI

Copy command $ npm install -g @mobiscroll/cli
Install Mobiscroll in your React project

Run the following command in the root folder of your React project.

Don't have a project? Try it with our demo app.

Copy command $ mobiscroll config react

You will be prompted to log in with your mobiscroll account. Set your password here.

Working behind a proxy?

If you're working behind a proxy server, additional configuration might be needed. Please check the proxy configuration options in the documentation.

Using a CI/CD workflow?

The package will be installed from a private npm registry, which requires authentication. If your project uses a CI/CD workflow, read this guide on how to make it work.

Copy the code into your app

Grab the relevant parts and drop them into your JSX and CSS files.

Copy JSX
Copy TSX
Copy CSS
Take a look at what you've accomplished

Run $ npm start in the root folder of your app

Copy command $ npm start

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

Keep things running smoothly

We have sent an email with verification instructions to you. Please make sure to follow the steps and verify it's you.

In case you fail to verify the account, the trial will be interrupted.

If you have any trouble

Don't hesitate to let us know.

install-help-bck
Simple two minute install guide
Step 1.
Install the CLI
Step 2.
Install Mobiscroll
Step 3.
Copy the code
Step 4.
Run the app
Install the Mobiscroll CLI from npm

You will be able to configure Mobiscroll with ease in your app with the CLI

Copy command $ npm install -g @mobiscroll/cli
Install Mobiscroll in your React project

Run the following command in the root folder of your React project.

Don't have a project? Try it with our demo app.

Copy command $ mobiscroll config ionic

You will be prompted to log in with your mobiscroll account. Set your password here.

Working behind a proxy?

If you're working behind a proxy server, additional configuration might be needed. Please check the proxy configuration options in the documentation.

Using a CI/CD workflow?

The package will be installed from a private npm registry, which requires authentication. If your project uses a CI/CD workflow, read this guide on how to make it work.

Copy the code into your app

Grab the relevant parts and drop them into your TSX and CSS files.

Copy TSX
Copy CSS
Take a look at what you've accomplished

Run $ ionic serve in the root folder of your app

Copy command $ ionic serve

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

Keep things running smoothly

We have sent an email with verification instructions to you. Please make sure to follow the steps and verify it's you.

In case you fail to verify the account, the trial will be interrupted.

If you have any trouble

Don't hesitate to let us know.

install-help-bck
Simple two minute install guide
Step 1.
Install the CLI
Step 2.
Install Mobiscroll
Step 3.
Copy the code
Step 4.
Run the app
Install the Mobiscroll CLI from npm

You will be able to configure Mobiscroll with ease in your app with the CLI

Copy command $ npm install -g @mobiscroll/cli
Install Mobiscroll in your Angular project

Run the following command in the root folder of your Angular project.

Don't have a project? Try it with our demo app.

Copy command $ mobiscroll config angular

You will be prompted to log in with your mobiscroll account. Set your password here.

Working behind a proxy?

If you're working behind a proxy server, additional configuration might be needed. Please check the proxy configuration options in the documentation.

Using a CI/CD workflow?

The package will be installed from a private npm registry, which requires authentication. If your project uses a CI/CD workflow, read this guide on how to make it work.

Copy the code into your app

Grab the relevant parts and drop them into your Component and Template files. Copy the necessary imports into the Module file of your component. For quick testing copy the css to into your project's style.css or style.scss.

Copy TS
Copy HTML
Copy Module
Copy CSS
Take a look at what you've accomplished

Run $ ng serve in the root folder of your app

Copy command $ ng serve

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

Keep things running smoothly

We have sent an email with verification instructions to you. Please make sure to follow the steps and verify it's you.

In case you fail to verify the account, the trial will be interrupted.

If you have any trouble

Don't hesitate to let us know.

install-help-bck
Simple two minute install guide
Step 1.
Install the CLI
Step 2.
Install Mobiscroll
Step 3.
Copy the code
Step 4.
Run the app
Install the Mobiscroll CLI from npm

You will be able to configure Mobiscroll with ease in your app with the CLI

Copy command $ npm install -g @mobiscroll/cli
Install Mobiscroll in your Angular project

Run the following command in the root folder of your Angular project.

Don't have a project? Try it with our demo app.

Copy command $ mobiscroll config ionic

You will be prompted to log in with your mobiscroll account. Set your password here.

Working behind a proxy?

If you're working behind a proxy server, additional configuration might be needed. Please check the proxy configuration options in the documentation.

Using a CI/CD workflow?

The package will be installed from a private npm registry, which requires authentication. If your project uses a CI/CD workflow, read this guide on how to make it work.

Copy the code into your app

Grab the relevant parts and drop them into your Component and Template files. Copy the necessary imports into the Module file of your component. For quick testing copy the css to into your project's global.scss file.

Copy TS
Copy HTML
Copy Module
Copy CSS
Take a look at what you've accomplished

Run $ ionic serve in the root folder of your app

Copy command $ ionic serve

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

Keep things running smoothly

We have sent an email with verification instructions to you. Please make sure to follow the steps and verify it's you.

In case you fail to verify the account, the trial will be interrupted.

If you have any trouble

Don't hesitate to let us know.

install-help-bck
Simple two minute install guide
Step 1.
Install the CLI
Step 2.
Install Mobiscroll
Step 3.
Copy the code
Step 4.
Run the app
Install the Mobiscroll CLI from npm

You will be able to configure Mobiscroll with ease in your app with the CLI

Copy command $ npm install -g @mobiscroll/cli
Install Mobiscroll in your Vue project

Run the following command in the root folder of your Vue project.

Don't have a project? Try it with our demo app.

Copy command $ mobiscroll config vue

You will be prompted to log in with your mobiscroll account. Set your password here.

Working behind a proxy?

If you're working behind a proxy server, additional configuration might be needed. Please check the proxy configuration options in the documentation.

Using a CI/CD workflow?

The package will be installed from a private npm registry, which requires authentication. If your project uses a CI/CD workflow, read this guide on how to make it work.

Copy the code into your app

Grab the relevant parts and drop them into your Vue page.

Copy
Copy
Take a look at what you've accomplished

Run $ npm run dev in the root folder of your app

Copy command $ npm run dev

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

Keep things running smoothly

We have sent an email with verification instructions to you. Please make sure to follow the steps and verify it's you.

In case you fail to verify the account, the trial will be interrupted.

If you have any trouble

Don't hesitate to let us know.

install-help-bck
Simple two minute install guide
Step 1.
Install the CLI
Step 2.
Install Mobiscroll
Step 3.
Copy the code
Step 4.
Run the app
Install the Mobiscroll CLI from npm

You will be able to configure Mobiscroll with ease in your app with the CLI

Copy command $ npm install -g @mobiscroll/cli
Install Mobiscroll in your Ionic Vue project

Run the following command in the root folder of your Ionic Vue project.

Don't have a project? Try it with our demo app.

Copy command $ mobiscroll config ionic

You will be prompted to log in with your mobiscroll account. Set your password here.

Working behind a proxy?

If you're working behind a proxy server, additional configuration might be needed. Please check the proxy configuration options in the documentation.

Using a CI/CD workflow?

The package will be installed from a private npm registry, which requires authentication. If your project uses a CI/CD workflow, read this guide on how to make it work.

Copy the code into your app

Grab the relevant parts and drop them into your Vue page.

Copy
Take a look at what you've accomplished

Run $ npm run dev in the root folder of your app

Copy command $ npm run dev

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

Keep things running smoothly

We have sent an email with verification instructions to you. Please make sure to follow the steps and verify it's you.

In case you fail to verify the account, the trial will be interrupted.

If you have any trouble

Don't hesitate to let us know.

install-help-bck
Customize & try this demo locally
Sign in or start your free trial

We have to set you up with a trial for this to run 👍

Demos
Theme Select
Material
Material Dark
iOS
iOS Dark
Windows
Windows Dark
Language Locale
See other demos and change options
Theme
Locale
See other demos