AngularJS - Simple Directive Use
HTML
<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.js"></script>
<script src="https://raw.github.com/gist/2967979/c9bc81652cc9c7acca4d112b66335e78213fdcec/angular-ui-datepicker.js"></script>
<div ng-app="myApp" ng-controller="Ctrl">
<input ui-date="{model:{format: parseDate}}" name="dateCreate" ng-model="date01"></input>
<input ui-date="{view: {format: 'dd/mm/yy'}, model:{format: parseDate}}" name="dateCreate" ng-model="date01"></input>
<button ng-click="alert(date01)" >Alert Date</button>
<hr/>
<input ng-model="date02" ui-date="msDateHandler" />
<input ng-model="date02" ui-date="msDateHandler" />
<input ng-model="date02"/>
</div>
CSS
.ui-state-highlight { background-color: #EEEEEE; }
JavaScript
angular.module('myApp', ['ui.directives'])
.controller('Ctrl', ['$scope', function($scope) {
$scope.date01 = new Date("06/21/2012");
$scope.date02 = "\/Date(1339453260000-0500)\/";
$scope.parseDate = function(dv) {
alert(dv.toString());
// This function passes the date object
// straight through to be saved directly
// to the scope variable.
return dv
}
$scope.parseMSDate = function (pDate) {
var result;
if (pDate) {
var msDate = pDate.match(/\/Date\((.+)(-.+)?\)\//i)
if (msDate) {
return new Date(parseInt(msDate[1]));
}
result = new Date(pDate);
}
result = new FakeDate();
}
$scope.formatMSDate = function (pDate) {
alert(pDate);
return "\/Date(" + $.datepicker.formatDate("@", pDate) + ")\/";
}
FakeDate = function () { }
FakeDate.prototype = {
format: function () {
return '';
},
getTime: function () {
return null;
}
}
$scope.msDateHandler = {
model: {
parse: $scope.parseMSDate,
format: $scope.formatMSDate
},
view: {
format: 'dd/mm/yy'
}
};
$scope.alert = function(v){alert(v)};
}]);