In addition to @karaxuna's answer, I would like to provide the complete directive and its testing:
directivesApp.directive('bindTimestamp', function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ngModel) {
var minDate = attrs.min ? new Date(attrs.min) : null;
var maxDate = attrs.max ? new Date(attrs.max) : null;
ngModel.$formatters.push(function (value) {
var dt = value;
if (!angular.isDate(dt) && angular.isNumber(dt)) {
// It's a timestamp --> needs to be converted to a <Date>
dt = new Date(value);
}
// truncate 'dt' to second if milliseconds are not to be displayed in input[datetime-local]
// dt.setMilliSeconds(0);
// truncate 'dt' to minute if seconds are not to be displayed in input[datetime-local]
// dt.setSeconds(0);
return dt;
});
// Default validators need to be overriden, otherwise they will always trigger "false" as they expect a <Date> object and not a number.
var MinMaxValidator = function (modelValue) {
var selectedDate = angular.timestampToDate(modelValue, scope.truncateSeconds);
this.validate = function (validateThreshold) {
if (angular.isDate(selectedDate)) {
return validateThreshold(selectedDate);
}
return true;
};
};
if (ngModel.$validators.min && minDate !== null) {
ngModel.$validators.min = function (modelValue) {
return new MinMaxValidator(modelValue).validate(function (selectedDate) {
return minDate <= selectedDate;
});
};
}
if (ngModel.$validators.max && maxDate !== null) {
ngModel.$validators.max = function (modelValue) {
return new MinMaxValidator(modelValue).validate(function (selectedDate) {
return maxDate >= selectedDate;
});
};
}
}
};
});
Jasmine test:
describe('bindTimestamp : timestamps', function () {
// 2016-02-19 09:56:51.396ms
var dt = 1455872211396;
function buildInputDateElement(inputType) {
var element = angular.element('<input type="' + inputType + '" ng-model="myDate" bind-timestamp>');
$compile(element)($scope);
$scope.$digest();
return element;
}
it('bindTimestamp : input[date]', function () {
var formattedDate = '2016-02-19';
/** A timestamp */
$scope.myDate = dt;
var element = buildInputDateElement("date");
expect(element.val()).toEqual(formattedDate);
//** Already a <Date> */
$scope.myDate = new Date(dt);
element = buildInputDateElement("date");
expect(element.val()).toEqual(formattedDate);
});
it('bindTimestamp : input[datetime-local]', function () {
var formattedDate = '2016-02-19T09:56:51.396';
/** A timestamp */
$scope.myDate = dt;
var element = buildInputDateElement("datetime-local");
expect(element.val()).toEqual(formattedDate);
/** Already a <Date> */
$scope.myDate = new Date(dt);
element = buildInputDateElement("datetime-local");
expect(element.val()).toEqual(formattedDate);
});
});