I want to bind a input type="date" value on a moment variable. But it is not working. Here is my code :
HTML :
<input class="form-control" type="date" name="birthday" placeholder="MM/DD/YYYY"
ng-model="vm.birthday.value" required format-date>
My Controller have only the variable birthday of the type : DateField.
My model (on typescript):
class DateField implements IField {
constructor(dateMin: moment.Moment, dateMax: moment.Moment) {
this.dateMin = dateMin;
this.dateMax = dateMax;
this.value = moment();
}
value: moment.Moment;
dateMin: moment.Moment;
dateMax: moment.Moment;
isValid() {
return this.value !== undefined && this.value !== null && this.value.isValid() && this.value > this.dateMin && this.value < this.dateMax ;
};
}
Directive :
testApp.directive("formatDate", function () {
return {
require: 'ngModel',
link: function (scope: any, elem: any, attr: any, modelCtrl : any) {
modelCtrl.$formatters.push(function (modelValue) {
if (modelValue !== undefined && modelValue !== null && moment(modelValue).isValid()) {
return moment(modelValue);
}
else {
return moment();
}
});
}
};
});
The error :
TypeError: this.value.isValid is not a function at DateField.isValid (localhost:50106/Views/core/main.min.js:1409:78) at Object.fn [as get] (eval at (localhost:50106/Views/core/libs/angularjs/angular.min.js:212:283), :4:322) at n.$digest (localhost:50106/Views/core/libs/angularjs/angular.min.js:130:71) at n.$apply (localhost:50106/Views/core/libs/angularjs/angular.min.js:133:236) at $$debounceViewValueCommit (localhost:50106/Views/core/libs/angularjs/angular.min.js:264:243) at $setViewValue (localhost:50106/Views/core/libs/angularjs/angular.min.js:263:482) at HTMLInputElement.l (localhost:50106/Views/core/libs/angularjs/angular.min.js:162:479) at HTMLInputElement.b.event.dispatch (localhost:50106/Views/core/libs/jquery/jquery-1.9.1.min.js:3:28337) at HTMLInputElement.v.handle (localhost:50106/Views/core/libs/jquery/jquery-1.9.1.min.js:3:25042)(anonymous function) @ angular.js:12450(anonymous function) @ angular.js:9237n.$digest @ angular.js:15777n.$apply @ angular.js:16030$$debounceViewValueCommit @ angular.js:25318$setViewValue @ angular.js:25290l @ angular.js:21611b.event.dispatch @ jquery-1.9.1.min.js:3v.handle @ jquery-1.9.1.min.js:3 angular.js:12450 TypeError: this.value.isValid is not a function at DateField.isValid (localhost:50106/Views/core/main.min.js:1409:78) at Object.fn [as get] (eval at (localhost:50106/Views/core/libs/angularjs/angular.min.js:212:283), :4:322) at n.$digest (localhost:50106/Views/core/libs/angularjs/angular.min.js:130:71) at n.$apply (localhost:50106/Views/core/libs/angularjs/angular.min.js:133:236)
I don't understand, is like if my directive is not used. If I understand well, the directive (that I took and adapted from an another Q&A from stackoverflow) must return a moment variable on the binding.
Thanks.