Date & Time

Parameters

• event: Object - The event object has the following properties:
  • valueText: String - The selected value as text.
  • button: String - The name of the button which triggered the component to close ('set', or 'cancel').
• inst: Object - The instance object of the datetime.

Example

export class MyExample {
    settings: any = {
        onBeforeClose: (event, inst) => {
        }
    }
}

Parameters

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

Example

export class MyExample {
    settings: any = {
        onBeforeShow: (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 datetime.

Example

export class MyExample {
    settings: any = {
        onCancel: (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 datetime.

Example

export class MyExample {
    settings: any = {
        onChange: (event, inst) => {
        }
    }
}

Parameters

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

Example

export class MyExample {
    settings: any = {
        onClear: (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 datetime.

Example

export class MyExample {
    settings: any = {
        onClose: (event, inst) => {
        }
    }
}

Parameters

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

Example

export class MyExample {
    settings: any = {
        onDestroy: (event, inst) => {
        }
    }
}

Parameters

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

Example

export class MyExample {
    settings: any = {
        onInit: (event, inst) => {
        }
    }
}

Parameters

• event: Object - The event object has the following properties:
  • target: HTMLElement - The DOM element of the tapped item.
  • selected: Boolean - Selected state of the tapped item.
• inst: Object - The instance object of the datetime.

Example

export class MyExample {
    settings: any = {
        onItemTap: (event, inst) => {
        }
    }
}

Parameters

• event: Object - The event object has the following properties:
  • target: Object - The DOM element containing the generated html.
• inst: Object - The instance object of the datetime.

Example

export class MyExample {
    settings: any = {
        onMarkupReady: (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 datetime.

Example

export class MyExample {
    settings: any = {
        onPosition: (event, inst) => {
        }
    }
}

Parameters

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

Example

export class MyExample {
    settings: any = {
        onSet: (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 datetime.

Example

export class MyExample {
    settings: any = {
        onShow: (event, inst) => {
        }
    }
}

Example

mobiscrollInstance.cancel();

Example

mobiscrollInstance.clear();

Example

mobiscrollInstance.disable();

Example

mobiscrollInstance.enable();

Parameters

• temp (Optional): Boolean - If true, temporary selected date is returned (prior clicking the Set button).

Returns: Object

• The selected date.

Example

mobiscrollInstance.getVal();

Parameters

• prevAnim (Optional): Boolean - If true, hide will not be animated.
• btn (Optional): String - Specifies which button caused the component to hide, and it's passed to the onBeforeClose event.

Example

    mobiscrollInstance.hide();
    

Returns: Boolean

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

Example

mobiscrollInstance.isVisible();

Parameters

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

Example

mobiscrollInstance.option({
    display: 'bottom',
    lang: 'de'
});

Parameters

• check (Optional): Boolean - If true, the function checks if viewport size changed after last position call, if false or ommitted, position is recalculated anyway.

Example

mobiscrollInstance.position();

Example

mobiscrollInstance.select();

Parameters

• value: Object or String - Can be a Date object or a date string in the specified date format.
• fill (Optional): Boolean - If true, the associated input element is also updated with the new value.
• change (Optional): Boolean - If false, change event won't be triggered on the input element.
• temp (Optional): Boolean - If true, only temporary values are set.
• time (Optional): Number - Specifies the duration of the animation in seconds to scroll the wheels to the new values. There is no animation, if time is omitted or 0.

Example

// date
mobiscrollInstance.setVal(new Date(2016, 1, 1));

// time
mobiscrollInstance.setVal(new Date(new Date().setHours(16, 57, 0, 0)));

// datetime
mobiscrollInstance.setVal(new Date(2016, 7, 14, 16, 57));

Parameters

• prevAnim (Optional): Boolean - If true, show will not be animated.
• prevFocus (Optional): Boolean - If true, the popup will not be focused right after show.

Example

mobiscrollInstance.show();

Parameters

• el: Object - The element with tap event.
• handler: Function - If the action was initiated with touch event, handler is called on touchend, otherwise on click.

Example

mobiscrollInstance.tap('#element', function () { alert("It's a tap!"); });

• m - month of year (no leading zero)
• mm - month of year (two digit)
• M - month name short
• MM - month name long
• d - day of month (no leading zero)
• dd - day of month (two digit)
• D - day of week (short)
• DD - day of week (long)
• y - year (two digit)
• yy - year (four digit)
• '...' - literal text
• '' - single quote
• anything else - literal text

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

• Arabic: 'ar'
• Bulgarian: 'bg'
• Catalan: 'ca'
• Czech: 'cs'
• Chinese: 'zh'
• Croatian: 'hr'
• Danish: 'da'
• Dutch: 'nl'
• English: 'en' or 'en-US' or undefined
• English (UK): 'en-UK' or 'en-GB'
• Farsi: 'fa'
• German: 'de'
• Greek: 'el'
• Spanish: 'es'
• Finnish: 'fi'
• French: 'fr'
• Hebrew: 'he'
• Hindi: 'hi'
• Hungarian: 'hu'
• Italian: 'it'
• Japanese: 'ja'
• Korean: 'ko'
• Lithuanian: 'lt'
• Norwegian: 'no'
• Polish: 'pl'
• Portuguese (Brazilian): 'pt-BR'
• Portuguese (European): 'pt-PT'
• Romanian: 'ro'
• Russian: 'ru'
• Russian (UA): 'ru-UA'
• Slovak: 'sk'
• Serbian: 'sr'
• Thai: 'th'
• Swedish: 'sv'
• Turkish: 'tr'
• Ukrainian: 'ua'
• Vietnamese: 'vi'

• 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)
• i - minutes (no leading zero)
• ii - 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:ii A|' // Will produce '9:12 AM' 

function myFormatValue(data) {
    // In case of 'mm/dd/yy' wheel format, an example data array: [8, 31, 2016]
    // Returns '2016-09-31'
    return data[2] + '-' + (data[0] < 9 ? '0' : '') + (data[0] + 1) + '-' + (data[1] < 10 ? '0' : '') + data[1];
}

<mbsc-datetime [formatValue]="myFormatValue">My datetime</mbsc-datetime>

function myParseValue(str) {
    var d = new Date(); // Default value
    if (str) {
        // Example string: '2016-09-31'
        str = str.split('-');
        d = new Date(str[0], str[1] - 1, str[2]);
    }
    return [d.getMonth(), d.getDate(), d.getFullYear()];
}

<mbsc-datetime [parseValue]="myParseValue">My datetime</mbsc-datetime>