There is always a havoc on handling dates in the application either it's java /dot net or angular . So here is the best way I found in order to overcome the problem .

Date Directive









Here I am going to explain about angular date filtering concept and how to use filtering concept to filter Date across your application.It is always better to create a date.js file for those filtering concept.





The advantage of this is you can very easily filter the data anywhere in your view by just placing directive.





This can be achieved by using following code in your module defined, for example : CYW.date below.





angular.module('CYW.date', []) .filter('stringToDate', function () { return function (input) { /// gets Date input, if not, returns null. Also sets the date to /// correct format if (!input) return null; var date = moment(input); return date.isValid() ? date.format('MM/DD/YYYY') : null; }; }) .directive('cywDate', ['$filter', function directives_date($filter) { /// Directive script for the date return { restrict: 'A', require: 'ngModel', link: function ($scope, elem, attr, ngModel) { /// **Make it a datepicker using bootstrap and Set orientation according to your needs elem.datepicker({ orientation : "auto bottom"}); //Add calendar elem.wrap('<div class="input-group"></div>'); var icon = $('<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>'); icon.click(function () { /// opens up calender elem.focus(); }); elem.parent().append(icon); //format text going to user (model to view) ngModel.$formatters.push(function (value) { /// <summary> /// pushes value to date /// </summary> /// <param name="value">The value.</param> return $filter('stringToDate')(value); }); //parse text from the user (view to model) ngModel.$parsers.push(function (value) { /// pushes date parse to the value var date = new Date(value); if (!isNaN(date.getTime())) { return moment(date).toDate(); } }); } } } ]) ;





Nothing More !!! just go ahead and include in your application Config so that application recognises directive.





Only thing now remains is put the directive in your input tags on view and boom .. that creates a date-picker with the formatted date .









<input type="text" cyw-date class="form-control" id="cywStartDate" name="cywStartDate" ng-model="data.cywStartDate" />



