Skip to main content
Version: 5.33.0

Datepicker API

Here is a comprehensive list of all the options, events and methods of the Datepicker component.

Options​

Explore the following API options that help you easily configure the Datepicker.

anchor​

HTMLElement

Specifies the anchor element for positioning, if display is set to 'anchored'.

Default value: undefined

animation​

boolean | "pop" | "slide-down" | "slide-up"

Animation to use when the component is opened or closed, if display is not set to 'inline'. Possible values:

  • 'pop'
  • 'slide-down'
  • 'slide-up'

If false, the animation is turned off.

Default value: undefined

ariaLabel​

string

Specifies the accessible name of the picker input.

Default value: undefined

buttons​

Array<string | MbscPopupButton>

Buttons to display on the component. Each item of the array will be a button. A button can be specified as a string, or as a button object.

If a string, it must be one of the predefined buttons:

  • 'ok' - Approve action. Will display the caption specified by the okText option.
  • 'cancel' - Dismisses the popup. Will display the caption specified by the cancelText option.
  • 'close' - Closes the popup. Will display the caption specified by the closeText option.
  • 'set' - Approve action. Will display the caption specified by the setText option.

The MbscPopupButton type has the following properties:

  • color: "success" | "light" | "dark" | "primary" | "secondary" | "danger" | "warning" | "info" - Specifies the predefined color of the button
  • cssClass: string - A custom CSS class that will be applied to the element
  • disabled: boolean - Disabled state of the button
  • handler: MbscPopupPredefinedButton | (event: any) => void - Specifies what happens when the button is pressed. It can be a predefined button handler like 'set', 'cancel' or a custom function.
  • icon: string - When specified, it renders an icon on the button. It requires the name of the icon that should be displayed.
  • keyCode: number | "enter" | "esc" | "space" | Array<number | "enter" | "esc" | "space"> - The key code associated with the button to activate it from keyboard. Can be a single value or multiple value passed as an array. Predefined string values are: 'enter', 'esc', 'space'.
  • text: string - Sets the label of the button
  • variant: "outline" | "standard" | "flat" - The style of the button
Example for using predefined and custom buttons
[
  'set',
  {
    text: 'Custom',
    icon: 'checkmark',
    cssClass: 'my-btn',
    handler: function (event) {
      alert('Custom button clicked!');
    }
  },
  'cancel'
]
Example for using a predefined button handler
[
  'set',
  {
    text: 'Hide',
    handler: 'cancel',
    icon: 'close',
    cssClass: 'my-btn'
  }
]

Default value: ['set', 'cancel']

calendarScroll​

"horizontal" | "vertical"

Controls the direction of the calendar navigation. You can navigate by scrolling, swiping or by clicking the arrow buttons in the header. Possible values:

  • 'horizontal' - Enables navigating the view horizontally.
  • 'vertical' - Enables navigating the view vertically. When navigation is 'vertical', the outer days (days from previous and next months) are hidden. You can explicitly override it with the showOuterDays option.

Default value: 'horizontal'

calendarSize​

number

Number of months or weeks to display. The view starts from a reference date defined by refDate option.

Default value: 1

calendarType​

"month" | "year" | "week"

Specifies the type of the calendar.

In case of 'month' set the number of displayed months using the pages option (swipeable month view) or the calendarSize option (grid month view).

In case of 'week' set the number of displayed weeks using the calendarSize option.

Default value: 'month'

circular​

boolean | Array<boolean>

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 the displayed rows, the scroll wheel becomes circular.

Default value: undefined

closeOnEsc​

boolean

If true, the popup is closed when the ESC key is pressed.

Default value: true

closeOnOverlayClick​

boolean

If true, the popup is closed on overlay click or tap.

Default value: true

colors​

Array<MbscCalendarColor>

Specifies the color for certain dates or date ranges on the calendar.

The MbscCalendarColor type has the following properties:

  • allDay: boolean - Specifies whether the date you want to color is all day or not.
  • background: string - Background color of the cell. It can be any valid CSS color ('red', '#ff0000', 'rgb(255, 0, 0)', etc.).
  • cellCssClass: string - CSS class for the day cell. Only applicable for the calendar view.
  • cssClass: string - Specifies a custom CSS class for the color. Useful when customization is needed for the background of cells and time ranges. Only applicable for the timeline and scheduler views.
  • date: string | object | Date - Specifies a single date for the color
  • end: string | object | Date - Specifies the end date/time of a date/time range for the color
  • highlight: string - Highlight color of the day, can be any valid CSS color ('red', '#ff0000', 'rgb(255, 0, 0)', etc.).
  • recurring: string | MbscRecurrenceRule - Specifies a recurrence rule for handling recurring days.
  • recurringException: string | object | Date | Array<string | object | Date> - Exception dates of the recurring rule. Useful when specific dates need to be skipped from the rule.
  • recurringExceptionRule: string | MbscRecurrenceRule - Exception rule of the recurring rule. Useful when recurring dates need to be skipped from the rule.
  • resource: string | number | Array<string | number> - In case of the timeline and scheduler view of the Eventcalendar, specifies the resource ids for the color. The color will be displayed only on the specified resource. If there is no resource defined, it will be applied to every resource.
  • slot: string | number - In case of the timeline view of the Eventcalendar, specifies the slot id for the color. The color will be displayed only on the specified slot. If there is no slot defined, it will be applied to every slot.
  • start: string | object | Date - Specifies the start date/time of a date/time range for the color
  • textColor: string - A color applied on the text.
  • title: string - A title that will be displayed on the item.
info

The colored range will be considered all-day if:

  • the allDay property is explicitly set.
  • the start / end properties are not specified, only the date.
info

The dates can be specified as JavaScript Date objects, ISO 8601 strings, or moment objects.

info

The colors can be combined with the labels or marked options.

[
  { date: new Date(2020, 2, 23), background: 'pink' },
  { date: new Date(2020, 2, 24), background: 'green' },
  { background: '#ff0000', recurring: { repeat: 'weekly', weekDays: 'SU' } },
  { background: 'yellow', recurring: { repeat: 'weekly', weekDays: 'SA' } }
]

Default value: undefined

context​

string | HTMLElement

The DOM element in which the component is appended and positioned (when not inline). Can be a selector string or a DOM element.

Default value: 'body'

controls​

Array<MbscDatepickerControl>

