Angular Format-date with date shortened one day

Question

I’m using an angle directive to handle the dates

my directive is this :

app.directive("formatDate", function() {
    return {
        require: 'ngModel',
        link: function(scope, elem, attr, modelCtrl) {
            modelCtrl.$formatters.push(function(modelValue) {
                if (modelValue){
                    return new Date(modelValue);
                }
                else {
                    return null;
                }
            });
        }
    };
});

When I display the date of my listing comes the correct date. But when I open the modal for data editing the date comes with a day less.

Let’s see;

My listing is like this:

In the listing I format the date this way :

<td>{{pes.dataNascimento | date:'dd/MM/yyyy'}}</td>

But when I click on the modal to change the selected person the date is loaded with a day less getting like this :

my component is this way:

<div class="es col-md-4">

                    <label class="lb" style="margin-top: -5px;">Data Nascimento <label class="lb1"
                      data-toggle="tooltip" title="ÁREA DE TEXTO OBRIGATÓRIO"> *</label>
                    </label> <input  title="ÁREA DE TEXTO OBRIGATÓRIO"  style="margin-top: -70px;"
                      required="required" class="form-control "  name="data" id="data" type="date" ng-model="pessoa.dataNascimento" format-date/>

                  </div>

I don’t know if it’s relevant but clicking change the captured data from the listing looks like this :

Does anyone have any idea what might be going on ??

Answer 1

That’s a Timezone problem. You can use ng-options to solve this way:

ng-model-options="{timezone: 'UTC'}"

Or still:

ng-model-options="{timezone: timezone}"

And on the controller:

$scope.timezone = ((date.getTimezoneOffset() / 60) * -100)

Link to fiddle with the example