IE11 Compatibility

[rachelmad]

I'm having an issue implementing the date time picker on IE11.

I have an input area and icons to toggle the dialog. The page loads just fine. However, when you click the icon, I get an Object doesn't support this action error. We've debugged it to find that the error occurs when reaching

onCancel = new CustomEvent('onCancel')

in this section:

key: '_attachEventHandlers', value: function _attachEventHandlers() { var me = this, ok = this._sDialog.ok, cancel = this._sDialog.cancel, onCancel = new CustomEvent('onCancel'), onOk = new CustomEvent('onOk');

Are you aware of this issue? How do I get around this?

[puranjayjain]

@rachelmad there is a dedicated section for ie in the docs in the last section. You will need to add a polyfill to your code for ie 11 it is mentioned which ones you will need. If it persists please reply here with the issue :)

[rachelmad]

I'm a bit new to this. Any chance you could provide a short example on how that might be done?

[puranjayjain]

As mentioned on the site you have to include two polyfills for ie11.

So just include the scripts for the two polyfills before the md-date-time-picker script like this :

<polyfills >
<md-date-time-picker >

Pro tip: you can also include lte or gte tags and put the polyfills inside them to fetch them only for ie

[jakobadam]

I added the polyfills, but still have a small issue in IE11.

In IE11 the dialog is centered, i.e., transform(-50%,-50%), after the dialog is zoomed. So it jumps back to its correct location after the zoom effect.

My quick fix, skip zooming:

@keyframes zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        //transform: scale3d(0.3, 0.3, 0.3); // triggers the issue
        }
    50% {
        opacity: 1;
    }
}

Better solutions?

[puranjayjain]

I guess this is the only solution for that unless there is a polyfill to implement css animations