Not working with IE11

[diregraph]

Hi @fooloomanzoo ,

I have used the datetime-picker and customized it as follows, custom-datetime-picker. The es5-bundled build throws errors on IE11 (by webcomponent-lite.js). Polymer lint does not show any errors either! I would really appreciate it if you could spare a bit of your valuable time to help me out in any way you can.

Thank you!

[diregraph]

I hope the following information would be useful in some way.

1. I am using prpl-server to serve the build
2. I tried removing code line by line until I got a working build on IE11. Following is the status, a. If I import a file from datetime-picker the build is not working. b. After commenting out my custom code( for ex: method and template overrides of DatePicker) and commenting out the html imports from datetime-picker, the build works. c. After commenting out my custom code and leaving the html imports from datetime-picker, the build does not work.

(I imported only the calendar-button.html in date-time-picker.html and I commented the rest of it as follows. Also only the html imports from datetime-picker was left inside the calendar-button.html )

<link rel="import" href="../../bower_components/polymer/polymer-element.html">

<link rel="import" href="calendar-button.html">
<!--<link rel="import" href="time-button.html">
<link rel="import" href="customized-date-input.html">
<link rel="import" href="micro-seconds-input.html">-->

<dom-module id="date-time-picker">
    <template>
            <style is="custom-style">
                :host {
                    display: block;
                    width: auto
                }

               calendar-button,
               time-button{
                --iron-icon-fill-color: #1C5397;
                --input-style_-_padding:6px;
                --iron-icon-width:16px;

                background: #ffffff;
                height: 27px;
                width: 28px;
                position: relative;
                top: 7px;
                /* left: 5px; */
                border: 1px solid rgba(0, 0, 0, .25);

                --datetime-background:#32495d;
               }

               customized-date-input,
               micro-seconds-input{
                   background-color: #ffffff;
                   border: 1px solid rgba(0, 0, 0, .25);
                   height: 27px;
                   font-size: 0.9em;
                   --input-focus_-_color: #E9A75F;
                   --input-style_-_color: #444444;
               }

            </style>

        <div class="container">
           <!--<calendar-button no-overlap
                            auto-confirm
                            tabindex="-1"
                            year="{{year}}"
                            month="{{month}}"
                            day="{{day}}"

            ></calendar-button>
            <customized-date-input locale="[[_localeForDateInput]]"
                                   _seperator="[[_seperator]]"
                                   year="{{year}}"
                                   month="{{month}}"
                                   day="{{day}}"
            >
            </customized-date-input>
            <time-button no-overlap
                         clamp=""
                         tabindex="-1"
                         hours="{{hours}}"
                         minutes="{{minutes}}"
                         seconds="{{seconds}}"
                         milliseconds="{{milliseconds}}"
                         microseconds="{{microseconds}}"
            >
            </time-button>

            <micro-seconds-input clamp=""
                                 hours="{{hours}}"
                                 minutes="{{minutes}}"
                                 seconds="{{seconds}}"
                                 milliseconds="{{milliseconds}}"
                                 microseconds="{{microseconds}}"
            >
            </micro-seconds-input>-->
            why you do this??
        </div>
    </template>

    <script>
        /**
         * `mrs-datetime-picker`
         * A polymer element by incorporating datetime-picker webcomponent by fooloomanzoo
         *
         * @customElement
         * @polymer
         * @demo demo/index.html
         */

        class DateTimePicker extends Polymer.Element {
            static get is() {
                return 'date-time-picker';
            }

            static get properties() {
                return {
                    /**
                     * protected property to set date format
                     * en => MM/DD/YYYY
                     * fr => DD/MM/YYYY
                     * ja => YYYY/MM/DD
                     */
                    _localeForDateInput: {
                        type: String,
                        computed: '_computeDateFormat(dateFormat)'
                    },
                    /**
                     * protected property to set date seperator
                     * seperator from the date format is given by _computeDateFormat(dateFormat)
                     */
                    _seperator: {
                        type: String,
                        value: '/'
                    },
                    /**
                     * property to set date format
                     * MM/DD/YYYY
                     * DD/MM/YYYY
                     * YYYY/MM/DD
                     * MM-DD-YYYY
                     * DD-MM-YYYY
                     * YYYY-MM-DD
                     */
                    dateFormat: {
                      type: String
                    },
                    year: {
                        type: Number,
                        notify: true
                    },
                    month: {
                        type: Number,
                        notify: true
                    },
                    day: {
                        type: Number,
                        notify: true
                    },
                    hours: {
                        type: Number,
                        notify: true
                    },
                    minutes: {
                        type: Number,
                        notify: true
                    },
                    seconds: {
                        type: Number,
                        notify: true
                    },
                    milliseconds: {
                        type: Number,
                        notify: true
                    },
                    microseconds: {
                        type: Number,
                        notify: true
                    },
                    dateTime: {
                        type: Date,
                        computed: '_computeDateTimeObject(year, month, day, hours, minutes, seconds, milliseconds)'
                    }

                }
            }

            _computeDateFormat(dateFormat){
                switch(dateFormat) {
                    case 'MM/DD/YYYY':
                        this._seperator = '/';
                        return 'en';
                        break;
                    case 'MM-DD-YYYY':
                        this._seperator = '-';
                        return 'en';
                        break;
                    case 'DD/MM/YYYY':
                        this._seperator = '/';
                        return 'fr';
                        break;
                    case 'DD-MM-YYYY':
                        this._seperator = '-';
                        return 'fr';
                        break;
                    case 'YYYY/MM/DD':
                        this._seperator = '/';
                        return 'ja';
                        break;
                    case 'YYYY-MM-DD':
                        this._seperator = '-';
                        return 'ja';
                        break;
                    default:
                        return 'en';
                }
            }

            _computeDateTimeObject(year, month, day, hours, minutes, seconds, milliseconds){
                let computedMonth = month -1;
                return new Date(year, computedMonth, day, hours, minutes, seconds, milliseconds);
            }

        }
        window.customElements.define(DateTimePicker.is, DateTimePicker);
    </script>
</dom-module>

the build with the above code behaves as I explained in 2. above.

[diregraph]

I have made a branch in my repo with the changes I made to get a working build. (working build does not mean the issue is fixed)

[fooloomanzoo]

I opened some issues myself on polymer's and polymer-build's github repro about beeing not transpilable to IE11. I tried for this element to reduce the usage of too new techniques, but es-6 classes are the core of extending each element here. And that is the problem. There are a couple of tools that are better than the prpl-server of polymer for transpiling, because it also just uses a babel transpiler under the hood. There is like said babel, roolup and webpack for example. But they all have some difficulties and there is also the question of your purpose, if you f.o. dynamically serve or statically and your server.

[diregraph]

Oh! This is a really good web component, pity that IE is not ready to upgrade (no pun intended). I am studying vaadin elements (works with IE11), I'll post a workaround if I come across any. Thank you @fooloomanzoo . Cheers!