Angular.js: Input date shows date -1 day

Question

I have a form with <input type="date">.

When I bind data in this input, it shows me the date -1 day.

The HTML:

<div class="input-field col s12">
    <label>Fecha Nacimiento </label>
    <input type="date" class="form-control" id="fnac" name="fnac" ng-model="unapersona.fnac">
</div>

The Controller:

$scope.cargarpersona = function(id) {
    $http.get("modelos/personas_json.php?id="+id)
    .success(function(data) {
        $scope.unapersona = eval(data);
        //... Other data
        $scope.unapersona.fnac = new Date($scope.unapersona[0]["fnac"]);
        //... Other data
    })
    .error(function(data) {
        console.log('Error: ' + data);
    });
}

Screen Capture

return the JSON format '2016-03-17'. In list view show date correctly, when I save changes, save correctly (the date of <input>+1). — Walter Lauxmann
– Walter Lauxmann, Commented Mar 17, 2016 at 14:25

Walter Lauxmann · Accepted Answer · 2016-03-17 20:19:59Z

9

Solved!! Just I put the ng-model-options = "{timezone 'UTC'} into the input date

<input type="date" class="form-control" id="fnac" name="fnac" ng-model="unapersona.fnac" ng-model-options="{timezone:'UTC'}">

https://docs.angularjs.org/api/ng/directive/ngModelOptions

Thanks for yours answers and time!

answered Mar 17, 2016 at 20:19

Walter Lauxmann

1632 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

R. Wenger Over a year ago

I just stumbled on this solution myself, glad you found it also :)

R. Wenger · Accepted Answer · 2016-03-17 15:10:54Z

1

You're probably running into timezone problems. Consider the following Code (Plunkr here)

JS

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.aDate = new Date(Date.UTC(2016, 02, 17, 0, 0, 0));
  $scope.aSecondDate = new Date(2016, 02, 17, 0, 0, 0);
});

HTML

<body ng-controller="MainCtrl">
    <h4>UTC Date</h4>
    <p>{{aDate}}</p>
    <h4>Local Date</h4>
    <p>{{aSecondDate}}</p>
  </body>

Output (on a CET browser):

UTC Date

"2016-03-17T00:00:00.000Z"

Local Date

"2016-03-16T23:00:00.000Z"

In the first case the date is set with UTC as the timezone.

In the second case, the date is set with the local timezone (your browser's settings), and then converted to UTC (which at the moment differs by 1h from CET), and because that puts the date over midnight, this is a different day.

edited Mar 17, 2016 at 15:10

answered Mar 17, 2016 at 14:49

R. Wenger

2983 silver badges15 bronze badges

5 Comments

Walter Lauxmann Over a year ago

Sorry... with the Date.UTC function, don't show any date in <input>. I don't think it Timezone problems, because in the list view displays the correct date

R. Wenger Over a year ago

How did you try the code? Can you provide the changed code? And can you provide your list view in your original question also? Which timezone are you in?

Walter Lauxmann Over a year ago

$scope.unapersona.fnac = new Date(Date.UTC($scope.unapersona[0]["fnac"]));

R. Wenger Over a year ago

This won't work, Date.UTC expects multiple arguments: developer.mozilla.org/en/docs/Web/JavaScript/Reference/…

Walter Lauxmann Over a year ago

I tried this, but does not show the date in the input: var date = new Date($scope.unapersona[0]["fnac"]); $scope.unapersona.fnac = new Date(Date.UTC(date.getFullYear(),date.getMonth() + 1),date.getDate());

Lucas · Accepted Answer · 2016-03-17 20:59:18Z

0

I believe the date input type expects / instead of -, havent tested but hope it works:

   .success(function(data) {
        $scope.unapersona = eval(data);

        var from_data = $scope.unapersona[0]["fnac"];
        var date_replace = from_data.replace(/-/g, '/');

        var date = new Date(date_replace );
        $scope.unapersona.fnac = ((date.getMonth() + 1) + '/' +  // JS months are 0 indexed and days are 1 indexed
                                   date.getDate() + '/' +                                                                                  
                                   date.getFullYear());
        })

edited Mar 17, 2016 at 20:59

answered Mar 17, 2016 at 14:51

Lucas

10.4k6 gold badges45 silver badges55 bronze badges

3 Comments

Lucas Over a year ago

what date does it return? for example if $scope.unapersona[0]["fnac"] was 2016-03-17?

Lucas Over a year ago

and what do you see in the html input type= date ?

Lucas Over a year ago

ok I updated my answer, seems to be that with - istead of / there is some kind of js bug, tested answer in console and seems to work fine

Collectives™ on Stack Overflow

Angular.js: Input date shows date -1 day

3 Answers 3

1 Comment

5 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related