Here is my code:
http://dojo.telerik.com/@CarloCruz/IjEZa
On initial load, the datepicker is empty.
If you remove ng-model from the directive template, the datepicker works like it should with it's initial value, but changing the datepicker doesn't trigger the form to be dirty.
How do i set the initial value and be able to trigger the $dirty of the angular form?
Probably because the directives are wrapped (your custom one is wrapping the telerik one which wrappes the jquery one). Just change it manually like this:
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/dropdownlist/angular">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.930/styles/kendo.blueopal.min.css" />
<script src="//kendo.cdn.telerik.com/2015.3.930/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div class="demo-section k-content" ng-controller="MyCtrl">
<div ng-form="testform">
{{testform.$dirty}}
{{dateAttach}}<br />
<my-datepicker form="testform" ng-model="dateAttach" required></my-datepicker>
</div>
</div>
</div>
<script>
angular.module("KendoDemos", ["kendo.directives"])
.controller("MyCtrl", function($scope) {
$scope.dateAttach = new Date(1444015467000);
}).controller('DatePickerCtrl', [
'$scope', function($scope) {
$scope.$watch('date', function(oldVal, newVal) {
if(oldVal != newVal){
$scope.form.$dirty = true;
}
});
}
]).directive('myDatepicker', [
function() {
return {
restrict: 'E',
scope: {
date: '=ngModel',
form: '='
},
controller: 'DatePickerCtrl',
template: '{{date}}<br /><input kendo-date-picker="datePicker" k-ng-model="date" k-ng-delay="date"/>'
};
}
])