List of controls to display on the picker. Possible values:

  • ['calendar']
  • ['calendar', 'time']
  • ['date']
  • ['datetime']
  • ['date', 'time']
  • ['time']
  • ['timegrid']

Default value: ['calendar']

cssClass​

string

Specifies a custom CSS class for the component.

Default value: undefined

dataTimezone​

string

The timezone in which the data is interpreted. If the data contains timezone information (when the ISO string has a timezone offset, e.g. "2021-03-28T01:00:00Z" or "2021-03-28T03:00:00+03:00") then the data's timezone is used instead.

info

When using timezones, the exclusiveEndDates option is also turned on by default.

info

When using anything other than the default ('local'), a timezone plugin must be also passed to the component.

Possible values:

  • 'local' - The system's local timezone.
  • 'utc' - UTC (Universal Coordinated Time) timezone.
  • Timezone name - The timezone name from the IANA time zone database, e.g. "America/New_York".

If not specified, it defaults to the displayTimezone.

Default value: undefined

defaultSelection​

any

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 null is passed, in case of the calendar control there will be no selected value, in case of scroller controls the current date and time will still be displayed on the selected line, as an empty value cannot be displayed on the scroller.

Default value: undefined

disabled​

boolean

Specifies the disabled state of the input.

Default value: false

display​

MbscPopupDisplay

Controls the positioning of the component. Possible values are:

  • 'center' - The component appears as a popup at the center of the viewport.
  • 'inline' - The component is rendered inline.
  • 'anchored' - The component appears positioned to the element defined by the anchor option.
  • 'top' - The component appears docked to the top of the viewport.
  • 'bottom' - The component appears docked to the bottom of the viewport.

The default display mode depends on the theme, it defaults to 'bottom' for the iOS theme and to 'center' for all other themes.

Default value: undefined

displayTimezone​

string

The timezone in which the data is displayed.

info

When using timezones, the exclusiveEndDates option is also turned on by default.

info

When using anything other than the default ('local'), a timezone plugin must be also passed to the component.

Possible values:

  • 'local' - The system's local timezone.
  • 'utc' - UTC (Universal Coordinated Time) timezone.
  • Timezone name - The timezone name from the IANA time zone database, e.g. "America/New_York".

Default value: 'local'

endIcon​

string

Specifies the icon which will be displayed at the end of the input. Use the startIcon option for specifying an icon at the start.

Default value: undefined

endInput​

any

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 the endInput is specified, it will put the range end part of the selection to that input. Similarly the input for the range start can be specified using the startInput option.

Default value: undefined

error​

boolean

If true, the input will be displayed with error styles.

Default value: false

errorMessage​

string

Error message for the input. If the error option is set to true, the message will be displayed.

Default value: undefined

exclusiveEndDates​

boolean

If true, the picker will work in exclusive end dates mode, meaning that the last moment of the range (selected value, colors, invalids, marked days etc.) is not part of the range.

For example, when selecting a date range without the time part, selecting '2021-07-20' for the range end, the underlying value will return '2021-07-21' instead, because the range ends on the 21st, not including the 21st.

info

When using timezones, the exclusiveEndDates option will default to true.

Default value: false

firstSelectDay​

number

Sets the first day of the selection, when 'preset-range' selection is used. It takes a number representing the day of the week, * Sunday is 0, Monday is 1, etc.

If not specified, it defaults to the first day of the week defined by the localization.

The length of the selection can be controlled with the selectSize option.

Default value: undefined

focusOnClose​

boolean

If true, after closing the popup the focus will be moved to the last focused element before the popup was opened.

Default value: true

focusOnOpen​

boolean

If true, the popup will receive the focus when opened.

Default value: true

focusTrap​

boolean

If true and display is not set to 'inline', focus won't be allowed to leave the popup.

Default value: true

headerText​

string

Specifies a custom string which appears in the picker header. If it contains the '{value}' string, it will be replaced with the selected value of the picker.

Default value: undefined

inRangeInvalid​

boolean

In case of range selection, specifies if invalid dates are allowed between the start and end dates.

When set to false, the end selection will be limited to the next invalid date from the selected start date.

For example, when designing a booking system, a possible solution for already booked dates is to set those dates to invalid. When considering check-in and check-out selections with the datepicker, in some cases it is desireable to be able to check out on dates that already have a check-in. In this case, those dates would be disabled. Using the rangeEndInvalid option it can be allowed that the first invalid day after the start date can be selected as end date.

Default value: false

inputComponent​

any

The input component to render if the picker is modal If not specified, it will render a Mobiscroll Input component.

Props can be specified using the inputProps option.

Default value: undefined

inputProps​

any

Props for the rendered input, specified by the inputComponent option.

Default value: undefined

inputStyle​

"outline" | "box" | "underline"

Specifies the style of the input. Possible values:

  • 'underline'
  • 'box'
  • 'outline'

The default value depends on the theme:

  • iOS: 'underline'
  • Material: 'box'
  • Windows: 'outline'

Default value: undefined

inputTyping​

boolean

Allow the typing into the input field in desktop mode.

Default value: true

invalid​

Array<MbscDateType> | Array<IValidateProps>

An array containing the invalid values. Can contain dates, or objects with the following properties:

  • allDay: boolean - Specifies whether the invalid range is all day or not.
  • start: Date | string | object - Start of the invalid range.
  • end: Date, string | object - End of the invalid range.
  • recurring: string | object - Recurrence rule for recurring invalid ranges.
  • recurringException: string | object | Array<string | object> - Exception dates of the recurring rule. Useful when specific dates need to be skipped from the rule.
  • recurringExceptionRule: string | object - Exception rule of the recurring rule. Useful when recurring dates need to be skipped from the rule.
  • resource: string | number | Array<string | number> - Specifies the resource ids for the invalid range. The invalid range will be displayed only in the specified resource. If there is no resource defined, the invalid range will be displayed in every resource.
  • slot: string | number - Specifies the slot id for the invalid range. The invalid range will be displayed only in the specified slot. If there is no slot defined, the invalid range will be displayed in every slot.
  • title: string - Text which will be displayed for the invalid range. Only applicable for the timeline and scheduler views.
info

The dates can be specified as JavaScript Date objects, ISO 8601 strings, or moment objects.

