RUMI

by Felipe Alfaro

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<rp-date ng-model="myDate"></rp-date>

<br>

{{ myDate }}

SCSS

html, body { height: 100%; }
html, body { margin: 0; padding: 0; }

rp-panels
{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  min-height: 100%;
  border: solid 1px gray;
  box-sizing: border-box;
  
  div.rp-panels-col
  {
    flex-grow: 1;
    flex-shrink: 1; 
    
    > rp-panel
    {
      display: block;
      border: solid 1px gainsboro;
      padding: 15px;
    }
  }
  
  > ng-transclude
  {
    display: none;
  }
}

JavaScript

const App = angular.module('App', []);


App.directive('rpDate', rpDateDirective);

rpDateDirective.$inject = [];
function rpDateDirective() {

  function template(tElement, tAttrs) {
    return (
      '<input type="text" class="rp-date-field rp-date-d" placeholder="dd">' +
      '<input type="text" class="rp-date-field rp-date-m" placeholder="mm">' +
      '<input type="text" class="rp-date-field rp-date-y" placeholder="yyyy">' +
      '<span class="rp-date-appearance"></span>'
    );
  }

  function postLink($scope, $element, $attrs, ngModel) {
    var dInput = $element[0].querySelector('.rp-date-d'),
        mInput = $element[0].querySelector('.rp-date-m'),
        yInput = $element[0].querySelector('.rp-date-y');

    setup(dInput, 31);
    setup(mInput, 12);
    setup(yInput, 9999);

    function setup(input, maxNumber) {
      input.rpDateField = true;
      input.maxNumber = maxNumber;
      input.onfocus = focusEvent;
      input.onmousedown = mouseDownEvent;
      input.onkeydown = keyDownEvent;
    }

    function focusEvent(ev) {
      reset(this);
    }

    function mouseDownEvent(ev) {
      ev.preventDefault();
      window.focus();
      this.select();
    }

    function keyDownEvent(ev) {
      var input = this,
          key = ev.key,
          keyCode = ev.keyCode,
          zeros = '';

      if (keyCode !== 9) ev.preventDefault();

      if ((48 <= keyCode && keyCode <= 57) || (96 <= keyCode && keyCode <= 105)) {
        input.allowedActions -= 1;
        input.actionValue += key;
        for (var n = 0; n < input.allowedActions; n++) {
          zeros += '0';
        }
        input.value = zeros + input.actionValue;
        if (Number(input.value) > input.maxNumber) {
          input.value = input.maxNumber;
        }
        input.select();
        setDate();
        if (!input.allowedActions || !nextDigit(input)) {
          next(input);
        }
      }
      else if (keyCode === 37) prev(input);
      else if (keyCode === 39)...