How to bind View Date to model milliseconds with Angularjs

问题

I want to bind an input of type Date on the view
to a milliseconds property in the model with Angularjs.

For example :
the user set "09/23/2014" into the field
and angularjs automatically set "1411423200000"
into the model property binding with the input.

I don't find any directive or filter to do that.

Thanks for your help.

UPDATE to detail my question.

Is there a "native" way in Angularjs to intercept
model to view AND view to model and convert my data ?

回答1:

You can use ng-change https://docs.angularjs.org/api/ng/directive/ngChange

                $scope.onDateChange = function() {
                  if (this.node.mydate) {
                    this.node.mydate = this.node.mydate.getTime();
                  }
                };

And in the view

 <input type="text" ng-model="node.mydate" id="adate" name="adate" datepicker-popup="dd MMM yyyy HH:mm" ng-change="onDateChange()"/>

回答2:

I found a solution with :

ngModel.$parsers.push(fromUser);  
ngModel.$formatters.push(toUser);

With that, i change dynamically the data format during the binding.

See full solution in jsfiddle

回答3:

You can simply use it, it worked for me:

$scope.dateValue = new Date(dateInMilliSeconds);

It will directly convert your date in milliseconds to Date in MM/DD/YYYY format which is the default format for:

<input id="myDateID" name="myDateName" date-parser="MM/DD/YYYY" ng-model="dateValue" type="date"  class="form-control input-md" aria-describedby="sizing-addon3"/>

回答4:

You can use js Date.parse() please see here: http://jsbin.com/doyise/1/edit

JS:

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

app.controller('firstCtrl', function($scope){
  $scope.date = "";
  $scope.$watch("date", function(value)
               {
                 if(value)
                   {
                 $scope.mils = Date.parse($scope.date);
                   }
               });


});

HTML:

   <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-app="app">
  <div ng-controller="firstCtrl">
    <input ng-model="date" type="date"/>
     <p> Date in : {{date}}</p>
    <p> Date in ms: {{mils}}</p>
  </div>

</body>
</html>

回答5:

Basically the same solution from @asicfr, but a little more expressive:

// Convert Date Object to Milliseconds (value coming from the user)
ngModel.$parsers.push(function(val) {
    return isNaN(val) ? undefined : val.valueOf();
});

// Convert milliseconds to Date Object (going to the user)
ngModel.$formatters.push(function(val) {
    return isNaN(val) ? undefined : new Date(val);
});

回答6:

Your JSFiddle seems to have lost it's two-way binding. I didn't review for issues, instead I forked it with a much simpler overall solution.

This is the heart of it:

.directive('toDate', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    scope: true,
    link: function(scope, el, attrs, ngModel) {

        ngModel.$formatters.push(function(value) { //show the user the date
            return new Date(value);
        });
        ngModel.$parsers.push(function(value){
            return +new Date(value); //convert back to milliseconds
        });
    }
};

})

First, angular 1.4 handles this better. Secondly, note in the new fiddle that the input types handle the formatting. Lastly, all 3 inputs in the example are bound to the same datapoint in angular allowing you to update the date and time separately. The "text" type doesn't do much for you, I left it there for display only.

来源：https://stackoverflow.com/questions/24517883/how-to-bind-view-date-to-model-milliseconds-with-angularjs

标签

angularjs

date

angularjs-directive

milliseconds