Datepicker

Parameters

• event: Object - The event object has the following properties:
  • valueText: String - The selected value as text.
• inst: Object - The instance object of the datepicker.

Example

$('#mobiscroll').mobiscroll().datepicker({
    onCancel: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has 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: Object - The instance object of the datepicker.

Example

$('#mobiscroll').mobiscroll().datepicker({
    onCellClick: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • date: The selected date as a Date object.
  • marked: If the day is marked, contains the marked objects for the hovered day.
  • selected: Specifies if the day is currently selected or not.
  • target: The table cell HTML DOM element.
• inst: Object - The instance object of the datepicker.

Example

$('#mobiscroll').mobiscroll().datepicker({
    onCellHoverIn: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • date: The selected date as a Date object.
  • marked: If the day is marked, contains the marked objects for the hovered day.
  • selected: Specifies if the day is currently selected or not.
  • target: The table cell HTML DOM element.
• inst: Object - The instance object of the datepicker.

Example

$('#mobiscroll').mobiscroll().datepicker({
    onCellHoverOut: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • value - The selected value
  • valueText: String - The selected value as text (if any).
• inst: Object - The instance object of the datepicker.

Example

$('#mobiscroll').mobiscroll().datepicker({
    onChange: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • valueText: String - The selected value as text.
• inst: Object - The instance object of the datepicker.

Example

$('#mobiscroll').mobiscroll().datepicker({
    onClose: function (event, inst) {
    }
});

Parameters

• event: Object - The event object.
• inst: Object - The instance object of the datepicker.

Example

$('#mobiscroll').mobiscroll().datepicker({
    onDestroy: function (event, inst) {
    }
});

Parameters

• event: Object - The event object.
• inst: Object - The instance object of the datepicker.

Example

$('#mobiscroll').mobiscroll().datepicker({
    onInit: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has 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: Object - The original object of the label which was clicked, undefined in case of the "more" label.
  • labels: Array - An array containing each label object for the given day.
  • target: HTMLElement - The DOM element of the label.
• inst: Object - The instance object of the datepicker.

Example

$('#mobiscroll').mobiscroll().datepicker({
    onLabelClick: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • target: Object - The DOM element containing the generated html.
  • valueText: String - The selected value as text.
• inst: Object - The instance object of the datepicker.

Example

$('#mobiscroll').mobiscroll().datepicker({
    onOpen: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following property:
  • firstDay: Date - The first day of the displayed page.
  • lastDay: Date - The last day of the displayed page.
• inst: Object - The instance object of the datepicker.

Example

$('#mobiscroll').mobiscroll().datepicker({
    onPageChange: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following property:
  • firstDay: Date - The first day of the displayed page.
  • lastDay: Date - The last day of the displayed page.
• inst: Object - The instance object of the datepicker.

Example

$('#mobiscroll').mobiscroll().datepicker({
    onPageLoaded: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following property:
  • firstDay: Date - The first day of the displayed page.
  • lastDay: Date - The last day of the displayed page.
• inst: Object - The instance object of the datepicker.

Example

$('#mobiscroll').mobiscroll().datepicker({
    onPageLoading: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • target: Object - The DOM element containing the generated html.
  • windowWidth: Number - The window width.
  • windowHeight: Number - The window height.
• inst: Object - The instance object of the datepicker.

Example

$('#mobiscroll').mobiscroll().datepicker({
    onPosition: function (event, inst) {
    }
});

Example

// With selector
$('#mobiscroll').mobiscroll('close');

// With instance
mobiscrollInstance.close();

Returns: Object

• Returns the element back to its pre-init state.

Example

// With selector
$('#mobiscroll').mobiscroll('destroy');

// With instance
mobiscrollInstance.destroy();

Returns: Object

• The object instance.

Example

// With selector
$('#mobiscroll').mobiscroll('getInst');

// With instance
mobiscrollInstance.getInst();

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 getTempVal method on the picker instance.

Returns: String, Date, Moment.js Object or Array of String, Date or Moment.js Object

The return value type depends on the returnFormat and the select option.

Returns: Boolean

• True if the component is visible, false if it's not.

Example

// With selector
$('#mobiscroll').mobiscroll('isVisible');

// With instance
mobiscrollInstance.isVisible();

Parameters

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

Example

// With selector
$('#mobiscroll').mobiscroll('navigate', new Date(2016, 1, 1));

// With instance
mobiscrollInstance.navigate(new Date(2016, 1, 1));

Example

// With selector
$('#mobiscroll').mobiscroll('open');

// With instance
mobiscrollInstance.open();

Example

// With selector
$('#mobiscroll').mobiscroll('position');

// With instance
mobiscrollInstance.position();

Parameters

• active: String - Currently selected date. It can be 'start' or 'end'.

Example

// With selector
$('#mobiscroll').mobiscroll('setActiveDate', 'start');

// With instance
mobiscrollInstance.setActiveDate('start');

Parameters

• options: Object - A map of option-value pairs to set.

Example

// With selector
$('#mobiscroll').mobiscroll('setOptions', {
    display: 'bottom'
});

// With instancee
mobiscrollInstance.setOptions({
    display: 'bottom'
});

Depending on how the picker is displayed, the selection shown might be just a temporary value until the users hit the "Set" button to commit the selection. This temporary value can be adjusted calling the setTempVal method on the picker instance.

To get the current selected value, check out the getVal instance method.

Parameters

• value: String, Date, Moment.js Object or Array of String, Date or Moment.js Object - the value to set to the picker

The value type should be choosen depending on the returnFormat and the select option.
In case of the range selection, the value should be an array with two values, the first being the start, and the second being the end.

• 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

dateWheels: '|D M d|' // Will produce 'Sun Sep 9'
            

• 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'
• Vietnamese: localeVi, 'vi'

$('#myexample').mobiscroll().datepicker({
  locale: mobiscroll.localeDe
});

In some cases it's more convenient to set the locale using the language code string. You can do that by using the locale object, which contains all translations by language codes as keys.

$('#myexample').mobiscroll().datepicker({
  locale: mobiscroll.locale['de']
});

• 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

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