Conversion between Date String and Timestamp using Angularjs Directive

Let me ask you one question. Can a veiwValue and modelValue have same value into a different format? The answer is YES. Here we will see how it can be possible. We will see it through a simple example that converts date string (viewValue) into timestamp (modelValue). We will use a text box to enter a date string (dd/mm/yyyy) and convert it into timestamp that will be stored into model value. The trick is that we will use $parsers to convert the date string into the timestamp and $formatters to change the timestamp stored in modelValue to date string that will be shown on text input. Let's see the codes first:

HTML Code:

<h4>Date to Timestamp</h4>
<div class="form-group">
  <label for="date1" class="col-sm-3 control-label">Date1 VeiwValue:</label>
  <div class="col-sm-3">
    <input type="text" id="date1" class="form-control" name="date1" ng-model="obj.date1" placeholder="dd/mm/yyyy" date-conversion>
  </div>

  <label for="date11" class="col-sm-3 control-label">Date1 ModelValue:</label>
  <div class="col-sm-3">
   <label class="control-label">{{obj.date1}}</label>
  </div>
</div>
<h4>Timestamp to Date</h4>
<div class="form-group">
  <label for="date11" class="col-sm-3 control-label">Date2 ModelValue:</label>
  <div class="col-sm-3">
   <label class="control-label">{{obj.date2}}</label>
   </div>
  <label for="date2" class="col-sm-3 control-label">Date2 VeiwValue:</label>
  <div class="col-sm-3">
   <input type="text" id="date2" class="form-control" name="date2" ng-model="obj.date2" date-conversion>
 </div>
</div>

Javascript Code:

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

app.controller('myAppCtrl',['$scope',function($scope){
 $scope.obj = {};
 $scope.obj.date2 = 1512239400000; // Date : 03/12/2017
}]);

app.directive('dateConversion',['$filter',function($filter){
 return {
  require : 'ngModel',
  link : function(scope, iElement, iAttribute, ngModelController){

   function datetotimestamp(veiwvalue){
    var regEx =  /^(\d{2})([-|\/]{1})(\d{2})\2(\d{4})$/;
       var reg_arr = veiwvalue.match(regEx);
       var timestamp;
       if(reg_arr){
        timestamp = new Date(reg_arr[3] + '/' + reg_arr[1] + '/' + reg_arr[4]).getTime();
        if(timestamp){
         return timestamp;
        }
       }
    return "Invalid Date";
   }

   function timestamptodate(modelvalue){
    if(modelvalue){
     return $filter('date')(modelvalue,'dd/MM/yyyy');
    }
   }

   ngModelController.$parsers.push(datetotimestamp);
   ngModelController.$formatters.unshift(timestamptodate);
  }
 };
}]);

Working Example:


As the value changes in the input box, it's value will pass through the $parsers (view to model pipeline). We have defined a datetotimestamp() function and pushed it into the $parsers array. In the datetotimestamp() function, we have captured the date string and perform a check for the validity of the date string and convert it into the timestamp and return it for the $validators. After the validation, the converted value is stored in the ngModel expression.

Similarly, as the model value changed programmatically, it will go through the $formatters (model to view pipeline). Here we have defined a function timestamptodate() and unshifted into the $formatters array. In the timestamptodate() function, we will convert the modelValue and return the string format of the timestamp. This value will be updated on DOM.