[
  // Passing exact dates and times
  new Date(2021, 1, 7), // Date object
  '2021-10-15T12:00', // ISO 8601 string
  moment('2020-12-25'), // moment object

  // Passing invalid ranges
  {
    // ISO 8601 strings
    start: '2021-10-15T12:00',
    end: '2021-10-18T13:00',
    title: 'Company 10th anniversary',
  },
  {
    // Date objects
    allDay: true,
    start: new Date(2021, 2, 7),
    end: new Date(2021, 2, 9),
    title: 'Conference for the whole team',
  },
  {
    // Time range with recurrence
    start: '13:00',
    end: '12:00',
    recurring: { repeat: 'weekly', weekDays: 'MO,TU,WE,TH,FR' },
    title: 'Lunch break',
  },
  {
    // Disable weekends
    recurring: {
      repeat: 'weekly',
      weekDays: 'SA,SU'
    }
  }
]

Default value: undefined

isOpen​

boolean

Specifies if the component is opened or not. Use it together with the onClose event, by setting it to false when the component closes.

Default value: false

itemHeight​

number

Height in pixels of one item on the wheel. The default value depends on the theme:

  • iOS: 34
  • Material: 40
  • Windows: 44

label​

string

Specifies the label of the input.

Default value: undefined

labelStyle​

"inline" | "floating" | "stacked"

Specifies the position of the input label. Possible values:

  • 'stacked'
  • 'inline'
  • 'floating'

The default value depends on the theme:

  • iOS: 'inline'
  • Material: 'floating'
  • Windows: 'stacked'

Default value: undefined

labels​

Array<MbscCalendarLabel>

Specifies labels for calendar days.

The MbscCalendarLabel type has the following properties:

  • cellCssClass: string - CSS class for the day cell. Only applicable for the calendar view.
  • color: string - Background color of the label.
  • cssClass: string - Specifies a custom CSS class that is applied to the label.
  • date: string | object | Date - Specifies a single date for the label
  • end: string | object | Date - Specifies the end date/time of a date/time range for the label
  • order: number - Specifies the order of the label in the array. Has precedence over the default ordering rules.
  • recurring: string | MbscRecurrenceRule - Specifies a recurrence rule for handling recurring days.
  • recurringException: string | object | Date | Array<string | object | Date> - Exception dates of the recurring rule. Useful when specific dates need to be skipped from the rule.
  • recurringExceptionRule: string | MbscRecurrenceRule - Exception rule of the recurring rule. Useful when recurring dates need to be skipped from the rule.
  • start: string | object | Date - Specifies the start date/time of a date/time range for the label
  • textColor: string - A color applied on the text.
  • title: string - The title of the label.
  • tooltip: string - Tooltip for the label
info

The dates can be specified as JavaScript Date objects, ISO 8601 strings, or moment objects.

info

The labels can be combined with the colors option.

[
  {
    start: new Date(2020, 2, 23),
    end: new Date(2020, 2, 24),
    text: 'Conference',
    color: 'red'
  },
  {
    text: 'Christmas',
    recurring: { repeat: 'yearly', month: 12, day: 24 }
  }
]

Default value: undefined

marked​

Array<MbscCalendarMarked>

Mark certain dates on the calendar. An array containing dates, or objects with the following properties:

The MbscCalendarMarked type has the following properties:

  • cellCssClass: string - CSS class for the day cell. Only applicable for the calendar view.
  • color: string - Color of the mark.
  • date: string | object | Date - Specifies a single date when this is applicable
  • end: string | object | Date - Specifies the end date/time of a date/time range when this is applicable
  • markCssClass: string - CSS class for the mark.
  • recurring: string | MbscRecurrenceRule - Specifies a recurrence rule for handling recurring days.
  • recurringException: string | object | Date | Array<string | object | Date> - Exception dates of the recurring rule. Useful when specific dates need to be skipped from the rule.
  • recurringExceptionRule: string | MbscRecurrenceRule - Exception rule of the recurring rule. Useful when recurring dates need to be skipped from the rule.
  • start: string | object | Date - Specifies the start date/time of a date/time range when this is applicable
  • textColor: string - A color applied on the text.
  • title: string - A title that will be displayed on the item.
info

The dates can be specified as JavaScript Date objects, ISO 8601 strings, or moment objects.

info

The marked days can be combined with the colors option.

[
  new Date(2020, 2, 15),
  new Date(2020, 2, 22),
  {
    start: new Date(2020, 2, 23),
    end: new Date(2020, 2, 24),
    color: 'red'
  },
  {
    color: 'green',
    recurring: { repeat: 'yearly', month: 12, day: 24 }
  }
]

Default value: undefined

max​

MbscDateType

Maximum value that can be selected.

Default value: undefined

maxHeight​

string | number

Sets the maximum height of the component. If not specified, on larger screens (>=768px width) it defaults to 600px.

Default value: undefined

maxRange​

number

Sets the maximum range that can be selected. When selecting a date range 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.

Default value: undefined

maxTime​

MbscDateType

It sets the maximum time that is selectable on the time or the timegrid control.

When there is a date part of the selection, the maximum is applied to each day. For example maxTime: '18:00' will limit the time part of the selection to at most 18 o'clock each day, in contrast to the max option, which will limit the date part of the selection as well. For example: max: '2021-08-22T18:00 will limit the selection to August 22nd 18 o'clock, but will allow selection of times past 18 o'clock on dates before August 22nd.

info

This option can't be used with the 'datetime' control.

Default value: undefined

maxWheelWidth​

number | Array<number>

Maximum width of the scroller wheels in pixels. If a number, it is applied to all wheels, if an array, it is applied to each wheel separately.

Default value: undefined

maxWidth​

string | number

Sets the maximum width of the component.

Default value: undefined

min​

MbscDateType

Minimum value that can be selected.

Default value: undefined

minRange​

number

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.

Default value: undefined

minTime​

MbscDateType

It sets the minimum time that is selectable on the time or the timegrid control.

When there is a date part of the selection, the minimum is applied to each day. For example minTime: '08:00' will limit the time part of the selection to at least 8 o'clock each day. in contrast to the min option, which will limit the date part of the selection as well. For example: min: '2021-08-22T08:00 will limit the selection to August 22nd 8 o'clock, but will allow selection of times earlier than 8 o'clock on dates after August 22nd.

info

This option can't be used with the 'datetime' control.

Default value: undefined

minWheelWidth​

number | Array<number>

Minimum width of the scroller wheels in pixels. If a number, it is applied to all wheels, if an array, it is applied to each wheel separately.

Default value: undefined

moment​

any

Reference to the Moment.js library. Needed when using Moment objects as return values.

