Things like
setting a theme
display mode
language
are essential for getting the look & feel right. These settings cut across most controls, so it is something that you can do for every Mobiscroll component. Learn how to use the global settings.
1. Setting the theme
Controlled by the theme property, you can keep the default "Mobiscroll theme” or go with a platform specific theme for iOS, Android and Windows Phone.
Specify a single theme or rely on the auto-theme feature which will set it based on the platform the page is viewed on.
You'll find more information about the theme setting in the API docs.
TIP: If you are looking for more customization, read about how you can change the colors with the theme builder.
JS
theme: 'ios'
2. Setting the display mode
Five different display modes are available:
bottom
top
center
bubble
inline
The first four are modals showing up either at the top or bottom of the screen, right in the center or anchored to the input for the bubble mode (this is especially useful on large screens).
Inline mode is for embedding the control into any markup. Let’s say you don’t want to open a modal for selecting a date and just have it on your page, you can use display: ‘inline’ for that.
TIP: Try this demo with all display modes.
JS
display: 'bottom'
3. Setting the language
Mobiscroll ships with translations. Language files include microcopy, localization settings like date formats, time formats, right-to-left settings...
Set the preferred language with the lang setting.
JS
lang: 'de'
TIP: See if your language is supported on the demo page or add your own translation.
What's next?
Picking the right tool for the job - date, time or both: Go on by deciding between date-only, time-only or combined date & time picker.
Start a free trial: Get started with the Date & Time control by starting a free trial.