16

I'm using angularjs 1.7.2 and kendo ui scheduler. All routes are working fine in almost all browser except when it comes to padStart() part in IE 11. When padStart code is taken this error shows up

TypeError: Object doesn't support property or method 'padStart'

let ret = '#' + ((r << 16) + (g << 8) + b).toString(16).padStart(6, '0');

Is there a way we can handle this or an alternative way for implementing padStart

1 Answer 1

28

IE 11 is not supporting this function. Please take a look here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart#Browser_compatibility

What you are looking for are polyfills to fill up missing functions of your browser. The following code also taken from developer.mozilla.org will help you:

// https://github.com/behnammodi/polyfill/blob/master/string.polyfill.js
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart
if (!String.prototype.padStart) {
    String.prototype.padStart = function padStart(targetLength,padString) {
        targetLength = targetLength>>0; //truncate if number or convert non-number to 0;
        padString = String((typeof padString !== 'undefined' ? padString : ' '));
        if (this.length > targetLength) {
            return String(this);
        }
        else {
            targetLength = targetLength-this.length;
            if (targetLength > padString.length) {
                padString += padString.repeat(targetLength/padString.length); //append to original to ensure we are longer than needed
            }
            return padString.slice(0,targetLength) + String(this);
        }
    };
}

Edit: As mentioned in the comments, by @Plaute, the function repeat needs also to be polyfilled which can be found here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat

Or include this snippet:

if (!String.prototype.repeat) {
  String.prototype.repeat = function(count) {
    'use strict';
    if (this == null) {
      throw new TypeError('can\'t convert ' + this + ' to object');
    }
    var str = '' + this;
    count = +count;
    if (count != count) {
      count = 0;
    }
    if (count < 0) {
      throw new RangeError('repeat count must be non-negative');
    }
    if (count == Infinity) {
      throw new RangeError('repeat count must be less than infinity');
    }
    count = Math.floor(count);
    if (str.length == 0 || count == 0) {
      return '';
    }
    // Ensuring count is a 31-bit integer allows us to heavily optimize the
    // main part. But anyway, most current (August 2014) browsers can't handle
    // strings 1 << 28 chars or longer, so:
    if (str.length * count >= 1 << 28) {
      throw new RangeError('repeat count must not overflow maximum string size');
    }
    var maxCount = str.length * count;
    count = Math.floor(Math.log(count) / Math.log(2));
    while (count) {
       str += str;
       count--;
    }
    str += str.substring(0, maxCount - str.length);
    return str;
  }
}

Alternatively, to work around the String.prototype.repeat dependency, use the following line:

padString += Array.apply(null, Array(targetLength)).map(function(){ return padString; }).join("");
7
  • 2
    Function repeat doesn't exist in IE 11 and must also be added, Look at developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
    – Plaute
    Oct 1, 2018 at 13:05
  • That's certainly true. Thanks for the addition :)
    – r3dst0rm
    Oct 1, 2018 at 13:06
  • 10
    It's a mess with IE 11 :)
    – Plaute
    Oct 1, 2018 at 13:32
  • There is one issue with this if you are in F12 console mode of IE 11. The compatibility / version box at the top will probably indicate version 10. This will bomb even with the polyfills. You need to change this to version 11. However, know that if your users put your website into compatibility mode it will probably still break.
    – Newclique
    Feb 4, 2019 at 19:01
  • @Wade I just dropped the code in, and it works in IE10. Perhaps the latest compatibility updates for IE10 have fixed that, meaning I hope they've also in IE11? I don't particularly care since IE10 is so rarely used, but it's my slowest IE test machine. Apr 23, 2019 at 16:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.