Default value: undefined

pages​

number | "auto"

Number of calendar pages (month or week) to display. If 'auto', the displayed number of pages will be decided based on the viewport size.

Default value: 1

rangeEndInvalid​

boolean

When true, it enables the end date to be selected on the first invalid date that comes after the selected start date.

For example, When designing a booking system, a possible solution for already booked dates is to set those dates to invalid. When considering check-in and check-out selections with the datepicker, in some cases it is desireable to be able to check out on dates that already have a check-in. In this case, those dates would be disabled. With this option it can be enabled, so the selection's end can be on the same day the first invalid is.

info

When the inRangeInvalid option is set to true (default), this option is ignored, so make sure to turn that off too if you want to use this one.

Default value: false

rangeHighlight​

boolean

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.

Default value: true

refDate​

MbscDateType

Specifies the reference date of the component, which represents when to start to calculate the view you want to display.

For example, if you want to display 2 months from the current month, you must specify the first day of the current month as the reference date. Then you can use the calendarSize option to show 2 months.

Default value: '1970/01/01'

responsive​

MbscResponsiveOptions<MbscDatepickerOptions>

Specifies different options for different container widths, in a form of an object, where the keys are the name of the breakpoints, and the values are objects containing the options for the given breakpoint.

info

The available width is queried from the container element of the component and not the browsers viewport like in css media queries

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

Custom breakpoints can be defined by passing an object containing the breakpoint property specifying the min-width in pixels. Example:

responsive: {
  small: {
    display: 'bottom'
  },
  custom: { // Custom breakpoint
    breakpoint: 600,
    display: 'center'
  },
  large: {
    display: 'anchored'
  }
}

Default value: undefined

returnFormat​

"locale" | "jsdate" | "iso8601" | "moment"

Specifies the format in which the selected dates are returned.

  • 'jsdate' - JavaScript date object.
  • 'iso8601' - ISO 8601 date string.
  • 'locale' - Formatted date string based on the locale option, or the dateFormat and timeFormat options, if they are specified.
  • 'moment' - Moment object. Ensure that moment.js is loaded and passed through the moment option.
info

When using a timezone plugin, the returned values are always in 'iso8601' format and this option is not taken into account.

Default value: 'jsdate'

rows​

number

Number of visible rows on the wheel. The default value depends on the theme:

  • iOS: 5
  • Material: 3
  • Windows: 6

select​

"date" | "range" | "preset-range"

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. It is also possible to select a week or a part of the week as a range.

The select option defines if the picker is used for selecting independent dates or a range.

Possible values are:

  • 'date' - Used for single or multiple date/time selection.
  • 'range' - Used for date range or time range selection.
  • 'preset-range' - Used for a week range selection.

Default value: 'date'

selectCounter​

boolean

If true and multiple selection is enabled, the number of selected items will be displayed in the header.

Default value: false

selectMax​

number

The maximum number of selected items in case of multiple selection.

Default value: undefined

selectMultiple​

boolean

If true, multiple selection will be enabled.

Default value: false

selectSize​

number

Sets the length of the selection in days when preset-range selection is used.

The start of the selection can be set using the firstSelectDay option and will have the specified length.

It defaults to a full week (7 days).

Default value: 7

separator​

string

Separator between date and time in the formatted date string.

Default value: ' '

showArrow​

boolean

Show or hide the popup arrow, when display is 'anchored'.

Default value: true

showInput​

boolean

If true, it will render an input field for the component.

Default value: true

showOnClick​

boolean

Opens the component on element click/tap.

Default value: true

showOnFocus​

boolean

Opens the component on element focus.

Default value: false on desktop, true on mobile

showOuterDays​

boolean

Show or hide days from previous and next months.

info

Hiding outer days only works in case of month view, and not supported for week view.

info

Outer days are automatically hidden if calendarScroll is set to 'vertical'.

Default value: true

showOverlay​

boolean

Show or hide the popup overlay.

Default value: true

showRangeLabels​

boolean

Show or hide the range labels.

When selecting a range, a start and end label is displayed on the picker. 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 start label text and end label text as well as the start value placeholder and the end value placeholder can be customized.

Default value: true

showWeekNumbers​

boolean

Show week numbers on the calendar view. Enumeration starts with the first week of the year.

Default value: false

startIcon​

string

Specifies the icon which will be displayed at the start of the input. Use the endIcon option for specifying an icon at the end.

Default value: undefined

startInput​

any

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 the startInput is specified, it will put the range start part of the selection to that input. Similarly the input for the range end can be specified using the endInput option.

Default value: undefined

stepHour​

number

Step for the hours scroll wheel. Also, sets the hours step for the timegrid.

Default value: 1

stepMinute​

number

Step for the minutes scroll wheel. Also, sets the minutes step for the timegrid.

Default value: 1

stepSecond​

number

Step for the seconds scroll wheel. Also, sets the seconds step for the timegrid.

Default value: 1

tagInput​

boolean

If true and used with multiple selection, it will display the selected values inside the input as tags (chips).

Default value: false

theme​

string

Specifies the visual appearance of the component.

If it is 'auto' or undefined, the theme will automatically be chosen based on the platform. If custom themes are also present, they will take precedence over the built in themes, e.g. if there's an iOS based custom theme, it will be chosen on the iOS platform instead of the default iOS theme.

Supplied themes:

  • 'ios' - iOS theme
  • 'material' - Material theme
  • 'windows' - Windows theme

It's possible to modify theme colors or create custom themes.

info

Make sure that the theme you set is included in the downloaded package.

Default value: undefined

themeVariant​

"auto" | "light" | "dark"

Controls which variant of the theme will be used (light or dark).

Possible values:

  • 'light' - Use the light variant of the theme.
  • 'dark' - Use the dark variant of the theme.
  • 'auto' or undefined - Detect the preferred system theme on devices where this is supported.

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 '-dark', e.g.: 'my-theme' and 'my-theme-dark'.

Default value: undefined

timezonePlugin​

MbscTimezonePlugin

Specifies the timezone plugin, which can handle the timezone conversions.

By default the component uses the local timezone of the browser to interpret dates. If you want to interpret dates a different timezone, you will need an external library to handle the timezone conversions. There are two supported libraries: moment-timezone and luxon.

You can specify either the dataTimezone or the displayTimezone or both.

Depending on which external library you use you can pass either the momentTimezone or luxonTimezone objects. These objects can be imported from the mobiscroll bundle.

Default value: undefined

The MbscTimezonePlugin type has the following properties:

  • createDate: (s: any, year: string | number | Date | MbscTimezonedDate, month: number, date: number, h: number, min: number, sec: number, ms: number) => MbscTimezonedDate -
  • parse: (date: string | number, s: any) => MbscTimezonedDate -

valid​

Array<MbscDateType> | Array<IValidateProps>

An array containing the valid values. Use it when it's more convenient to specify valid values instead of the invalid ones. If specified, everything else is considered to be invalid, and the invalid option will be ignored.

Can contain dates, or objects with the following properties:

  • allDay: boolean - Specifies whether the valid range is all day or not.
  • start: Date | string | object - Start of the valid range.
  • end: Date, string | object - End of the valid range.
  • recurring: string | object - Recurrence rule for recurring valid ranges.
  • recurringException: string | object | Array<string | object> - Exception dates of the recurring rule. Useful when specific dates need to be skipped from the rule.
  • recurringExceptionRule: string | object - Exception rule of the recurring rule. Useful when recurring dates need to be skipped from the rule.
info

The dates can be specified as JavaScript Date objects, ISO 8601 strings, or moment objects.

[
  // Passing exact dates and times
  new Date(2021, 1, 7), // Date object
  '2021-10-15T12:00', // ISO 8601 string
  moment('2020-12-25'), // moment object

  // Passing invalid ranges
  {
    // ISO 8601 strings
    start: '2021-10-15T12:00',
    end: '2021-10-18T13:00',
    title: 'Company 10th anniversary',
  },
  {
    // Date objects
    allDay: true,
    start: new Date(2021, 2, 7),
    end: new Date(2021, 2, 9),
    title: 'Conference for the whole team',
  },
  {
    // Time range with recurrence
    start: '13:00',
    end: '12:00',
    recurring: { repeat: 'weekly', weekDays: 'MO,TU,WE,TH,FR' },
    title: 'Lunch break',
  },
  {
    // Disable weekends
    recurring: {
      repeat: 'weekly',
      weekDays: 'SA,SU'
    }
  }
]

Default value: undefined

wheelWidth​

number | Array<number>

Width of the scroller wheels, in pixels. Wheel content will be truncated, if it exceeds the width. If a number, it is applied to all wheels, if an array, it is applied to each wheel separately.

Default value: undefined

Events​

The Datepicker 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.

onActiveDateChange​

(args: MbscDatepickerActiveDateChangeEvent, inst: DatepickerBase) => void

Triggered when the active date changes from start to end or vice versa, in case of range selection mode.

Parameters:

  • args - The event argument with the following properties:

    • active: string - The activated part of the range, 'start' or 'end'.

  • inst - The component instance.

onCancel​

(args: MbscDatepickerCancelEvent, inst: DatepickerBase) => void

Triggered when the picker is canceled.

Parameters:

  • args - The event argument with the following properties:

    • value: MbscDateType | MbscDateType[] - The selected value.
    • valueText: string - The selected value as text.

  • inst - The component instance.

onCellClick​

(args: MbscDatepickerCellClickEvent, inst: DatepickerBase) => void

Triggered when a cell is clicked on the calendar.

Parameters:

  • args - The event argument with the following properties:

    • date: Date - The date of the clicked cell.
    • domEvent: Event - The DOM event of the click.
    • selected: boolean - Specifies if the day is currently selected or not (before it was clicked).
    • target: HTMLElement - The DOM element of the clicked cell.

  • inst - The component instance.

onCellHoverIn​

(args: MbscDatepickerCellHoverEvent, inst: DatepickerBase) => void

Triggered when the mouse pointer hovers a day on the calendar.

Parameters:

  • args - The event argument with the following properties:

    • date: Date - The date of the hovered day.
    • labels: Array<MbscCalendarLabel> - If the day has labels, contains the label objects for the hovered day.
    • marked: Array<MbscCalendarMarked> - If the day is marked, contains the marked objects for the hovered day.
    • selected: boolean - Specifies if the day is currently selected or not.
    • target: HTMLElement - The DOM element of the cell.

  • inst - The component instance.

onCellHoverOut​

(args: MbscDatepickerCellHoverEvent, inst: DatepickerBase) => void

Triggered when the mouse pointer leaves a day on the calendar view (does not apply for agenda, schedule and timeline views).

Parameters:

  • args - The event argument with the following properties:

    • date: Date - The date of the hovered day.
    • labels: Array<MbscCalendarLabel> - If the day has labels, contains the label objects for the hovered day.
    • marked: Array<MbscCalendarMarked> - If the day is marked, contains the marked objects for the hovered day.
    • selected: boolean - Specifies if the day is currently selected or not.
    • target: HTMLElement - The DOM element of the cell.

  • inst - The component instance.

onChange​

(args: MbscDatepickerChangeEvent, inst: DatepickerBase) => void

Triggered when the value is changed.

Parameters:

  • args - The event argument with the following properties:

    • value: MbscDateType | MbscDateType[] - The selected value.
    • valueText: string - The selected value as text.

  • inst - The component instance.

onClose​

(args: MbscDatepickerCloseEvent, inst: DatepickerBase) => void

Triggered when the picker is closed.

Parameters:

  • args - The event argument with the following properties:

    • value: MbscDateType | MbscDateType[] - The selected value.
    • valueText: string - The selected value as text.

  • inst - The component instance.

onDestroy​

(args: any, inst: any) => void

Triggered when the component is destroyed.

Parameters:

  • args - The event argument object.

  • inst - The component instance.

onInit​

(args: any, inst: any) => void

Triggered when the component is initialized.

Parameters:

  • args - The event argument object.

  • inst - The component instance.

onLabelClick​

(args: MbscDatepickerLabelClickEvent, inst: DatepickerBase) => void

Triggered when a label is clicked on the calendar.

Parameters:

  • args - The event argument with the following properties:

    • date: Date - The date of the day on which the label was clicked.
    • domEvent: Event - The DOM event of the click.
    • label: MbscCalendarLabel - The original object of the label which was clicked, undefined in case of the "more" label.
    • labels: Array<MbscCalendarLabel> - An array containing each label object for the given day.
    • target: HTMLElement - The DOM element of the label.

  • inst - The component instance.

onOpen​

(args: MbscDatepickerOpenEvent, inst: DatepickerBase) => void

Triggered when the picker is opened.

Parameters:

  • args - The event argument with the following properties:

    • target: HTMLElement - The DOM element of the popup.
    • value: MbscDateType | MbscDateType[] - The selected value.
    • valueText: string - The selected value as text.

  • inst - The component instance.

onPageChange​

(args: MbscDatepickerPageChangeEvent, inst: DatepickerBase) => void

Triggered when the calendar page is changed (with buttons or swipe).

Parameters:

  • args - The event argument with the following properties:

    • firstDay: Date - The first day of the displayed page.
    • lastDay: Date - The last day of the displayed page.
    • month: Date - The first day of the visible month in case of month view.

  • inst - The component instance.

onPageLoaded​

(args: MbscDatepickerPageLoadedEvent, inst: DatepickerBase) => void

Triggered when the calendar page is changed (with buttons or swipe) and the view finished rendering.

Parameters:

  • args - The event argument with the following properties:

    • firstDay: Date - The first day of the displayed page.
    • lastDay: Date - The last day of the displayed page.
    • month: Date - The first day of the visible month in case of month view.

  • inst - The component instance.

onPageLoading​

(args: MbscDatepickerPageLoadingEvent, inst: DatepickerBase) => void

Triggered before the markup of a calendar page is starting to render.

Parameters:

  • args - The event argument with the following properties:

    • firstDay: Date - The first day of the displayed page.
    • lastDay: Date - The last day of the displayed page.
    • month: Date - The first day of the visible month in case of month view.

  • inst - The component instance.

onTempChange​

(args: MbscDatepickerTempChangeEvent, inst: DatepickerBase) => void

Triggered when the temporary value is changed.

Parameters:

  • args - The event argument with the following properties:

    • value: MbscDateType | MbscDateType[] - The selected value.

  • inst - The component instance.

Localization​

The Datepicker is fully localized. This covers date and time format, button copy, rtl and more.

amText​

string

Text for AM.

Default value: 'am'

calendarSystem​

MbscCalendarSystem

Specifies the calendar system to be used. Supported calendars:

  • Gregorian - Gregorian calendar. This is the default calendar system.
  • Jalali - Persian calendar. The Farsi language needs to be included to the package.
  • Hijri - Hijri calendar. The Arabic language needs to be included to the package

Default value: undefined

cancelText​

string

Text for the "Cancel" button.

Default value: 'Cancel'

closeText​

string

Text for the "Close" button.

Default value: 'Close'

dateFormat​

string

The format for parsed and displayed dates:

  • M - month of year (no leading zero)
  • MM - month of year (two digit)
  • MMM - month name short
  • MMMM - month name long
  • D - day of month (no leading zero)
  • DD - day of month (two digit)
  • DDD - day of week (short)
  • DDDD - day of week (long)
  • YY - year (two digit)
  • YYYY - year (four digit)
  • '...' - literal text
  • '' - single quote
  • anything else - literal text

Default value: 'MM/DD/YYYY'

dateFormatFull​

string

Human readable date format, used by screen readers to read out full dates. Characters have the same meaning as in the dateFormat option.

Default value: 'DDDD, MMMM D, YYYY'

dateText​

string

Specifies the accessibility label for the date wheel.

Default value: 'Date'

dateWheels​

string

Display order and formatting 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 'MMMMYYYY' to display month and year wheels only, 'MMDDD DDYYYY' 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 formatting will be defined by the theme.

To display the whole date on one wheel, the format of the date should be specified between | characters:

dateWheels: '|DDD MMM D|' // Will produce 'Sun Sep 9'

Default value: undefined

dayNames​

Array<string>

The list of long day names, starting from Sunday.

Default value: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']

dayNamesMin​

Array<string>

The list of minimal day names, starting from Sunday.

Default value: ['S', 'M', 'T', 'W', 'T', 'F', 'S']

dayNamesShort​

Array<string>

The list of abbreviated day names, starting from Sunday.

Default value: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']

daySuffix​

string

Additional string to display after the day on the wheel.

Default value: undefined

dayText​

string

Specifies the accessibility label for the day wheel.

Default value: 'Day'

firstDay​

number

Set the first day of the week: Sunday is 0, Monday is 1, etc.

Default value: 0

hourText​

string

Specifies the accessibility label for the hour wheel.

Default value: 'Hour'

locale​

string | MbscLocale

Sets the language of the component. The locale object contains all the translations for a given language. The built in language modules are listed below. If a language is not listed, it can be provided as a custom language module.

Supported values:

  • Arabic: localeAr, 'ar'
  • Bulgarian: localeBg, 'bg'
  • Catalan: localeCa, 'ca'
  • Czech: localeCs, 'cs'
  • Chinese: localeZh, 'zh'
  • Croatian: localeHr, 'hr'
  • Danish: localeDa, 'da'
  • Dutch: localeNl, 'nl'
  • English: localeEn or undefined, 'en'
  • English (UK): localeEnGB, 'en-GB'
  • Farsi: localeFa, 'fa'
  • German: localeDe, 'de'
  • Greek: localeEl, 'el'
  • Spanish: localeEs, 'es'
  • Finnish: localeFi, 'fi'
  • French: localeFr, 'fr'
  • Hebrew: localeHe, 'he'
  • Hindi: localeHi, 'hi'
  • Hungarian: localeHu, 'hu'
  • Italian: localeIt, 'it'
  • Japanese: localeJa, 'ja'
  • Korean: localeKo, 'ko'
  • Lithuanian: localeLt, 'lt'
  • Norwegian: localeNo, 'no'
  • Polish: localePl, 'pl'
  • Portuguese (Brazilian): localePtBR, 'pt-BR'
  • Portuguese (European): localePtPT, 'pt-PT'
  • Romanian: localeRo, 'ro'
  • Russian: localeRu, 'ru'
  • Russian (UA): localeRuUA, 'ru-UA'
  • Slovak: localeSk, 'sk'
  • Serbian: localeSr, 'sr'
  • Swedish: localeSv, 'sv'
  • Thai: localeTh, 'th'
  • Turkish: localeTr, 'tr'
  • Ukrainian: localeUa, 'ua'

Default value: undefined

minuteText​

string

Specifies the accessibility label for the minute wheel.

Default value: 'Minute'

monthNames​

Array<string>

The list of full month names.

Default value: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']

monthNamesShort​

Array<string>

The list of abbreviated month names.

Default value: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

monthSuffix​

string

Additional string to display after the month on the wheel.

