Datepicker
The Datepicker component is the ultimate tool for selecting a single date and/or time, multiple dates or a date range.
Basic usage
The following example will create a datepicker with the default options.
By default the datepicker will be set up to single date selection with the calendar control.
$(function () {
$("#date").mobiscroll().datepicker();
});
<input id="date"/>
For many more examples - simple and complex use-cases - check out the date picker demos for jquery.
Value Selection
The datepicker can be used in three major areas for selecting dates and times:
- single value selection
- multiple value selection
- range selection
Single Value Selection
This is the default behavior, and it can also be initialized with the select: 'date'
option.
Depending on the controls option, we can use the datepicker this way to select either a single date or a single time or both (a single datetime).
$('#datepicker').mobiscroll().datepicker({
select: 'date',
});
Multiple Value Selection
The selectMultiple
option will enable us to select multiple dates on the calendar.
The selected value in this case will be an array of dates instead of just a single date.
$('#datepicker').mobiscroll().datepicker({
selectMultiple: true,
});
Range Selection
The datepicker can be used to select a date or a time range. The range selection feature can be activated with the select: 'range'
option.
The selected value in this case will be an array of dates with two values: the start and the end.
The controls
option will tell the datepicker what kind of range do we want to select, a date range or a time range.
$('#datepicker').mobiscroll().datepicker({
select: 'range',
});
Controls
The datepicker component can render different kinds of controls on the screen. These controls are referred to as the Calendar view, the Date picker, the Time picker and the Datetime picker. Each of these controls are suitable in different scenarios, depending on the use-case.
For example, the Date picker can be used for selecting a single date, as well as the Calendar view. But only the Calendar view can be used for selecting multiple dates.
$('#myBirthday').mobiscroll().datepicker({
controls: ['date']
});
$('#kidsBirthday').mobiscroll().datepicker({
controls: ['calendar'],
selectMultiple: true,
});
-
The Calendar view can be used for single or multiple date selection as well as date range selection. It is represented by the
'calendar'
string. It is the default of thecontrols
option. -
The Date picker can be used for single date selection or date range selection. It is represented by the
'date'
string. -
The Time picker can be used for single time selection or time range selection. It can also be combined with other controls. It is represented by the
'time'
string. -
The Datetime picker can be used for single date & time selection as well as date & time range selection. It is represented by the
'datetime'
string.
Control combinations
Some controls can't be used in all situations. To have a better user experience, controls can be combined. The controls
options takes an array of strings, with predefined values.
The Time picker control can be combined with either the Calendar view or the Date picker for extending the selection precision.
$('#myAppointment').mobiscroll().datepicker({
controls: ['date', 'time'],
});
$('#myAppointment').mobiscroll().datepicker({
controls: ['calendar', 'time'],
});
Customizing the Input
The datepicker, as explained below, can be used with one, two or no inputs.
Using without inputs
The first choice of input customization is to have no inputs at all. In this case rendering the component in inline display mode will leave out the use of inputs.
<div id="myAppointment"></div>
$('#myAppointment').mobiscroll().datepicker({
display: 'inline',
});
Using with one input
The input element, you initialize the datepicker on, will be the element the formatted value will be filled in. This input element can be customized in any ways you want. You can provide css classes, or html attributes that will be taken into account, when initializing the picker.
<input id="myAppointment" class="any-class-you-want" placeholder="Click to select..." />
$('#myAppointment').mobiscroll().datepicker({
theme: 'ios',
});
Using with two inputs
When selecting a range, you have basically two values to display: the start of the range and the end of the range. These can be shown in different inputs using the startInput and the endInput options.
<input id="start-input" placeholder="Start date" />
<input id="end-input" placeholder="End date" />
<div id="picker"></div>
$('#picker').mobiscroll().datepicker({
select: 'range',
startInput: '#start-input',
endInput: '#end-input'
});
Display modes
The datepicker can operate in two ways from the display option's point of view:
Modal display
Here comes the center
, top
, bottom
displays, and also the anchored
display when the touchUi option is true.
In these display modes, the picker shows up as a modal picker. When open, the selected value is stored as a temporary value until the set button is pressed. At that point the picker is closed and the value is commited to the input.
The above mentioned temporary value, when required, can be manipulated using the getTempVal()
and setTempVal()
instance methods.
Whe the temporary value changes the onTempChange
event is raised.
To get or change the selected value, that's set to the input, the getVal
and setVal
instance methods are available to use.
"Live" selection
Here come the inline
display (which displays as an embedded control) and the anchored
display when the touchUi options is false (on desktop devices).
In this case by default there is no set button to commit the value, so there's no temporary value like when the modal displays are used. What is shown on the picker, that is set directly to the input
To get or change the selected value, that's set to the input, the getVal
and setVal
instance methods are available to use.
Customizing the calendar header
The header of the calendar can be fully customized to one's needs. This can be achieved by passing a function that returns the custom header markup to the renderCalendarHeader option.
$('#datepicker').mobiscroll().datepicker({
renderCalendarHeader: function () {
return '<div class="my-custom-title">My <strong>Awesome</strong> Title</div>';
}
});
While fully customizing the header is very usefull, sometimes it's desireable to customize only parts of it.
In this case you can take advantage of the default header's building blocks. These components let you put toghether the header you want,
while you don't have to worry about the functionality behind them.
For example you can leave out parts from the default header, change the order the default buttons appearance or add custom markup between them.
The built in header components can be initialized with their respective attributes as follows:
<button mbsc-calendar-prev></button>
- Previous button component, that navigates to the previous month.<button mbsc-calendar-next></button>
- Next button component, that navigates to the next month.<button mbsc-calendar-today></button>
- Today button component, that navigates to the current date.<div mbsc-calendar-nav></div>
- The title navigation component, that opens the year/month navigation.
The above built in components can be used inside of the custom header. The following example will render the prev and next buttons and then a custom title that is set from a custom variable (myTitle
variable).
var myTitle = 'My Awesome title';
$('#datepicker).mobiscroll().datepicker({
renderCalendarHeader: function () {
return `<button mbsc-calendar-prev></button>
<button mbsc-calendar-next></button>
<div className="my-custom-title">${myTitle}</div>`;
}
});
Typescript Types
When using with typescript, the following types are available for the Datepicker:
Type | Description |
---|---|
Datepicker | Type of the Datepicker instance |
MbscDatepickerOptions | Type of the settings object that is used to initialize the component |
Options
Name | Type | Default value | Description |
---|---|---|---|
anchor | String, HTMLElement | undefined |
Specifies the anchor element for positioning, if display is set to
'anchored'
.
If undefined, it defaults to the element on which the component was initialized.
|
animation | String, Boolean | undefined |
Animation to use for opening/closing of the control (if display is not inline). Possible values:
false , turns the animation off.
|
buttons | Array |
['set', 'cancel']
|
Buttons to display. Each item in the array will be a button. A button can be specified as a string, or as a button object.
When the passed array does not contain the predefined 'set' button, the auto-selection will be turned on.
Selecting a value on the UI this way, will be set to the input immediately.
If there are more than one wheels shown, the control will close on overlay tap. Otherwise tapping a value on the wheel will also close the control.
If a string, it must be one of the predefined buttons:
If an object, it may have the following properties:
Predefined and custom buttons example
Predefined button handler example
|
calendarScroll | String | 'horizontal' |
Controls the direction the calendar can be navigated. You can navigate by scrolling, swiping or by clicking the arrow buttons in the header.
When navigation is |
calendarSystem | Object | undefined |
Specify the calendar system to be used.
|
calendarType | String | 'month' |
Sets the calendar type. Possible values: In case of In case of |
circular | Boolean, Array | undefined |
If true , the scroll wheels are circular.
If an array, it can be specified as a per wheel configuration,
e.g. for 3 wheels: [true, false, false] - sets the first wheel circular.
If not specified, if a wheel has more values than the number of displayed rows, the scroll wheel becomes circular.
|
closeOnEsc | Boolean | true |
If true, the popup is closed on ESC keypress. |
closeOnOverlayClick | Boolean | true |
If true, the popup is closed on overlay tap/click. |
colors | Array | undefined |
Change the color of certain dates on the calendar. Must be an array of objects with the following properties:
The dates can be specified as Javascript Date objects, ISO 8601 strings, or moment objects.
Example
|
context | String, HTMLElement | 'body' |
The DOM element in which the component is appended and positioned (if not inline). Can be a selector string or a DOM element. |
controls | Array | ['calendar'] |
List of controls to show. Possible values:
|
cssClass | String | undefined |
Applies custom css class to the top level element. |
defaultSelection | Date, String, moment, Array, null | undefined |
Default selection which appears on the picker. The provided value will not be set as picker value, it's only a pre-selection. If not provided, the default selection will be the current date and/or time.
If |
disabled | Boolean | false |
Initial disabled state of the component. |
display | String | undefined |
Controls the positioning of the component. Possible options:
The default display mode depends on the theme,
it defaults to
In desktop mode (when the touchUi option is set to |
endInput | String or HTMLElement | undefined |
Sets the Input for the end date. When using the datepicker to select a range, it can be used with one, two or no inputs. When an endInput is passed to the datepicker, it will put the range end part of the selection to that input. Similarly the input for the begin part can be specified by the startInput option. |
focusOnClose | Boolean, String, HTMLElement |
true
|
Element to focus after the popup is closed.
If undefined , the original element will be focused.
If false , no focusing will occur.
|
focusTrap | Boolean | true |
If not in inline mode, focus won't be allowed to leave the popup. |
fullScreen | Boolean | false |
If true , the popup will appear in full screen, but, by default, its width and height won't exceed 600px.
You can change that using the maxWidth and maxHeight options.
|
headerText | Boolean, String | false |
Specifies a custom string which appears in the popup header. If the string contains the '{value}' substring, it is replaced with the formatted value of the datepicker.If it's set to false , the header is hidden. |
height | Number, String | undefined |
Sets the height of the component. |
invalid | Array | undefined |
An array containing the invalid values.
Must be an array containing dates (Javascript Date objects, ISO 8601 strings, or moment objects),
or objects with the following properties:
|
itemHeight | Number | 40 |
Height in pixels of one item on the wheel.
The default value depends on the theme: iOS: 34 Material: 40 Windows: 44 |
labels | Array | undefined |
Specify labels for calendar days. A label object can have the following properties:
The dates can be specified as Javascript Date objects, ISO 8601 strings, or moment objects.
Example
|
marked | Array | undefined |
Mark certain dates on the calendar. Must be an array containing dates (Javascript Date objects, ISO 8601 strings, or moment objects),
or objects with the following properties:
The dates can be specified as Javascript Date objects, ISO 8601 strings, or moment objects.
Example
|
max | Number | 100 |
Maximum value. |
maxRange | Number | undefined |
It sets the maximum range that can be selected. When selecting a date without the time part, it sets the maximum number of days the selected range can contain. When there is a time part in the selection, it sets the maximum range in milliseconds. |
maxWheelWidth | Number, Array | undefined |
Maximum width of the scroller wheels in pixels. If number, it is applied to all wheels, if an array, it is applied to each wheel separately. |
maxWidth | Number, String | 600 |
Sets the maximum width of the component. |
min | Number | 0 |
Minimum value. |
minRange | Number | undefined |
It sets the minimum range that can be selected. When selecting a date range without the time part, it sets the minimum number of days the selected range can contain. When there is a time part in the selection, it sets the minimum range in milliseconds. |
minWheelWidth | Number, Array | 80 |
Minimum width of the scroller wheels in pixels. If number, it is applied to all wheels, if an array, it is applied to each wheel separately. The default value depends on the theme: iOS: 55 Material: 80 Windows Phone: 88 |
minWidth | Number, String | undefined |
Sets the maximum width of the component. |
pages | Number, String | 1 |
Number of calendar pages (month or week) to display. If 'auto' , the displayed number of pages will be decided based on the viewport size. |
rangeHighlight | Boolean | true |
When selecting a range on the calendar control, it is optional to highlight the dates between the start and end date. By default, the dates are highlighted between the start and end values. When the highlight is turned off, only the start and end dates are shown as selected on the calendar. On desktop devices where a cursor is available, hovering the calendar days also help to visualize the selecting range. The hover styling is also turned off, when the range is not highlighted. |
renderCalendarHeader | Function | undefined |
Use this option to customize the header of the Datepicker. It takes a function that should return the desired markup. In the returned markup, you can use custom html as well as the built in header components of the calendar. Check out the customizing the header section for a more detailed description on built in components. Example with built in components
|
responsive | Object | undefined |
Specify different settings for different viewport widths, in a form of an object,
where the keys are the name of the breakpoints, and the values are objects containing
the settings for the given breakpoint.
There are five predefined breakpoints:
breakpoint
property specifying the min-width in pixels.
Example:
|
returnFormat | String | 'jsdate' |
Specifies the format in which the selected date(s) should be returned by the getVal method
Possible values:
|
rows | Number | 3 |
Number of visible rows on the wheel.
The default value depends on the theme: iOS: 5 Material: 3 Windows: 6 |
scrollLock | Boolean | true |
Disables page scrolling on touchmove (if not in inline mode, and popup height is less than window height). |
select | String | 'date' |
In terms of value selection, the datepicker can be used to select a single date/time or multiple dates/times, as well as a date range or a time range. The select setting defines if the picker is used for selecting independent dates or a range. Possible values are:
|
selectCounter | Boolean | false |
If true and multiple selection is enabled, the number of selected items will be displayed in the header. |
selectMax | Number | undefined |
The maximum number of selected items in case of multiple selection. |
selectMultiple | Boolean | false |
If true , multiple selection will be enabled. |
showArrow | Boolean | true |
Show or hide the popup arrow, when display mode is 'anchored' .
|
showInput | Boolean | true |
If true , it will render an input field for the component. |
showOnClick | Boolean | true |
Opens the component on element click/tap. |
showOnFocus | Boolean |
false - on desktop
true - on mobile
|
Pops up the component on element focus. |
showOuterDays | Boolean | true |
Show or hide days from previous and next months.
Hiding outer days only works in case of month view, and not supported for week view.
Outer days are automatically hidden if calendarScroll is set to |
showOverlay | Boolean | true |
Show or hide overlay. |
showRangeLabels | Boolean | true |
By default when selecting a range, a start and end label is shown on the Datepicker. These labels indicate which part of the range are we selecting (start or end). The labels can also be used to switch the active selection from start to end or vice versa. The The start label text and end label text as well as the start value placeholder and end value placeholder can be localized and/or customized. |
showWeekNumbers | Boolean | false |
Show week numbers on the calendar view. Enumeration starts with the first week of the year. |
startInput | String or HTMLElement | undefined |
Sets the Input for the start date. When using the datepicker to select a range, it can be used with one, two or no inputs. When a startInput is passed to the datepicker, it will put the range beginning part of the selection to that input. Similarly the input for the end part can be specified by the endInput option. |
stepHour | Number | 1 |
Step for the hours scroll wheel. |
stepMinute | Number | 1 |
Step for the minutes scroll wheel. |
stepSecond | Number | 1 |
Step for the seconds scroll wheel. |
tabs | Boolean | undefined |
Show / hide tabs for calendar, date and time controls. If undefined, it is automatically decided to show or hide tabs based on available space. If only one control is passed, tabs are always hidden. |
theme | String | undefined |
Sets the visual appearance of the component.
If it is
Make sure that the theme you set is included in the downloaded package.
|
themeVariant | String | undefined |
Controls which variant of the theme will be used (light or dark). Possible values:
To use the option with custom themes, make sure to create two custom themes,
where the dark version has the same name as the light one, suffixed with |
touchUi | Boolean, String | 'auto' |
Use Can be used with the responsive option to change the user interface based on viewport width.
If set to |
valid | Object | null |
Can be used to override invalid dates and times. E.g. if every Thursday is set to invalid, but you want May 15th, 2014 to be valid, you can do it using the valid option.
The syntax is the same as for the invalid option.
It's important if you want to use the valid setting together with invalid make sure to set: invalid day with valid day, invalid time with valid time or both
invalid date and time with valid date and time. So in case you use an invalid day and a valid time, this will not override the invalid setting.
A sample configuration
|
weeks | Number |
1
|
Number of weeks to display if calendarType is set to 'week' .
|
wheelWidth | Number, Array | undefined |
Width of the scroller wheels, in pixels. Wheel content will be truncated, if it exceeds the width. If number, it is applied to all wheels, if an array, it is applied to each wheel separately. |
width | Number, String | undefined |
Sets the width of the component. |
Events
Name | Description | |
---|---|---|
onCancel(event, inst) |
Allows you to define your own event when cancel is pressed.
Parameters
Example
|
|
onCellClick(event, inst) |
Triggered when a cell is clicked on the calendar or on the schedule grid.
Parameters
Example
|
|
onChange(event, inst) |
Triggered when the value is changed.
Parameters
Example
|
|
onClose(event, inst) |
Triggered when the component is closed.
Parameters
Example
|
|
onDestroy(event, inst) |
Triggered when the component is destroyed.
Parameters
Example
|
|
onInit(event, inst) |
Triggered when the component is initialized.
Parameters
Example
|
|
onLabelClick(event, inst) |
Triggered when a label on the calendar is clicked.
Parameters
Example
|
|
onOpen(event, inst) |
Triggered when the component is opened.
Parameters
Example
|
|
onPageChange(event, inst) |
Triggered when the calendar page is changed (month or week, with buttons or swipe).
Parameters
Example
|
|
onPageLoaded(event, inst) |
Triggered when the calendar page is changed (month or week, with buttons or swipe) and the animation has finished.
Parameters
Example
|
|
onPageLoading(event, inst) |
Triggered before the markup of a calendar page (month or week) is starting to render.
Parameters
Example
|
|
onPosition(event, inst) |
Triggered when the component is positioned (on initial show and resize / orientation change).
Useful if dimensions needs to be modified before the positioning happens, e.g. set a custom width or height. Custom positioning can also be implemented here, in this case, returning false from the handler
function will prevent the built in positioning.
Parameters
Example
|
|
onTempChange(event, inst) |
Triggered when the temporary value is changed.
Parameters
|
Methods
Name | Description | |
---|---|---|
close() |
Closes the component.
ExampleMethods can be called on an instance. For more details see calling methods
|
|
destroy() |
Destroys the component. This will return the element back to its pre-init state.
Returns: Object
ExampleMethods can be called on an instance. For more details see calling methods
|
|
getInst() |
Returns the object instance.
Returns: Object
ExampleMethods can be called on an instance. For more details see calling methods
|
|
getTempVal() |
Returns the temporary value that's selected on the picker.
Depending on how the picker is displayed, the selection might be in a temporary state that hasn't been set yet.
This temporary value can be aquired calling the
The value that has been set to the input can be aquired using the Returns: String, Date, Moment.js Object or Array of String, Date or Moment.js ObjectThe return value type depends on the returnFormat and the select option. |
|
getVal([temp]) | Returns the selected datepicker value.
Parameters
Returns: String
ExampleMethods can be called on an instance. For more details see calling methods
|
|
isVisible() |
Returns a boolean indicating whether the component is visible or not.
Returns: Boolean
ExampleMethods can be called on an instance. For more details see calling methods
|
|
open() |
Opens the component.
ExampleMethods can be called on an instance. For more details see calling methods
|
|
position() |
Recalculates the position of the component (if not inline).
ExampleMethods can be called on an instance. For more details see calling methods
|
|
setOptions(options) |
Update options for the component.
Parameters
ExampleMethods can be called on an instance. For more details see calling methods
|
|
setTempVal(value) |
Sets the temporary value that's selected on the picker.
Depending on how the picker is displayed, the selection shown might be just a temporary value until the users hits the "Set" button to commit the selection.
This temporary value can be adjusted calling the
To get the current temporary value, check out the Parameters
The type of the value parameter depends on the returnFormat and the select options. |
|
setVal(value [, fill ] [, change ] [, temp ] [, time ]) |
Sets the datepicker value.
Parameters
ExampleMethods can be called on an instance. For more details see calling methods |
Localization
Name | Type | Default value | Description |
---|---|---|---|
amText | String | 'am' |
Text for AM. |
cancelText | String | 'Cancel' |
Text for Cancel button. |
clearText | String | 'Clear' |
Text for the clear button. |
dateFormat | String |
'MM/DD/YYYY'
|
The format for parsed and displayed dates.
|
dateWheels | String | undefined |
Display order and formating for month/day/year wheels. Characters have the same meaning as in the
dateFormat option.
The options also controls if a specific wheel should appear or not, e.g. use 'mmyy' to
display month and year wheels only, 'mmD ddy' to display both
day of week and date on the day wheel.
If not specified, the order of the wheels will be taken from the dateFormat option, and the formating will be defined by the theme Starting for 3.0.0-beta5 an experimental feature was introduced to display the whole date on one wheel. To activate this mode, the format of the date should be specified between | charchters:
|
dayNames | Array | ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] |
The list of long day names, starting from Sunday, for use as requested via the dateFormat setting. |
dayNamesMin | Array | ['S', 'M', 'T', 'W', 'T', 'F', 'S'] |
The list of minimal day names, starting from Sunday, for use as requested via the dateFormat setting. |
dayNamesShort | Array | ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] |
The list of abbreviated day names, starting from Sunday, for use as requested via the dateFormat setting. |
daySuffix | String | undefined |
Additional string to display after the day on the wheel. |
firstDay | Number | 0 |
Set the first day of the week: Sunday is 0, Monday is 1, etc. |
headerText | Boolean, String | '{value}' |
Specifies a custom string which appears in the popup header. If the string contains '{value}' substring, it is replaced with the formatted value of the datepicker. If it's set to false , the header is hidden. |
locale | Object | undefined |
Sets the language of the component.
The locale option is an object containing all the translations for a given language.
Mobiscroll supports a number of languages listed below. If a language is missing from the list, it can also be provided by the user. Here's a guide on
how to write language modules.
Supported languages:
|
monthNames | Array | ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] |
The list of full month names, for use as requested via the dateFormat setting. |
monthNamesShort | Array | ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] |
The list of abbreviated month names, for use as requested via the dateFormat setting. |
monthSuffix | String | undefined | Additional string to display after the month on the wheel. |
moreEventsPluralText | String | undefined |
Text for the "more" label on the calendar, when there's not enough space to display all the labels for the day,
and there are more than one extra labels.
The {count} inside the string will be replaced with the number of extra labels.
When not specified, the moreEventsText setting is used for both plural and singular form.
|
moreEventsText | String | '{count} more' |
Text for the "more" label on the calendar, when there's not enough space to display all the labels for the day.
The {count} inside the string will be replaced with the number of extra labels.
Use the moreEventsPluralText as well, if the plural form is different.
|
nowText | String | 'Now' |
Label for the 'Now' button. |
pmText | String | 'pm' |
Text for PM. |
rangeEndHelp | String | 'Please select' |
When selecting a range, it specifies the placeholder text for the end value under the end label. |
rangeEndLabel | String | 'End' |
When selecting a range, it specifies the text of the end label. |
rangeStartHelp | String | 'Please select' |
When selecting a range, it specifies the placeholder text for the start value under the start label. |
rangeStartLabel | String | 'Start' |
When selecting a range, it specifies the text of the start label. |
rtl | Boolean | false |
Right to left display. |
selectedPluralText | String | '{count} selected' |
Specifies the plural form of the amount of selected items according to the rules of particular language. The '{count}' substring will be replaced with the number of selected items. |
selectedText | String | '{count} selected' |
Specifies the amount of selected items according to the rules of particular language. The '{count}' substring will be replaced with the number of selected items. |
setText | String | 'Set' |
Text for Set button. |
timeFormat | String | 'hh:ii A' |
The format for parsed and displayed dates
|
timeWheels | String |
undefined
|
Display order and formating of the time wheels on the datepicker.
Characters have the same meaning as in the timeFormat option.
If not specified, the order of the wheels will be taken from the timeFormat option, and the formating will be defined by the theme Starting for 3.0.0-beta5 an experimental feature was introduced to display the whole time on one wheel. To activate this mode, the format of the time should be specified between | charchters:
|
yearSuffix | String | undefined |
Additional string to display after the year on the wheel. |
Customizing the appearance
While the provided pre-built themes are enough in many use cases, most of the times on top of adapting to a specific platform, you'd also like to match a brand or color scheme. Mobiscroll provides various ways to achieve this:
- Create custom themes using the theme builder - the custom themes can be also built using out theme builder, on a graphical user interface, without any coding, or the need for Sass support in your project.
- Create custom themes using Sass - use this, if you need multiple themes with different color variatons, in case you have pages with different colors, or you'd like to users to customize the colors of your app.
- Override the Sass color variables - the straightforward way to change the colors in one place throughout the application.
Override the Sass Color Variables
A convenient way to customize the colors of the Mobiscroll components is to override the Sass color variables.
Let's say your branding uses a nice red accent color, and you'd like that color to appear on the Mobiscroll components as well,
while still using platform specific themes (e.g. ios
on iOS devices, material
on Android devices, and mobiscroll
on desktop).
You can override the accent color for every theme:
$mbsc-ios-accent: #e61d2a;
$mbsc-material-accent: #e61d2a;
$mbsc-mobiscroll-accent: #e61d2a;
@import "~@mobiscroll/JQuery/dist/css/mobiscroll.jquery.scss"
You can also customize the colors on many levels:
- Theme specific variables (ex.
$mbsc-material-background
,$mbsc-ios-dark-text
) are applied to all components in a theme. Complete list of variables here. - Component specific global variables (ex.
$mbsc-card-background-light
,$mbsc-listview-text-dark
) are applied to all themes for a specific component. - Component and theme specific variables (ex.
$mbsc-ios-dark-form-background
,$mbsc-material-input-text
) are applied to a specific theme and a specific component.
Hereinafter you will see all the variables that are specific to the Datepicker component or affect its look: