calender in angular js

few functionalities in calender

by Samar Pattanayak

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
<div ng-app="myApp">
  <div ng-controller="myController" onclick="down()">
    UserName : <strong>{{name |myFilter}}</strong></br>
    {{apply }}
    <input type="text" id="txtAge" value="12" ng-show="false" />
    <p>
      From :
      <input type="text" id="fromDest" ng-model="valfrom" class="txtDest" my-directive/>{{valfrom}}
      <button id="btnSwap" style="border-radius:10px" ng-click="reverse()">
        -->{{date}}
      </button>
      To :
      <input type="text" id="toDest" class="txtDest" ng-model="valto" my-directive/>{{valto}}
    </p>

    <p>From Date:
      <input type="text" class="textDate" ng-model="date" id="datepicker" placeholder="Select from date ">
    </p>
    <p>To Date:
      <input type="text" class="textDate" ng-model="dateTo" id="datepickerTo" placeholder="Select To date ">
    </p>

    <button ng-click="down()">
      gEt daTe
    </button>
    <div>
      {{date | dateFilter}}
    </div>
  </div>
</div>

CSS

.textDate {
  border-radius: 3px;
  color: #FF5733;
  width: 150px;
  height: 20px;
  border-color: #0087FF;
  padding-left: 5px;
}

.txtDest {
  border-radius: 3px;
  border-color: green;
  margin: 5px 25px 0px 3px;
  width: 150px;
  height: 20px
}

JavaScript

function down() {
  var control = angular.element(document.querySelector("#txtAge"));
  console.log(control)
  console.log(control[0].value);
  //or
  //var control = document.querySelector("#txtAge");
  //console.log(control.value);
}

var app = angular.module("myApp", []);
app.factory("myFactoryAuto", function() {
  return {
    getSource: function() {
      return [{
        label: 'Bangalore',
        id: 3
      }, {
        label: 'Bhubaneswar',
        id: 32
      }, {
        label: 'Delhi',
        id: 32
      }, {
        label: 'Deradhun',
        id: 33
      }, {
        label: 'Bhopal',
        id: 34
      }, {
        label: 'Bombay',
        id: 35
      }];
    }
  }
})
app.directive("myDirective", function(myFactoryAuto, $parse, $timeout) {
  return {
    restrict: 'EA',
    require: 'ngModel',
    link: function(scope, elem, attr, ctrl) {
      // elem is a jquery lite object if jquery is not present,
      // but with jquery and jquery ui, it will be a full jquery object.
      //debugger
      //attr.$set('autocomplete', 'off');//no need of this
      elem.autocomplete({
        //source: scope.newItem, //from your service
        source: myFactoryAuto.getSource(),
        minLength: 1,
        select: function(e, ui) {
          //event.preventDefault();
          console.log(e.type + ui.item.id);
          //$parse(attr.ngModel).assign(scope, elem.val());
          
          $timeout(function() {
            ctrl.$setViewValue(elem.val());
            //scope.valfrom=elem.val();
            //elem.controller('ngModel').$setViewValue(elem.val());
            //angular.element(‘city’).controller(‘ngModel’).$render();
          }, 0);
          //scope.$apply();               
        },
        focus: function(event, ui) {
          event.preventDefault();
          console.log(ui.item.id + ' ,' + event.type);
        }
      });
    }
  }
})
app.controller("myController", ['$scope', function(sc) {
  sc.apply = `Its Saturday & Date is  ...