Default value: undefined

monthText​

string

Specifies the accessibility label for the month wheel.

Default value: 'Month'

moreEventsPluralText​

string

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 option will be used for both plural and singular form.

Default value: undefined

moreEventsText​

string

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.

Default value: '{count} more'

nextPageText​

string

Text for the next button in the calendar header, used as accessibility label.

Default value: 'Next page'

okText​

string

Text for the "Ok" button.

Default value: 'Ok'

pmText​

string

Text for PM.

Default value: 'pm'

prevPageText​

string

Text for the previous button in the calendar header, used as accessibility label.

Default value: 'Previous page'

quarterText​

string

Text for quarter numbers in the timeline header. The {count} inside the string will be replaced with the number of the current quarter.

Default value: 'Q {count}'

rangeEndHelp​

string

When selecting a range, it specifies the placeholder text for the end value under the end label.

Default value: 'Please select'

rangeEndLabel​

string

When selecting a range, it specifies the text of the end label.

Default value: 'End'

rangeStartHelp​

string

When selecting a range, it specifies the placeholder text for the start value under the start label.

Default value: 'Please select'

rangeStartLabel​

string

When selecting a range, it specifies the text of the start label.

Default value: 'Start'

rtl​

boolean

Enables right-to-left display.

Default value: false

secondText​

string

Specifies the accessibility label for the second wheel.

Default value: 'Second'

selectedPluralText​

string

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.

Default value: '{count} selected'

selectedText​

string

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.

Default value: '{count} selected'

setText​

string

Text for the "Set" button.

Default value: 'Set'

timeFormat​

string

The format for parsed and displayed times:

  • h - 12 hour format (no leading zero)
  • hh - 12 hour format (leading zero)
  • H - 24 hour format (no leading zero)
  • HH - 24 hour format (leading zero)
  • m - minutes (no leading zero)
  • mm - minutes (leading zero)
  • s - seconds (no leading zero)
  • ss - seconds (leading zero)
  • a - lowercase am/pm
  • A - uppercase AM/PM
  • '...' - literal text
  • '' - single quote
  • anything else - literal text

Default value: 'hh:mm A'

timeText​

string

Specifies the accessibility label for the time wheel.

Default value: 'Time'

timeWheels​

string

Display order and formatting of the time wheels. 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 formatting will be defined by the theme.

To display the whole time on one wheel, the format of the time should be specified between | characters:

timeWheels: '|h:mm A|' // Will produce '9:12 AM'

Default value: undefined

todayText​

string

Text for the "Today" button.

Default value: 'Today'

yearSuffix​

string

Additional string to display after the year on the wheel.

Default value: undefined

yearText​

string

Specifies the accessibility label for the year wheel.

Default value: 'Year'

Methods​

These methods are actions that can be performed on a component instance.

close​

() => void

Closes the component.

getTempVal​

() => MbscDatepickerValue

Returns the temporary value selected on the datepicker.

isVisible​

() => boolean

Returns a boolean indicating whether the component is visible or not.

navigate​

(date: MbscDateType) => void

Display a specific month on the calendar without setting the date.

Parameters:

  • date - Date to navigate to. Can be a Date object, ISO8601 date string, or moment object.

open​

() => void

Opens the component.

position​

() => void

Recalculates the position of the component (if not inline).

setActiveDate​

(active: "end" | "start") => void

Sets which date or time is currently selected.

Parameters:

  • active - Specifies the active selection: start or end.

setOptions​

(opt: MbscDatepickerOptions) => void

Sets or updates options of the component. Options can be updated dynamically after the initialization.

It receives an options object as parameter. Calling setOptions will overwrite all the options that have a key in the options object parameter, and it will re-render the component.

inst.setOptions({
  themeVarian: 'dark',
})

setTempVal​

(value: MbscDatepickerValue) => void

Sets the Datepicker temporary value. This temp value is shown on the picker until the selection. In the case of inline mode or when the touchUi setting is false the value will be set to the Model as well, since in these cases there's no temporary value.

Parameters:

  • value - The value to set to the Datepicker as temporary value

Renderers​

The display of the Datepicker component can be customized with different render functions.

renderCalendarHeader​

() => any

Customize the header of the Datepicker. 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.

renderDay​

(args: MbscCalendarDayData) => any

Customize the day cells of the Datepicker. The Datepicker will take care of the positioning, but everything else (like background color, hover effect, etc.) is left to you.

If you are looking to customize only the day cell content and don't want to bother with the styling of the event, you can use the renderDayContent option.

The following day specific details are available:

  • date: Date - The specific date as a Date object.
  • selected: boolean - True if the date is selected. (In case of calendar view)
  • events: Array<MbscCalendarEvent> - The list of events of the day.

renderDayContent​

(args: MbscCalendarDayData) => any

Customize the day cells content of the Datepicker. The Datepicker will take care of styling and you can focus on what you show beside the day number a.k.a the content.

If you are looking to fully customize the day cell (ex. add custom hover effects) you will need to use the renderDay option. In that case you will only get the positioning done by the Datepicker and everything else is up to you.

The following day specific details are available:

  • date: Date - The specific date as a Date object.
  • selected: boolean - True if the date is selected.
  • events: Array<MbscCalendarEvent> - The list of events of the day.

Types​

MbscCalendarColor​

Interface

Properties:

  • allDay: boolean - Specifies whether the date you want to color is all day or not.
  • background: string - Background color of the cell. It can be any valid CSS color ('red', '#ff0000', 'rgb(255, 0, 0)', etc.).
  • cellCssClass: string - CSS class for the day cell. Only applicable for the calendar view.
  • cssClass: string - Specifies a custom CSS class for the color. Useful when customization is needed for the background of cells and time ranges. Only applicable for the timeline and scheduler views.
  • date: string | object | Date - Specifies a single date for the color
  • end: string | object | Date - Specifies the end date/time of a date/time range for the color
  • highlight: string - Highlight color of the day, can be any valid CSS color ('red', '#ff0000', 'rgb(255, 0, 0)', etc.).
  • recurring: string | MbscRecurrenceRule - Specifies a recurrence rule for handling recurring days.
  • recurringException: string | object | Date | Array<string | object | Date> - Exception dates of the recurring rule. Useful when specific dates need to be skipped from the rule.
  • recurringExceptionRule: string | MbscRecurrenceRule - Exception rule of the recurring rule. Useful when recurring dates need to be skipped from the rule.
  • resource: string | number | Array<string | number> - In case of the timeline and scheduler view of the Eventcalendar, specifies the resource ids for the color. The color will be displayed only on the specified resource. If there is no resource defined, it will be applied to every resource.
  • slot: string | number - In case of the timeline view of the Eventcalendar, specifies the slot id for the color. The color will be displayed only on the specified slot. If there is no slot defined, it will be applied to every slot.
  • start: string | object | Date - Specifies the start date/time of a date/time range for the color
  • textColor: string - A color applied on the text.
  • title: string - A title that will be displayed on the item.

