cleave angular demo

cleave angular demo

HTML

<script src="https://nosir.github.io/cleave.js/dist/cleave-angular.min.js"></script>
<script src="https://nosir.github.io/cleave.js/dist/cleave-phone.i18n.js"></script>
<div ng-app="app" ng-controller="AppController">
  <section ng-repeat="l in lista">
    <input cleave="options.date" type="text" placeholder="Enter date: DD/MM/YYYY" ng-model="l.dateRawValue" on-value-change="onDateChange" on-init="onDateInit" />
    <p>raw (ng-model) value: {{model.dateRawValue}}</p>
    <p>formatted value: {{model.dateFormattedValue}}</p>
    <p>iso value: {{model.dateISOValue}}</p>
  </section>

  <button>
  aumentar
</button>
</div>

CSS

input {
  width: 80%;
  display: block;
  outline: none;
  -webkit-appearance: none;
  border: 1px solid #e6e6e6;
  border-radius: 5px;
  background-color: #fff;
  line-height: 30px;
  vertical-align: middle;
  height: 33px;
  font-size: 14px;
  padding: 0 8px;
}

.input-numeral {
  text-align: right;
}

.right {
  text-align: right;
}

body {
  font-family: sans-serif;
}

p {
  margin: 0;
  padding: 5px 0 0 0;
  font-size: 14px;
  color: #666;
}

section {
  margin-bottom: 15px;
  width: 50%;
}

.input-numeral {
  text-align: right;
}

JavaScript

angular.module('app', ['cleave.js'])

  .controller('AppController', function($scope) {

    $scope.onDateInit = function(cleave) {
      for (var i in $scope.lista) {
        $scope.lista[i].cleave = cleave;
      }
    };

    $scope.onDateChange = function(formattedValue) {
      $scope.model.dateFormattedValue = formattedValue;

      if ($scope.model.cleave) {
        $scope.model.dateISOValue = $scope.model.cleave.getISOFormatDate();
      }
    };

    $scope.lista = [{
        indice: 0,
        cleave: null,
        dateRawValue: '',
        dateFormattedValue: '',
        dateISOValue: ''
      },
      {
        indice: 1,
        cleave: null,
        dateRawValue: '',
        dateFormattedValue: '',
        dateISOValue: ''
      },
      {
        indice: 2,
        cleave: null,
        dateRawValue: '',
        dateFormattedValue: '',
        dateISOValue: ''
      }

    ];

    $scope.options = {
      date: {
        date: true,
        datePattern: ['d', 'm', 'Y']
      }
    };
  });