CODEWITHSUNDEEP
javascripthtml
hhsnopek
hhsnopek

Reputation: 364

Update input (type="Number") with two digits

I'm attempting to use Pure Javascript (no jquery if possible). I need to update my input boxes' value so that it looks like this: 01. My usecase is for a MM and DD input boxes (mainly for aesthetics). When using the input wheel it will increase with 1, 2... I would like it to increment like this: 01, 02...

Upvotes: 1

Views: 1413

Answers (1)

hhsnopek
hhsnopek

Reputation: 364

Thank you @Daemedeor for leading me to this:

This will change the type to text and prepend the 0 on blur. On focus it will change type text back to type number and remove the leading 0. All you must do is style the inputs so they don't change widths.

    (function() {
      var monthInput = document.getElementById('month');
      var dayInput = document.getElementById('day');

      var prependZero = function() {
        if (this.value === '') return;

        event.target.setAttribute('type', 'text');
        if (this.value.indexOf('0') === -1  && this.value.length !== 2) this.value = '0' + this.value;
      };

      var removeZero = function() {
          this.value = this.value.split('0')[1];
          this.setAttribute('type', 'number');
      };

      dayInput.addEventListener('blur', prependZero, false);
      dayInput.addEventListener('focus', removeZero, false);
      monthInput.addEventListener('blur', prependZero, false);
      monthInput.addEventListener('focus', removeZero, false);
    })();

Upvotes: 1

Related Questions