MbscCalendarLabel​

Interface

Properties:

  • cellCssClass: string - CSS class for the day cell. Only applicable for the calendar view.
  • color: string - Background color of the label.
  • cssClass: string - Specifies a custom CSS class that is applied to the label.
  • date: string | object | Date - Specifies a single date for the label
  • end: string | object | Date - Specifies the end date/time of a date/time range for the label
  • order: number - Specifies the order of the label in the array. Has precedence over the default ordering rules.
  • recurring: string | MbscRecurrenceRule - Specifies a recurrence rule for handling recurring days.
  • recurringException: string | object | Date | Array<string | object | Date> - Exception dates of the recurring rule. Useful when specific dates need to be skipped from the rule.
  • recurringExceptionRule: string | MbscRecurrenceRule - Exception rule of the recurring rule. Useful when recurring dates need to be skipped from the rule.
  • start: string | object | Date - Specifies the start date/time of a date/time range for the label
  • textColor: string - A color applied on the text.
  • title: string - The title of the label.
  • tooltip: string - Tooltip for the label

MbscCalendarMarked​

Interface

Properties:

  • cellCssClass: string - CSS class for the day cell. Only applicable for the calendar view.
  • color: string - Color of the mark.
  • date: string | object | Date - Specifies a single date when this is applicable
  • end: string | object | Date - Specifies the end date/time of a date/time range when this is applicable
  • markCssClass: string - CSS class for the mark.
  • recurring: string | MbscRecurrenceRule - Specifies a recurrence rule for handling recurring days.
  • recurringException: string | object | Date | Array<string | object | Date> - Exception dates of the recurring rule. Useful when specific dates need to be skipped from the rule.
  • recurringExceptionRule: string | MbscRecurrenceRule - Exception rule of the recurring rule. Useful when recurring dates need to be skipped from the rule.
  • start: string | object | Date - Specifies the start date/time of a date/time range when this is applicable
  • textColor: string - A color applied on the text.
  • title: string - A title that will be displayed on the item.

MbscDateType​

string | Date | object

MbscDatepickerControl​

"calendar" | "date" | "time" | "datetime" | "timegrid"

MbscLocale​

Interface

Properties:

  • allDayText: string
  • amText: string
  • calendarSystem: MbscCalendarSystem
  • cancelText: string
  • clearText: string
  • closeText: string
  • dateFormat: string
  • dateFormatFull: string
  • dateFormatLong: string
  • dateText: string
  • dateWheelFormat: string
  • dayNames: Array<string>
  • dayNamesMin: Array<string>
  • dayNamesShort: Array<string>
  • daySuffix: string
  • dayText: string
  • eventText: string
  • eventsText: string
  • filterEmptyText: string
  • filterPlaceholderText: string
  • firstDay: number
  • fromText: string
  • hourText: string
  • minuteText: string
  • monthNames: Array<string>
  • monthNamesShort: Array<string>
  • monthSuffix: string
  • monthText: string
  • moreEventsPluralText: string
  • moreEventsText: string
  • nextMonthText: string
  • nextYearText: string
  • noEventsText: string
  • nowText: string
  • pmText: string
  • prevMonthText: string
  • prevYearText: string
  • rangeEndHelp: string
  • rangeEndLabel: string
  • rangeStartHelp: string
  • rangeStartLabel: string
  • rtl: boolean
  • secondText: string
  • selectedPluralText: string
  • selectedText: string
  • setText: string
  • timeFormat: string
  • timeText: string
  • timeWheels: string
  • toText: string
  • todayText: string
  • weekText: string
  • yearSuffix: string
  • yearText: string

MbscPopupButton​

Interface

Properties:

  • color: "success" | "light" | "dark" | "primary" | "secondary" | "danger" | "warning" | "info" - Specifies the predefined color of the button
  • cssClass: string - A custom CSS class that will be applied to the element
  • disabled: boolean - Disabled state of the button
  • handler: MbscPopupPredefinedButton | (event: any) => void - Specifies what happens when the button is pressed. It can be a predefined button handler like 'set', 'cancel' or a custom function.
  • icon: string - When specified, it renders an icon on the button. It requires the name of the icon that should be displayed.
  • keyCode: number | "enter" | "esc" | "space" | Array<number | "enter" | "esc" | "space"> - The key code associated with the button to activate it from keyboard. Can be a single value or multiple value passed as an array. Predefined string values are: 'enter', 'esc', 'space'.
  • text: string - Sets the label of the button
  • variant: "outline" | "standard" | "flat" - The style of the button

MbscPopupDisplay​

"center" | "bottom" | "top" | "anchored" | "inline" | "bubble"

MbscPopupPredefinedButton​

"set" | "cancel" | "ok" | "close"

MbscRecurrenceRule​

Interface

Properties:

  • count: number
  • day: number | Array<number>
  • from: MbscDateType
  • interval: number
  • month: number | Array<number>
  • pos: number
  • repeat: "daily" | "weekly" | "monthly" | "yearly"
  • until: MbscDateType
  • weekDays: string
  • weekStart: string

MbscResponsiveOptions<MbscDatepickerOptions>​

Interface

The MbscResponsiveOptions<MbscDatepickerOptions> supports custom properties in the form:

[key:string]: MbscDatepickerOptions & {breakpoint?: number}

The keys are the names of the breakpoints, and the values are objects containing the options for the given breakpoint. The breakpoint property, when present, specifies the min-width in pixels. The options will take into effect from that width.

info

The available width is queried from the container element of the component and not the browsers viewport like in css media queries

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

MbscTimezonePlugin​

Interface

Properties:

  • createDate: (s: any, year: string | number | Date | MbscTimezonedDate, month: number, date: number, h: number, min: number, sec: number, ms: number) => MbscTimezonedDate
  • parse: (date: string | number, s: any) => MbscTimezonedDate