AngularJS datepicker

by Manoj kumar Lakshman

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<div ng-app="date">
   <div ng-controller="dateCtrl">
      <!-- jq -->

      <!-- ng -->
      From Date:
      <input type="text" datepicker ng-model="date2" />
      <span>{{date2}}</span> To Date:
      <input type="text" datepicker1 ng-model="date3" />
      <span>{{date3}}</span>
      <br>
      <br>
      <br>
      <label>List Of Names</label>

      <br>


      <div ng-repeat="name in names | filter: dateRangeFilter('C_Option', date2, date3)">
         <br>{{name.C_Name}}
         <br>

         

      </div>
      <span>{{resultsCount}} records returned</span>
   </div>
</div>

CSS

</style> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> <style>

JavaScript

angular.module("date", [])
   .directive("datepicker", function() {
      return {
         restrict: "A",
         link: function(scope, el, attr) {
            el.datepicker({
               dateFormat: 'yy-mm-dd'
            });
         }
      };
   })
   .directive("datepicker1", function() {
      return {
         restrict: "A",
         link: function(scope, el, attr) {
            el.datepicker({
               dateFormat: 'yy-mm-dd'
            });
         }
      };
   })
   .controller("dateCtrl", function($scope) {
$scope.resultsCount = 0;
      $scope.names = [{

            id: "1",
            C_Name: "Ramesh",
            C_Phone: "*******",
            C_Option: {
               "date": {
                  "$date": "2015-10-19T09:52:26.507Z"
               }
            }

         }, {
            id: "2",
            C_Name: "Suresh",
            C_Phone: "*****",
            C_Option: {
               "date": {
                  "$date": "2015-10-21T09:52:26.507Z"
               }
            }

         }, {
            id: "3",
            C_Name: "Vignesh",
            C_Phone: "*******",
            C_Option: {
               "date": {
                  "$date": "2015-10-20T09:52:26.507Z"
               }
            }

         }, {
            id: "4",
            C_Name: "Sarath",
            C_Phone: "******",
            C_Option: {
               "date": {
                  "$date": "2015-10-20T09:52:26.507Z"
               }
            }

         },

         {
            id: "5",
            C_Name: "Sundhar",
            C_Phone: "******",
            C_Option: {
               "date": {
                  "$date": "2015-10-21T09:52:26.507Z"
               }
            }

         },

         {
            id: "6",
            C_Name: "Rajesh",
            C_Phone: "******",
            C_Option: {
               "date": {
                  "$date": "2015-10-18T09:52:26.507Z"
               }
            }

         }, {
  ...