Reputation: 529

angularjs date picker implementation error

I am trying to implement angular js date picker from here but i am getting error.Don't understanding the error message!what i am doing wrong ?Am i missing any library file or it is just for syntax errors ?

var myApp = angular.module('myApp',['ui.bootstrap']);

myApp.controller('MyCtrl', function($scope) {
    $scope.list = [
    {"eid":"10","ename":"nam1"},

    {"eid":"20","ename":"nam2"},

    {"eid":"30","ename":"nam3"},

    {"eid":"40","ename":"nam4"}
    ];





  
//date picker
  $scope.open = function($event) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened = true;
  };

  $scope.dateOptions = {
    formatYear: 'yy',
    startingDay: 1
  };

 
  $scope.format = 'dd-MMMM-yyyy';



//end of date picker




    
});

  .full button span {
    background-color: limegreen;
    border-radius: 32px;
    color: black;
  }
  .partially button span {
    background-color: orange;
    border-radius: 32px;
    color: black;
  }

<html>
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
    <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
  
</head>

<div class="container">

<div ng-app="myApp" ng-controller="MyCtrl">


    <pre>Selected date is: <em>{{dt | date:'MM/dd/yyyy' }}</em></pre>
    <p>above filter will just update above UI but I want to update actual ng-modle</p>


    <h4>Popup</h4>
    <div class="row">
      <div class="col-md-6">
        <p class="input-group">
          <input type="text" class="form-control" uib-datepicker-popup="{{format}}" 
          ng-model="dt" is-open="opened" min-date="minDate" max-date="'2018-06-22'"
          ng-model-options="{timezone: 'UTC'}" 
          datepicker-options="dateOptions" date-disabled="disabled(date, mode)"
          ng-required="true" close-text="Close" />
          <span class="input-group-btn"> 
                <button type="button" class="btn btn-default" ng-click="open($event)">
                <i class="glyphicon glyphicon-calendar"></i></button>
              </span>
        </p>
      </div>
    </div>


<table  class="table table-striped table-bordered">
    <thead>
      <tr>
	 <th>Employee ID</th>
	<th>name</th>
    </thead>
    <tbody>
  
   <tr ng-repeat="data in list">
      <td> {{ data.eid }} </td>
      <td> {{ data.ename }} </td>
    </tr>
</tbody>
  
</table>

</div>



</div>

Upvotes: 0

Answers (1)

Santosh

Reputation: 1839

Update your angular 1.2.X to 1.6.1 as your other dependencies are of 1.6.X. After update, I didnt get the error TypeError: Cannot read property 'join' of undefined

var myApp = angular.module('myApp',['ui.bootstrap']);

myApp.controller('MyCtrl', function($scope) {
    $scope.list = [
    {"eid":"10","ename":"nam1"},

    {"eid":"20","ename":"nam2"},

    {"eid":"30","ename":"nam3"},

    {"eid":"40","ename":"nam4"}
    ];





  
//date picker
  $scope.open = function($event) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened = true;
  };

  $scope.dateOptions = {
    formatYear: 'yy',
    startingDay: 1
  };

 
  $scope.format = 'dd-MMMM-yyyy';



//end of date picker




    
});

.full button span {
    background-color: limegreen;
    border-radius: 32px;
    color: black;
  }
  .partially button span {
    background-color: orange;
    border-radius: 32px;
    color: black;
  }

<html>
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  
<script src="https://code.angularjs.org/1.6.1/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
    <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
  
</head>

<div class="container">

<div ng-app="myApp" ng-controller="MyCtrl">


    <pre>Selected date is: <em>{{dt | date:'MM/dd/yyyy' }}</em></pre>
    <p>above filter will just update above UI but I want to update actual ng-modle</p>


    <h4>Popup</h4>
    <div class="row">
      <div class="col-md-6">
        <p class="input-group">
          <input type="text" class="form-control" uib-datepicker-popup="{{format}}" 
          ng-model="dt" is-open="opened" min-date="minDate" max-date="'2018-06-22'"
          ng-model-options="{timezone: 'UTC'}" 
          datepicker-options="dateOptions" date-disabled="disabled(date, mode)"
          ng-required="true" close-text="Close" />
          
          
          <span class="input-group-btn"> 
                <button type="button" class="btn btn-default" ng-click="open($event)">
                <i class="glyphicon glyphicon-calendar"></i></button>
              </span>
        </p>
      </div>
    </div>


<table  class="table table-striped table-bordered">
    <thead>
      <tr>
	 <th>Employee ID</th>
	<th>name</th>
    </thead>
    <tbody>
  
   <tr ng-repeat="data in list">
      <td> {{ data.eid }} </td>
      <td> {{ data.ename }} </td>
    </tr>
</tbody>
  
</table>

</div>



</div>

Upvotes: 1

angularjs date picker implementation error

Answers (1)

Related Questions