Date format error with input date

Question

I have a date field form, date. At 1a. time I select a date and click save, this warning appears on the console:

My HTML:

<div class="col-md-12" ng-controller="SaldoCtrl">
    <form name="formSaldo" class="formSaldo">
        <input class="form-control dataSaldo" type="date" name="dataSaldo" ng-model="saldo.data">
        <select class="form-control descricaoSaldo" name="descricaoSaldo" ng-model="saldo.descricao" required>
            <option value="">Selecione...</option>
            <option value="Caixa">Caixa</option>
            <option value="Tesouraria">Tesouraria</option>
            <option value="Saldo Bancário">Saldo Bancário</option>
            <option value="Diversos">Diversos</option>
        </select>
        <select class="form-control saldoFormaPgto" name="formaPgto" ng-model="saldo.formaPgto" required>
            <option value="">Selecione forma pgto.</option>
            <option value="Dinheiro">Dinheiro</option>
            <option value="Cheque á vista">Cheque á vista</option>
            <option value="Cheque á prazo">Cheque á prazo</option>
            <option value="Outros valores">Outros valores</option>
        </select>
        <input class="form-control saldoValor" type="text" name="valorsaldo" ng-model="saldo.valor" required>
        <a class="btn btn-success" ng-disabled="formSaldoBancario.$invalid" ng-click="salvarSaldo(saldo)">Salvar</a>
        </form>
</div>

My controller:

app.controller("SaldoCtrl", function ($scope, $http, $window, $rootScope, $filter) {
    $scope.salvarSaldo = function(saldo){
    if(saldo.data){
        var data = $filter('date')(saldo.data, 'yyyy-MM-dd');
        saldo.data = data;
    }else{
        var data = new Date();
        var data = $filter('date')(data, 'yyyy-MM-dd');
    }

    saldo.data = data;
    saldo.idempresa = $scope.idempresa;
    saldo.opcao = "Adicionar saldo";
    console.log(saldo);

    }
});

Answer 1

Probably at some point the field model is changed to another type that is not Date, that means that all <input type="date" > requires a Date.

I believe the moment this happens is in the $filter('date')(saldo.data, 'yyyy-MM-dd'); where a string.

You can return this by creating a date object from string, remembering to pass the correct argument to the date. Example:

let data = new Date('2018-01-05'); // formato valido
let data = new Date('05/01/2018'); // formato invalido

You can adjust the $filter to return a date that can be used in new Date($filter()).

var app = angular.module("Teste", []);
app.controller("ctrl", function($scope) {

  $scope.data = new Date();

  $scope.mudar = function() {
    $scope.data = new Date('01-07-2018'); // mes-dia-ano
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.6.8/angular-locale_pt-br.min.js"></script>

<div ng-app="Teste">
  <div class="col-md-12" ng-controller="ctrl">
    <form>
      <input class="form-control" type="date" ng-model="data">
      <button type='button' ng-click='mudar()'>Mudar</button>
    </form>
  </div>
</div>